Using Browsersync to refresh automatically

At this point, our application's page is pretty much empty. Before we go about adding some things to it, we'll present you with one more tool that'll be of use.

Browsersync (https://browsersync.io) is a very cool utility for web development. Using Browsersync, you'll get live reloading without much effort.

Live reloading simply means that the web page will get refreshed automatically whenever you modify the source code.

In brief, once Browsersync is installed, your workflow will be as follows:

• Start Browsersync through npm.
• Browsersync will start a web server serving your content, and once ready, it will open index.html in your default web browser.
• Modify index.html in VS Code (or using any other code editor).
• Immediately see the updated version in your web browser.

Installing Browsersync is very easy. Execute the following command to add it to the project and install it: npm install browser-sync --save-dev.

Again, we are using --save-dev since Browsersync is a tool and not a library that we will need in production.

Now that Browsersync is there, go ahead and add a new script to package.json:

"serve": "browser-sync start --server --watch" 

Execute it with npm run serve. Wait a bit and once the page is opened in your web browser, go ahead and change index.html.

Browsersync can actually do a whole lot more than this. If you want to find out a bit more about its capabilities, you can go to http://localhost:3001 and have a look at the control panel.