Livereload for SailsJS

If you've ever worked with Livereload you probably don't want to miss it anymore - autoreloading your projects during development is just great. Since I'm playing around with the SailsJS framework for the last months, I also wanted my SailsJS applications to be autoreloaded on changes. Luckily, that's pretty easy to do.

Implementing the feature

First of all install the sails-hook-autoreload package to your existing SailsJS application via npm:

npm install sails-hook-autoreload --save

This package allows you to change controllers, models and locals without restarting your SailsJS app. There's no need for any further configuration, since the hook is automatically loaded by Sails.

Now you can change your controllers, models and locals and just need to refresh the page to see the changes (instead of restarting your application). But, as said before, we want to get rid of this "refresh button spam" - therefore we need a minor addition in tasks/config/watch.js:

      grunt.config.set('watch', {
		api: {

			// API files to watch:
			files: ['api/**/*', '!**/node_modules/**']
		},
		assets: {

			// Assets to watch:
			files: ['assets/**/*', 'tasks/pipeline.js', '!**/node_modules/**'],

			// When assets are changed:
			tasks: ['syncAssets' , 'linkAssets']
		},
		views: {
			files: ['views/**/*']
		},
		options: {
			livereload: true
		}
	});

Basically we just added a target to watch the view files and enabled livereload. That's it. Now every time you change a controllers, model, local or view your browser is automatically reloaded.

Note: If you've never worked with LiveReload before, don't forget to install LiveReload browser plugin (e.g. for Chrome).