2017-11-12
Tips on running React page with Node backend
blogentry, problemsolving, programming, backend
title: Tips on running React page with Node backend date: "2017-11-12" banner: ./images/featured-image-1.jpg published_at: "2017-11-12T20:40:32.000Z" tags: "blogentry, problemsolving, programming, backend" author: Sung M. Kim
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 |
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" |
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" |
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.
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 |
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" |
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] |
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).
| { | |
| ... | |
| "scripts": { | |
| ..., | |
| "startall": "concurrently \"SET PORT=3001 && node bin/www\" \"cd client && SET PORT=3000 && yarn start\"" | |
| }, | |
| "dependencies": { | |
| ... | |
| }, | |
| "devDependencies": { | |
| ... | |
| } | |
| } |
Now you can run concurrently as shown below.
| npm run startall | |
| # or "yarn startall" |
Parting Words
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 `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.