Tips on running React page with Node backend

featured
November 12, 2017
ūüíę Originally posted here. Broken? Let me know ~

As I was learning¬†React, I’ve run into a situation where I needed to use node as a backend. I found this wonderful article Create React App with an Express Backend by Dave Ceddia.

But debugging required opening two command windows; One for node server, another for webpack dev server.

  • SET PORT=3001 && node bin/www
  • SET PORT=3000 && yarn start

Can we do better?

TL;DR;

Use concurrently & nodemon

Prereq or not…

Please read Create React App with an Express Backend first on how to set up react page with node backend.

Problem

When you chain commands together with &&¬†or¬†&¬†(in Mac/Linux),¬†command on the right-hand side doesn’t execute until the left-hand side finishes.

Let’s run following code in a command window.

Node CLI¬†(node bin/www)doesn’t return until interrupted thus SET PORT=3000¬†&&¬†yarn start¬†doesn’t get a chance to run.

We need a way to run both node¬†and yarn¬†“concurrently”.

Running node server & Webpack dev server “Concurrently”

This is where concurrently command comes into play. The NPM page describes the functionality as,

Run multiple commands concurrently

Now let’s install “concurrently” globally and locally for react-backend¬†site¬†(not under “/client” but in the express project).

Note: I installed it globally as well to run the command before adding it to “package.json” file.

concurrently accepts a variable number of arguments in quotes separated by space.

In our case, we want to run node & webpack dev server, so the command to run looks like following.

The command line runs the node server and starts webpack dev server as shown below.

And if the react-scripts ran successfully as shown above, a browser will open and display the react page.

Another problem

Refreshing the browser after updating a node file would not reflect the change you made as shown below.

To monitor the change in node script changes, there are multiple options. To name a few,

I will use nodemon since it lets me add only 3 characters (yes, I am lazy… but check out other commands that suits your needs).

Watching node file change

All you need to do is to replace node with nodemon within concurrently call.

So let’s install nodemon¬†first¬†(I am installing it globally again to test in command window).

Now the command becomes

You can see that nodemon starts monitoring and runs react-scripts to start webpack dev server.

If you refresh the browser after making a change in the backend, the page will reflect the update.

Saving Private Ryan Keystrokes

Now let’s get lazier and add the concurrent command to the “package.json” under express project root as startall.

(You can use a single quote around concurrently¬†in Mac/Linux not to escape double quotes but it won’t work on Windows. That was the case for ReactJS.org website so I had made a PR¬†to make it work on Windows).

Now you can run concurrently as shown below.

Parting Words

I’ve blabbered a lot but it’s basically a two-step¬†process.

  1. Install concurrently & nodemon: npm i concurrently --dev && npm i nodemon --only=dev
  2. Start servers using concurrently by adding the concurrently command to package.json: npm run startall or yarn startall

I hope these two extra steps save you time and money.