LiveReload on Node.js

What it is?

LiveReload is a utility that allows you to automatically reload the page in the browser when changing its code and resources (html, css, js, images, etc) on the server. In addition, LiveReload allows you to apply changes in CSS and JavaScript without reloading the page.

Why do you need it?

For the convenience of developing the client side of the application and no more. As written on the official utility page:

The Web Developer Wonderland (a happy land where browsers don't need a Refresh button)

How it works?

The principle is very simple, the utility consists of a server and a client:

1. Server: WebSocket which monitors changes in the specified files and if such changes are detected - notify the client
2. Client, there are several options:
   
   • Add-on for the browser that updates the page.
   • JavaScript snippet that listens to the WebSocket server and, if necessary, refreshes the page. It must be inserted into your HTML files.
   
   

')

Node.js, huh?

If you are already using Node.js or Grunt.js, or you want one LiveReload method to work on all platforms without changes (LiveReload can be configured on Windows and Linux and MacOS X, but the configuration method is different everywhere) then you can use grunt-reload.
So, here is what you need:

1. Node.js. On Ubunt, for example, we put it this way:
   

   sudo apt-get install nodejs npm 

   
   
2. Grunt.js
   

     sudo npm install -g grunt 

   
   
3. Grunt plugin grunt-reload
   

     npm install grunt-reload --save-dev 

   
   

The grunt-reload plugin, besides the two already mentioned livereload methods, has a couple more options:

1. Proxy: creates a server that will proxy requests to dev. server adding to HTML files livereload snippet. Eliminates the need to manually update html'ki to support livereload.
2. iFrame: is identical to the previous method, but instead of automatically adding a snippet, opens pages in iFrame, which reloads them if necessary. And your html'ki remain clean !;)

Unfortunately, grunt-reload does not support the use of CSS and JS without reloading the entire page. It supports it more precisely, but only with the use of the LiveReload browser extension.

How to use

We create the project, we create grunt.js in the root and in it we set up the watch task (it will monitor changes in the files) and the reload task (if we change the files, we do a livereload).

For example, we have the following express.js project:
/ public - static (CSS, images, JS, templates, etc)
app.js - express.js application
grunt.js - Gruntfile

grunt.js looks like this:

 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-bg-shell'); //  grunt-reload grunt.loadNpmTasks('grunt-reload'); // Project configuration. grunt.initConfig({ bgShell: { //    supervisor'a //     //   supervisor: { cmd: 'supervisor app.js', stdout: true, stderr: true, bg: true } }, // reload //    localhost:3000 //  localhost:6001        LiveReload reload: { port: 6001, proxy: { host: 'localhost', port: 3000 }, }, watch: { //        'reload' files: [ //add here static file which need to be livereloaded 'public/styles/**/*.css', 'public/scripts/**/*.js', 'public/images/**/*', ], tasks: 'reload' } }); //  //reload       grunt.registerTask('server', 'bgShell:supervisor reload watch'); }; 

Now from the root directory of the application, you can run the command

 grunt server 

And get automatically restarted server and LiveReload on the client at localhost : 6001

This Gruntfile also uses the supervisor package (to monitor the server), and the grunt-bg-shell package to run the supervisor in the background.

  sudo npm install -g supervisor npm install grunt-bg-shell --save-dev