How to Use BrowserSync for Faster Development

BrowserSync is an automation tool that makes web development faster. In the past we've automated a lot of actions like compilation of SASS files, image compression etc. BrowserSync brings a whole new type of automation to the table with batteries included.

BrowserSync makes your tweaking and testing faster by synchronizing file changes and interactions across many devices.

Table of Contents

Live reloading: This is probably the most important feature of BrowserSync. change your code and the page is auto-reloaded. Live reloading works across many browsers and devices.

Interaction synchronization: It means that all your actions are mirrored across every browser. This little feature is useful for testing, especially, when testing across many devices. You can also customize what actions are mirrored across browsers.

Simulate slower connections: I believe you are expecting users from all over the world, and some countries are not fortunate enough to have fast internet connection; BrowserSync has a feature that you can use to throttle your website connection speed.

URL history:BrowserSync logs all browsing history so you can push a test URL to all devices.

Extra:BrowserSync is compatible with many task runners like GULP and Grunt. And they work across many operating systems.

First off, BrowserSync creates a small server, but if you already have a server setup, BrowserSync can hook into that server and act as a proxy. Next, it injects a javascript file on every page; This file makes use of WebSockets to communicate between the server and the client to watch changes to your code or browser action. As soon as BrowserSync detects an action it performs a page reload.

First we will use BrowserSync with static files. Assuming you have a directory structure like:

And from the root of your project directory run the following command

browser-sync start --server --files "*.html, css/*.css"

This instructs BrowserSync to watch all HTML and CSS files. Once you run the command, a browser window opens in the default browser serving the directories root file, in this case index.html. In the console of the running BrowserSync start command, you should see the following result.

Local: represents the address on your local machine with which you can view the project.

External: represents the address that any user on you local network(LAN or wifi) can view the project.

At the time of writing this article, the above image showed what the current BrowserSync UI looked like. This then begs the question "What is BrowserSync UI?"

BrowserSync UI gives you a bird's eyeview of all BrowserSync options, it shows you all sync options, history, and it lets you configure BrowserSync. To access the UI, just visit the address referenced on your terminal as UI. In my case it is localhost:3001.