How to Setup Browsersync for Web Development in Ubuntu?

BrowserSync is an automation tool which is used extensively in web development. This tool makes our testing and tweaking faster by synchronizing file changes and interactions across many devices.

Features of BrowserSync.
1. Live reloading
2. Interaction synchronization
3. Simulate slower connections
4. URL history
5. Compatible with task runners like GULP and Grunt
6. Work across many operating systems

Working of BrowserSync

If you lack a server setup, BrowserSync creates a small server. Otherwise, it can hook into your server and act as a proxy. After that, it adds a javascript file on each of the pages. This file uses WebSockets to establish a communication between the client and server to watch changes to your code or browser action. And as soon as an action is detected by browsersync it reloads the page.

Installing BrowserSync

BrowserSync is an npm package hence you have to make sure that Node.js is installed. To install BrowserSync, just open the terminal and execute the following command.

sudo npm install -g browser-sync

To check if BrowserSync is installed, enter the following command.

browser-sync --version

Using BrowserSync

Go to the root of your project directory run the following command.

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

After the execution of the command, it triggers the default browser serving the directories root file.