Today I Learned: Speeding Up Web Development with LiveReload

Or maybe compiling assets takes too long so that you have to wait a couple of seconds to see the result of a small change? If you answered yes to either of these questions - I’m sure that this tutorial is for you.

Have you ever been frustrated by needing to click “refresh” when working with your code? Or maybe compiling assets takes too long so that you have to wait a couple of seconds to see the result of a small change? If you answered yes to either of these questions - I’m sure that this tutorial is for you.

What is LiveReload?

LiveReload is an app introduced in 2012 by Andrey Tarantsov, in an attempt to make our lives easier and less frustrating. And guess what… It works! You probably want to know how, right?

What’s it all about?

To put it simply, LiveReload’s main function is to act as an automatic “refresh” button. Without going too deep into specifics - the basic concept is that we inject a little JS snippet into our page, which communicates with the LiveReload server. The server monitors our project files and when it detects any changes, it automatically notifies our client (browser). Based on type of the change, the page is reloaded (when editing template markup) or the code is live-injected into our app (it currently supports images and stylesheets - including preprocessors).

Where can I use it?

Everywhere. Seriously. LiveReload has a great support from developers and it works for almost every setup and framework including Rails, Ember, Angular, and React.It could even work as a standalone server. Of course, you can also write your own package if you want :) Sources are open, so feel free to contribute.

How can I use it?

Here’s how to use it with Rails (our main backend engine) and with Ember-CLI (our default SPA framework).

Setting up LiveReload with Rails

You have to edit your Gemfile to add LiveReload and its dependencies:

Then just run bundle. To make LiveReload work, you’ll also need one of the following - either the extension for your browser, or the rack-livereload gem which makes LiveReload work as a Rack module, which I believe is more efficient when working with Rails.

Almost done!

Simple, isn’t it? The final thing you have to do is to generate a default config. You can do this by simply typing guard init livereload in your project directory.

That will produce something like this in your Guardfile:

Feel free to adjust this config to your needs. For example, my base setup looks like this:

As you can see, I’m watching for changes in .scss files. This lets me use live injection when using Sass (which is pretty awesome by the way) - every change is immediately shown on the screen without refreshing the whole page and rebuilding every asset.

After setting up your config, run guard -p livereload in your project folder and voila! You’re done! Simple, isn’t it?

Setting up LiveReload with Ember-CLI

With Ember, things are even simpler. All you have to do is to add these 2 packages to your devDependencies in package.json and then use the proper extension for your browser:

What do these packages do?

ember-cli-inject-live-reload includes livereload.js in our app and ember-cli-styles-reloader makes CSS injection work (with preprocessors too).

Now, run npm install and you’re done!

That’s all folks!

Congratulations! You’ve just installed and launched LiveReload with live injection for your app!

For more solutions and technical details about LiveReload take a look at these websites:

LiveReload

gulp-livereload on GitHub

grunt-contrib-watch on GitHub

P.S. Hey, did you like this post? You can get more useful content like this, selected monthly, by signing up to our Ruby Brief. No fluff, no spam - promise!