Hot reloading Express app

Why hot reloading Express app?

When you develop any Node application, after you make changes to the source code you need to stop and start the application again to see the changes. Starting, stopping and re-starting you application looks a bit like this:

Start the app in a terminal:

node app.js

make changes in your code editor, save files and go back to a terminal to press Ctr+C to stop the app, and restart again

node app.js

And so on...

It is fine to do it a couple of time check one or two changes but can drive you mad when you are developing and need to stop and re-start you application several times.

Thankfully, there is a better solution!

Use nodemon for hot reloading

Nodemon monitors for any changes in your source code and automatically restarts your application.

You could use nodemon globally and just start your application with the command nodemon app.js but we recommend a per-project installation.

To demonstrate how to use nodemon, we will use our simplest-express-app as a starting point. We will integrated nodemon tool for monitoring code in development and we will test it to see how it refreshes without manually restarting our app.

First, clone the simple app to play with:

git clone https://github.com/regbrain/simplest-express-app.git

go to the project directory:

cd simplest-express-app

install nodemon:

yarn add nodemon --dev

Now we will leverage the power on npm scripts to set up nodemon as our default way of running your project in development.

Open package.json and add the following dev option in scripts:

  "scripts": {
    "dev": "nodemon app.js"
  },

The full package.json should like like this:

{
  "name": "simplest-express-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon app.js"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

Test nodemon

In your terminal, run your application using dev script which will start app.js via nodemon and monitor for code change:

yarn dev

In your browser, go to http://localhost:3000/ and you should see 'Hello world!'.

Now let's check how nodemon restarts our app automatically. Open file app.js and change the message from 'Hello world!' to 'Hello hot reload!', like this:

let app = require('express')()
app.get('/', (req, res) => res.send('Hello hot reload!'))
app.listen(3000, () => console.log('Listening on port 3000'))

Save the file and go to your browser. Hit F5 to refresh and you should see the message 'Hello hot reload!'.

Now you have your basic development set-up ready and you can continue playing with the code without the need to restart the Node app every time you save the file.

When you work on new projects in the future, make sure to install and configure nodemon when you start so you can have a better development experience. Nodemon should be in your standard toolbox for developing Node applications.

Happy coding!