How to run Browser-Sync

Photo by Fotis Fotopoulos on Unsplash

I have been working with different local servers to replace the hassle of live servers for your web app or web design testing, but I got stuck with browser-sync because of its complete package. You get time-saving, synchronized browser testing.

Awesomely fast and with incredible features for your use. Browser-sync allows you to also check your work preview simultaneously on different device with a provided external url. Also, it can serve as a host for your platform.

Internal UI interface

In the above image, you’d see different features, these are the awesome things browser-sync provides you. Install on your machine and enjoy seamless watch over your files. It also records your test URLs so you can push them back out to all devices with a single click.

I will give the steps to install browser-sync for Linux. Other OS installations can be seen in their documentation.

For Linux

Install Node.js on your machine, then follow the following steps:

npm install -g browser-sync //this is for global installation

The above command gets browser-sync installed on your machine.

After that, change the directory to where your project file is located. Looking at the image below, the project file is located on my Desktop. So, I’ll run cd Desktop/restaurant this takes me to the desktop directory and inside the restaurant project folder.

The next thing is to runbrowser-sync start --server --directory --files "*"

The above command calls for browser-sync and requests for a server start, then --directory --filestells the server to watch over the files in the directory.

Including the* means, watch over any changes in all files.

You can specify which files to watch for.

If you check the image below, I used**/* after the command. This gives you a complete sync and watch over your files.

watching over your files

Notice each url has both internal and external urls. The power of Browser-sync

After the command, it will get you to this place… image below

This is the interface that pops up after the previous command.

Click onindex.html to see your project.

After that, as you are saving your code, it automatically refreshes the browser.

Thanks for reading. I hope my article helps you with your project.