Refresh browser window whenever file changes are saved

A quick to configure auto-refreshing browser window whenever you save changes to files.

While working on a website containing HTML + CSS + core or vanilla JS, its quite tedious to every time refresh the page after saving changes to file. Many packages like React app, Gatsby, NextJS, Vue CLI, Svelte provides reloading the page when a file in the code editor is saved.

This is one of the best & most useful feature for developer, which saves your time and increases productivity.

Our search ended up with a npm package named browser-sync which reloads every time a file in the directory is saved, all the connected browsers will be reloaded.

Browsersync is an open-source project created and maintained by the front-end designers/developers at JH. Together with contributors from all over the world, we aim to make modern, multi-device web development faster & easier.

Install Node.js

Browsersync is a Node.js module so first you need to install it.

For Windows simply download the installer directly from the Node.js web site.

For Ubuntu execute below commands.

Node.js v12.x

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

For other OS visit https://nodejs.org/en/download/package-manager

Install Browsersync

The Browsersync is available with Node.js package manager (npm). It can be installed globally with below command in terminal window so they’re available to all your projects.

    npm install -g browser-sync

Running Browsersync

Browsersync will provide a URL to view your site by starting a mini-server.

Navigate your terminal window to a your project directory and run the appropriate command

For static sites

    browser-sync start --server --files "."

For dynamic sites

If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. Browsersync will wrap your vhost with a proxy URL to view your site.

To view your site you’ll need to use the proxy mode with your already running local server such as PHP or any other. Your vhost will be wrapped with a proxy URL by Browsersync.

    browser-sync start --proxy "meshworld.in" --files "."

Browsersync can be used to watch all files in the current directory (as well as sub-directories) for changes, and launches a web server on port 3000, opening a browser window to connect to the server.

Browser will be refresh with file changes