A nice feature of tools like create-react-app, angular-cli, webpack, and many others is the ability to reload your application when you make a change to a source file. But what do you do when you have a Node backend to go along with your frontend? There are numerous tools you can use to detect changes to files and then restart a process based on that, but who has time to build those scripts to put it all together?
That’s what I had been thinking while working on a web app for a friend. “The react app restarts so I guess it isn’t too bad to restart the node app all the time” I had completely forgotten about a utility I had found previously, nodemon. Nodemon is that script you would build to restart your app, only with even more features.
It took me less than 5 minutes to add it to the application and I am so glad that I did!
Instead of installing it globally, I prefer to install it as a dev dependency.
# NPM
npm install --save-dev nodemon
# Yarn
yarn add -D nodemonWhen I am building a SPA
I tend to have separate client and server directories and I don’t need the node
app restarting after every frontend change, so I added the following to my package.json file.
"nodemonConfig": {
"watch": [
"server/*"
]
}This tells nodemon to only watch files under the server/* directory. There are
plenty of other configuration options you can find in nodemon’s documentation.
The last step was to add nodemon to the command to start the node app. I have a dev script defined in my package.json file and save the start script for
use in production. So I updated the script from PORT=3001 ./server/bin/www to PORT=3001 nodemon ./server/bin/www.
This project is using Yarn, but if you are using NPM you may want to do something more like PORT=3001 npx nodemon ./server/bin/www.
That’s all there is to it. I can’t believe I didn’t take the time to do this earlier.