I have been working with different local servers just to replace the hassle of live servers for your web app or web design testing but I got stucked with browser-sync because of it's complete package. You get a 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.
In one of the attached 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 installation can be seen in their documentation https://www.browsersync.io/docs.
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 get browser-sync installed on your machine.
After that, change directory to where your project file is located. Looking at the image below, the project file is located on my Desktop. So, I do "cd Desktop/restaurant" this take me to the Desktop and inside the project file folder.
Next thing is to do $ browser-sync start --server --directory --files "*"
The above command calls for browser-sync and request for a server start, then the --directory --files tells 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 look closer to the image I used "/*" after the command, reason is: after using the first command and you switch of your machine or close the terminal, working environment and all. To get a complete sync and watch over your files, you have to use "/*" in your concurrent command.
watching over your files. Notice each URL has both internal and external URLs.
After the command, it will get you to this place… see image below
This is the interface that pops up after the previous command.Click on index.html to see your project.
After that, as you are saving your code, automatically it refresh the browser.
Thanks for Reading, I hope my article helps you on your project.
Top comments (0)