Why you should use BrowserSync

Mitchel Kuijpers

Mitchel Kuijpers

Published: 10 April, 2014

We use Grunt with LiveReload and it is a serious productivity booster having your browser reload when you change some css or javascript, especially since we have pretty big screens. LiveReload is pretty easy to configure but it is always a bit of hassle, you have to include a little html snippet in your body or install a browser plugin which connects to the socket and then livereloads.

Today I found a new competitor for livereload, it's called BrowserSync. BrowserSync is also capable of live reloading your website, but it's not constrained to one browser or even one device!

In the demonstration video below, I'm changing the background color of one of our websites. You can't really see me typing because of the video quality, but you'll just have to take my word for it. The devices you see below are a Macbook (with external screen) an iPad 2 and a Motorola Moto G.

But BrowserSync does a lot more than just reloading. The coolest thing it does is synchronising between multiple browsers (and platforms). In the video below I'm scrolling through the website on my Macbook. You can see that the iPad and Smartphone scroll with me, even though the website is displayed differently because it's responsive.

But that's not all. Buttons, toggles, complete forms and javascript will be synced across all browsers. Let's give it a try!
(make sure you have node installed)

First install BrowserSync by executing :

$ npm install -g browser-sync

We will try it out on this website. Start BrowserSync by executing:

$ browser-sync start --proxy blog.avisi.nl

It should give you something like this:

<code>[BS] Proxy running. Use this URL: http://172.31.1.32:3006</code>

Now make sure you have mobile device or a tablet in the same network and open this url in your browser and on your mobile. If you start scrolling on your desktop the other device wil also scroll. You can click around in the blog if you open a post and go to the comments section and start filing in a comment the devices will sync.

Did you enjoy reading?

Share this blog with your audience!