3

Following this great article on how to use npm as a build tool, I would like to implement it when building a nodejs express web app. My node app is created on port 8080, this is a simplified version of my server.js file:

var env = process.env.NODE_ENV

var path = require('path');
var express = require('express');
var logger = require('morgan');

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

var app = express();

app.set('port', process.env.PORT || 8080);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.engine('jade', require('jade').__express)

var Oneday = 86400000;
app.use(express.static(__dirname + '/www', {
    maxAge: env == 'development' ? 0 : Oneday
}));

app.use(logger('dev'));

app.use(express.static(path.join(__dirname, '/public'), {
    maxAge: env == 'development' ? 0 : Oneday
}))

if (env == 'development') {
    // var liveReloadPort = 9091;
    app.use(require('connect-livereload')({
        port: 8080
        // src: "js/"
            // port: liveReloadPort
    }));
}

routes.blog(app);
routes.frontend(app, passport);

app.use(function(err, req, res, next) {
    console.log(err.stack);
    res.status(500).send({
        message: err.message
    })
});

app.listen(app.get('port'));
console.log('Server starting on port: ' + app.get('port'));

The file that I'm watching before needing to reload is in www/js. I am using npm as a build tool and before launching server.js with npm I launch a separate process that does watchify source/js/app.js -v -o wwww/js/bundle.js I did checked that watchify works correctly, updating as I save my files. But there is no livereload once a file is changed. The error I get in the console is: Uncaught SyntaxError: Unexpected token < and I can see that connect-livereload inserted this script in the html:

<script>
//<![CDATA[
document.write('<script src="//' + (location.hostname || 'localhost') + ':8080/livereload.js?snipver=1"><\/script>')
//]]>
</script>
<script src="//localhost:8080/livereload.js?snipver=1"> </script>

I tried also to use live-reload as mentionned in the original article but without success and I am not sure it's the right plugin to use as live-reload launches a server, when I already start one with express. Any ideas?

Bondifrench
  • 1,272
  • 1
  • 20
  • 35
  • 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:35

2 Answers2

3

connect-livereload only inserts the script into the html (so that you don't need a browser plugin).

you still need a separate livereload server, try node-livereload, grunt-contrib-connect or grunt-contrib-watch ... since you want to use npm as build tool, the first one should be recommendable.

then you would have to change the livereload port to the running live-reload server port (default port is 35729):

  app.use(require('connect-livereload')({
    port: 35729
  }));

The server you tried: live-reload should work as well.

Can you try and start it with:

live-reload [<path>...] --port=35729 --delay=someDelay

and change the connect-livereload option to:

  app.use(require('connect-livereload')({
    src: "localhost:35729"
  }));
andineck
  • 46
  • 2
  • Thank you. You lead me to the solution. What resolved it is starting with `live-reload --port 9091 www/js/` and the same port I am indicating here is the one I use in connect-livereload `app.use(require('connect-livereload')({ port: 9091 }));` – Bondifrench Jun 24 '15 at 11:55
  • @Bondifrench glad it helped. – andineck Jun 24 '15 at 12:51
1

This answer shows how to set up livereload to refresh changes to both front and backend files to browser. It might be of help to you. https://stackoverflow.com/a/60542132/5032692

pspi
  • 11,189
  • 1
  • 20
  • 18