Express Nodemon and reload not reloading the browser

Question

I did a fresh install of express app. And my

package.json

{
  "name": "projects",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./app.js"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "morgan": "~1.9.0",
    "pug": "2.0.0-beta11",
    "serve-favicon": "~2.4.5"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "connect-browser-sync": "^2.1.0",
    "nodemon": "^1.12.5",
    "reload": "^2.2.2"
  }
}

app.js

var express = require('express');

var http = require('http');
var reload = require('reload');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();


app.set('port', process.env.PORT || 3000);

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


var server = http.createServer(app)

reload(app);
server.listen(app.get('port'), function () {
 console.log('Web server listening on port ' + app.get('port'))
});

module.exports = app;

I dont want to use gulp if reload does my job.

When i change the text welcome in index.pug, the chrome is not reloaded. If i refresh i could see the change.

How can i auto reload my page on changes in any of the folder.

Note: nodemon is working fine.Again it doesn't reload the browser.

Answer 1

Reaload plugin reloads the page only if the express server is restarted by nodemon. From the docs:

When you restart the server, the client will detect the server being restarted and automatically refresh the page.

Nodemon does not watch Pug templates, so it's not restarted on template change:

By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions.

You can set .pug extension to be monitored by nodemon. But I think it will lead to unnecessary server restarts because Pug templates seem to be evaluated at runtime when the request for the page is happening.

Don't also forget to add reload script to all your pages by modifying the main layout template:

doctype html
  html
  head
    ...
  body
    block content
    script(src='/reload/reload.js')

Answer 2

To achieve that, you need install Livereload to work together with Nodemon. A simple Express APP with necessary changes, it would be like this:

Complete step by step explained

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
var livereload = require("livereload");
var connectLiveReload = require("connect-livereload");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");

const liveReloadServer = livereload.createServer();
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

var app = express();

app.use(connectLiveReload());

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "hbs");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;