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?
Prereq or not…
Please read Create React App with an Express Backend first on how to set up react page with node backend.
When you chain commands together with
& (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
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.
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
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
(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.
I’ve blabbered a lot but it’s basically a two-step process.
- Install concurrently & nodemon:
npm i concurrently --dev && npm i nodemon --only=dev
- Start servers using
concurrentlyby adding the
concurrentlycommand to package.json:
npm run startallor
I hope these two extra steps save you time and money.