Tutorial – How to use Livereload with Nodemon in Gulp to Automatically Reload your Browser and Restart your App

Task runnersare a wonderful thing to have once they are operational . But sometimes they might not be so easy to set up. In this post I want to focus on using two plugins that really speed up your workflow when developing both on the back end and the front end. I will be using a basic Node(Express) example to show case.
Livereload is a tool that automatically reloads the browser when there are changes in specific files. You need to use chrome or chromium and the extension for it to work.

Nodemon is a tool that automatically runs and restarts your appwhen there are changes in specific files. Note the difference with livereload: nodemon will restart the app, not reload the browser. This means you dont have to go to the terminal and stop your node app with CTRL+C and then restart it anymore.

What you can achieve here is that whenever there is a change in the back end, the app will restart, and then the browser will reload. Saving you a lot of time when you consider how many times you have to restart the app and reload the browser when you are developing. Additionally you don’t need two separate terminals running anymore (one for the task runner and the other for running the app), because nodemon runs the app as well.

For those of you who just directly want to see the code can take a look at the example in github.

Now for those that want to see how to do it step by step with more explanation:

Step 1: Initial Set-up and Downloading Dependencies

go ahead and do a npm init in the terminal to start off the project and fill in whatever you want.

After that paste in the following command to the terminal at the root of the project:

npm install --save-dev gulp gulp-livereload gulp-notify gulp-nodemon express

This will install and save the dependencies needed.

Step 2: The Server Side

Create a file in the root directory called “app.js” and write the following code:

var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
  res.send('Homepage!');
});
 
var server = app.listen(3000, function () {
 
  var host = server.address().address;
  var port = server.address().port;
 
  console.log('Example app listening at http://%s:%s', host, port);
 
});

This creates a simple express server. To run and test your server, typenode app.js in the terminal. Now head over to “localhost:3000” in your browser and you should see ‘Homepage!’.

Step 3: The Gulp File

Now create a file in the root directroy called “gulpfile.js”. The gulp file is where you define what tasks you want to automate.

Write the following code on the gulpfile:

// Dependencies
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var notify = require('gulp-notify');
var livereload = require('gulp-livereload');
 
// Task
gulp.task('default', function() {
// listen for changes
livereload.listen();
// configure nodemon
nodemon({
// the script to run the app
script: 'app.js',
ext: 'js'
}).on('restart', function(){
// when the app has restarted, run livereload.
gulp.src('app.js')
.pipe(livereload())
.pipe(notify('Reloading page, please wait...'));
})
})

What we are doing in the gulp file is first of all grabbing the dependencies we downloaded in step 1. We then proceed with defining a gulp task called default. which can be called in the terminal with gulpInside this task we listen for changes with livereload.listen() and then configure our nodemon. You can see im using the ‘restart’ callback to append the livereload method. So the browser will only reload when the app has done restarting.

Note: If the task was named something other than ‘default’, you have to implicitly state that in the terminal, e.g. having a task foo will require you to type gulp foo in the terminal.

Now if you still have your app running from step 2 go ahead and end it with CTRL+C in the terminal.

In the terminal now simply type gulp this will run the default task we provided in the gulpfile. You should see gulp printing out messages in the console telling you it’s starting the task.

Go to your browser and enable the livereload plugin and you are all set for development. Try changing the res.send(‘Homepage!’); to something like res.send(‘Hello!’);. Once you save the file, you should see the terminal output some messages from nodemon notifying that the app is restarting. Your browser will say that the website is offline, dont mind that, after 1-2 seconds the app should start again and the browser will reload with the changes.

Sometimes the browser wont restart, try saving the file again (CTRL+S).

Conclusion

I have shown you how to successfully setup a livereload + nodemon gulpfile. Now I personally wouldn’t use this for when you are doing front end work for these reasons:

Waiting for the app to restart and the browser to reload takes like 3-4 seconds in total for me. When I’m working on little front end details, making small changes and saving + reloading to see them on the browser, 3-4 seconds is too long.
You don’t need the app to restart when there are changes on the front end.

Now if you are using this for when you are working on the back end then it’s of course a good setup. In the end you can just have this be a ‘backend’ task and do a gulp backend and have a separate setup for when you switch to front end work.

If you liked what you read, consider subscribing to my blog in order to get notified whenever I publish another article. No spam!