Connecting Node/Express 4 with react-web-app — Part 1

Kushal V. Mahajan
Jul 27, 2017 · 3 min read

I am about to tell you a story on how to connect a node/express app to react. This will be a two part story.

The reason for publishing is because I haven’t find anything exactly working as such or have struggled to get started due to lots of missing pieces in such setups or attempts. I will proceed React part with the very famous create-react-app from Facebook.

via Express 4 route and create-react-app

Let’s get connected…

I assume you have nodejs and express installed.

I will be using create-react-app to generate the react app and a basic express structure to achieve the same.

Setting up server side first ( Part 1 )

Let’s fire up a few commands and get started quickly.

mkdir react-node-app

cd react-node-app

mkdir controllers models routes

touch index.js controllers/cs_notes.js routes/rs_notes.js

npm init

Once done, you will see the above folders and files mentioned along with package.json file.

Now, let’s add some code to index.js

If you run this we have our server up on http://localhost:9001 and our end-points are accessible on http://localhost:9001/api/

Umm…let’s walkthrough this code a bit.

First of all I am requiring my rs_notes.js route file which contains my route for just notes module.

Then another important or rather unfamiliar to some maybe the lines

const router = express.Router();

What it does is invoke express Router released in Express 4. It helps to modularize the app code without cluttering the index.js file alone. For example, if we have users module in our app, we can just require it in the same way we did for our notes module.

Next up is the middleware code, I will come back to it in a moment.

But see the below code first.

router.get('/', (req, res) => {
res.send('Home');
});

First glance to it may get you thinking — Oh, I have a router from Express 4 and I am attaching a GET route to it and if I hit http://localhost:9001/api/, I should get the text Home back. But it’s not the case.

Reason being const router doesn’t listens by itself. I repeat, const router doesn’t listens by itself.

For above to work, we have to mount it. Here’s how it works.

app.use('/api', router);

Now, http://localhost:9001/api/ on postman or browser does return “Home”

Similarly I am defining a route for accessing my notes module’s routes just below this line

app.use('/api/notes', notes);

If we hit the http://localhost:9001/api/notes it should return me nothing valuable.

Let’s add some routes to our rs_notes.js file and get it working.

The code is just adding two routes. First GET and second POST. If we now hit the GET http://localhost:9001/api/notes it should return me notes json

Try out same link with POST too.

We have setup our Express routes fair and simple.

I promised you to explain the middleware function

router.use((req, res, next) => {

// log each request to the console
console.log(req.method, req.url);

// continue doing what we were doing and go to the route
next();
});

Middleware fires up with each request we will fire. It can be used to do some useful error logging stuff and many other things. Do read about it in isolation.

Alright folks, I am done with the first part of this article.

Moving ahead, we will be looking at React setup and connectivity with our Node app.

Here’s part 2 — https://medium.com/@kushalvmahajan/connecting-node-express-4-with-react-web-app-part-2-react-setup-df4f128c2eaa

Kushal V. Mahajan

Written by

Author of @turtlemint/redux-analytics and @turtlemint/mint-ui

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade