Automatic Browser Reloading

In this screencast tutorial you’ll learn about browser reloading–specifically automatic reloading–and we’ll consider three different methods for doing so. Let’s begin!

3 Methods for Automatic Browser Reloading

Watch Screencast

Let’s consider a typical front-end workflow: you have your code editor, perhaps you’re writing some HTML, then you have CSS which might involve Sass, and you have your browser for testing. Each time you make a change to your code you go back to your browser, hit refresh, and see your changes take effect.

It may seem like a quick procedure, but add this refreshing action up over time and you’ll find it quite wasteful. It can certainly be improved. Let’s look at three tools which can take care of the whole refresh process for you, automatically.

LiveReload

LiveReload has been around for quite a while, and it’s a great tool. It comes with apps for Mac OS and Windows, and costs (at time of writing) $9.99.

Get things going by inserting a JavaScript snippet in the files you’re working on, or use it in combination with the browser extension. If you’re using a browser extension, you may need to enter the extension settings to ensure that allow access to files is turned on.

3 Methods for Automatic Browser Reloading

Useful Links

Grunt Watch

If you’re comfortable using the command line I highly recommend taking a look at this option. Grunt is a JavaScript-based task runner, and you can use it to automate many of the tasks you’d normally take care of manually–including browser refreshing.

We’re going to use the Grunt Watch plugin (actually named ”grunt-contrib-watch“) which you’ll need to load via NPM.

The watch task within our gruntfile.js includes the livereload: true option, and watches all files in my project.

watch: {
    
    files: ['*.*'],
    options: {
        livereload: true
    }

}

Again, I need the LiveReload extension in my browser to be turned on, and everything works just like before, with the added benefit of being able to run additional tasks.

Grunt Resources

Browsersync

Method number three, which is rapidly becoming my favorite, is Browsersync. Browsersync is so much more than just the utility for reloading a web page; it also allows you to perform synchronized browser testing.

To get things up and running you’ll need Node.js, so begin by installing that. For details on how to get that going, check out The Command Line for Web Design: Taming 3rd Party Packages. With Node installed, install Browsersync with the following npm (Node Package Manager) command:

npm install g- browser-sync

To use BrowserSync we need to use another command, and this will change depending on exactly what we want to do. For example, this command will setup the static server environment, and suggest that Browsersync watches all files to refresh:

browser-sync start --server --files "*.*"

For more details on the various commands you can use, check out the documentation.

3 Methods for Automatic Browser Reloading

Useful Links

Conclusion

That’s it! I hope this tutorial has convinced you to stop wasting time and try at least one of these browser refresh methods. If you have any other methods you prefer, let us know in the comments!