60

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?

stellarchariot
  • 2,872
  • 1
  • 19
  • 28
sites
  • 21,417
  • 17
  • 87
  • 146
  • Have you tried using [Grunt](http://gruntjs.com/)/[Gulp](http://gulpjs.com/)? I have found [this question](http://stackoverflow.com/questions/23665993/gulp-js-livereload-with-express-server). You could do the same with grunt, but I prefer gulp as it has more understandable config. – Marko Gresak Jul 15 '14 at 05:49
  • I would prefer something configurable that works with default configuration. – sites Jul 16 '14 at 01:50
  • Does this answer your question? [Node.js - Auto Refresh In Dev](https://stackoverflow.com/questions/35771931/node-js-auto-refresh-in-dev) – pspi Mar 05 '20 at 10:33

4 Answers4

98

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
stellarchariot
  • 2,872
  • 1
  • 19
  • 28
  • 6
    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"` – Sam Soffes Jun 11 '17 at 04:10
  • 15
    But this restarts the server. – Filipe Nov 15 '17 at 13:21
  • 7
    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. – zero298 Dec 22 '17 at 03:33
  • 2
    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, @zero298 and Filipe: you are both technically correct in that Nodemon restarts the server though :) – stellarchariot Dec 23 '17 at 03:56
15

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
Atul
  • 3,778
  • 5
  • 47
  • 87
hoogw
  • 4,982
  • 1
  • 37
  • 33
6

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

pspi
  • 11,189
  • 1
  • 20
  • 18
3

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.

Stanley Ulili
  • 702
  • 5
  • 7
  • 2
    Brilliant! Works out of the box on v18.15.0 with no additional flags. Prints an "experimental feature" warning, but is working perfectly. – joemaller Mar 24 '23 at 02:37