{ sung.codes }

by dance2die
Blog
← Go Back

Tips on running React page with Node backend

Broken Post?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.

SET PORT=3001 && node bin/www && SET PORT=3000 && yarn start
view raw chain with &&.cmd hosted with ❤ by GitHub

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).

npm install -g concurrently && npm install concurrently --only=dev

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.

concurrently "command1 arg" "command2 arg"
view raw concurrently.cmd hosted with ❤ by GitHub

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

concurrently "SET PORT=3001 && node bin/www" "cd client && SET PORT=3000 && yarn start"
view raw runConcurrently.cmd hosted with ❤ by GitHub

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

> concurrently "SET PORT=3001 && node bin/www" "cd client && SET PORT=3000 && yarn start"
yarn run v1.1.0
$ react-scripts start
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view client in the browser.
[1]
[1] Local: http://localhost:3000/
[1] On Your Network: http://10.0.75.1:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.
[1]
[0] GET /users 304 18.276 ms - -

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.

https://youtu.be/fpe5E-OdZb4

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).

npm install -g nodemon && npm install nodemon --only=dev
view raw install nodemon.cmd hosted with ❤ by GitHub

Now the command becomes

# concurrently "SET PORT=3001 && node bin/www" "cd client && SET PORT=3000 && yarn start"
# to
concurrently "SET PORT=3001 && nodemon bin/www" "cd client && SET PORT=3000 && yarn start"
view raw command change.cmd hosted with ❤ by GitHub

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

> concurrently "SET PORT=3001 && nodemon bin/www" "cd client && SET PORT=3000 && yarn start"
[0] [nodemon] 1.12.1
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching: *.*
[0] [nodemon] starting `node bin/www`
yarn run v1.1.0
$ react-scripts start
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view client in the browser.
[1]
[1] Local: http://localhost:3000/
[1] On Your Network: http://10.0.75.1:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.
[1]
view raw nodemonresult.cmd hosted with ❤ by GitHub

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

https://youtu.be/Avqr8-8KCsM

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).

{
...
"scripts": {
...,
"startall": "concurrently \"SET PORT=3001 && node bin/www\" \"cd client && SET PORT=3000 && yarn start\""
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
view raw startall.json hosted with ❤ by GitHub

Now you can run concurrently as shown below.

npm run startall
# or "yarn startall"
view raw startall.cmd hosted with ❤ by GitHub

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.