Reload Express.js routes changes without manually restarting server

Question

I tried express-livereload, but it just reloaded view files.

Should I use another tool, or this one can be configured to watch for my index.js file which runs the server?

I read that options are the same as node-livereload, and default for watched files include .js files.

Any URL you know with a simple configuration?

My main problem is how to setup good development environment for Express.js, and I would like to inspect the variables when I am making a request, is painful to restart each time I make a change in a route.

PS I tried node-inspector to inspect variables when server handles a request, but it seems node-inspector is not intended for that, right?

Commeasure

Have you tried using Grunt/Gulp? I have found this question. You could do the same with grunt, but I prefer gulp as it has more understandable config. – Felicity

I would prefer something configurable that works with default configuration. – Commeasure

Does this answer your question? Node.js - Auto Refresh In Dev – Israel

Answer 1

I think Nodemon has what you're looking for.

Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.

Example invocation:

nodemon index.js

Alasteir

Simple npm install --save-dev nodemon to add it to your package.json. Then you can add a script like this: "dev": "nodemon index.js" – Nitz

But this restarts the server. – Boss

I love and use nodemon for a lot of static sites that I develop, but as Filipe says, your entire server process is stopped and restarted on change. That's exactly the opposite of what the question asked for. – Turbinate

I think the essence of the question is a way for OP to make the development workflow easier i.e. not have to manually restart the server (as indicated by the penultimate paragraph). OP also seems to be happy with the Nodemon (see first comment to answer). But yeah, @Turbinate and Filipe: you are both technically correct in that Nodemon restarts the server though :) – Alasteir

Answer 2

I use express.js, normally start server by

npm start

with Nodemon installed, I use

nodemon --exec npm start

Note: nodemon app.js will NOT work here,

because express.js use start script

To install nodemon

npm install -g nodemon

Agleam

Nodemon uses by default the start script in package.json, so instead of nodemon --exec npm start you can simply say nodemon. – Israel

But the entire server is restarting. will it keep my cpu working for ever? – Patter

Answer 3

You can livereload both front and backend changes to the browser using 'livereload', 'connect-livereload', and 'nodemon'. Also, this way you don't need Gulp or Grunt. Here's how they work together:

• livereload opens a high port and notifies the browser of any changed file
• connect-livereload monkey patches every served HTML page with a JavaScript snippet that connects to this high port
• nodemon restarts the server on any changed backend file

Set up livereload in Express

Set up Express to both start livereload server watching the public directory and ping the browser during nodemon-induced restart:

const livereload = require("livereload");
const connectLivereload = require("connect-livereload");

// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

const app = express();

// monkey patch every served HTML so they know of changes
app.use(connectLivereload());

Start Express with Nodemon

Start the server with nodemon, for example, with a dedicated watch script by running npm run watch.

The key point here is to ignore the public directory that's already being watched by livereload. You can also configure files with non-default extensions, like pug and mustache, to be watched.

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},

You can read a longer explanation in "Refresh front and backend changes to browser with Express, LiveReload and Nodemon."

Israel

Answer 4

It might interest you to know that since the release of Node.js V18.11.0, Node.js can automatically restart a server upon making a change to the index.js file.

To use the feature, run the server with the following command:

 node --watch index.js

Note: At the time of writing, the feature is still experimental.

Lawyer

Brilliant! Works out of the box on v18.15.0 with no additional flags. Prints an "experimental feature" warning, but is working perfectly. – Nonmaterial