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 nodemon

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