Browser Sync 1) serves the content, detects changes, refreshes the browser, and offers many customization's.

How to use it to develop with live reloading.

The reload will work:

It can also serve as cross-browser testing tool.

The magic

Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during the initial request. In order for this to work properly the <body> tag must be present.

This added script uses WebSockets to be able to refresh the page on file change.


  • Install node (if not already present)
  • Install Browsersync globally. It could also have been installed locally inside your project.
npm install -g browser-sync
# or
yarn global add browser-sync

Init / Configuration

browser-sync init
Config file created bs-config.js
To use it, in the same directory run: browser-sync start --config bs-config.js


module.exports = {
    "ui": {
        "port": 3001
    "files":    ["test/public/*", "src/browser/*"],
    "server": ["test/public","src/browser","output"],


  • files are the files watched that trigger a reload
  • server are the directory served (ie the directories test/public,src/browser and output will all be accessible as the root http://localhost:3001

Steps by Server Type

Builtin Static Web Server

  • Serve the page of the current directory.
cd yourProjectDirectory
browser-sync start --server --files "*.html, css/*.css, js/*.js"
[Browsersync] Access URLs:
       Local: http://localhost:3000
          UI: http://localhost:3001
 UI External: http://localhost:3001
[Browsersync] Serving files from: ./
[Browsersync] Watching files...


  • Local is the local address
  • External is the external address (accessible from another computer)
  • UI to see the options and configure BrowserSync

Then when a file change, you see in the log:

[Browsersync] Reloading Browsers...

Enable cors

When using a configuration file, you can enable cors with the below server configuration

"server": {
        baseDir: ["src/main/html"],
        middleware: function (req, res, next) {
              res.setHeader('Access-Control-Allow-Origin', '*');
"cors": true

Proxy a existing server

BrowserSync can act as a gateway proxy to an existing server (ie serving php, java, python or any other dynamic pages)

The proxy option points to the server you want to make a proxy.


browser-sync start -p http://localhost:81/  --files "*.css, syntax/*.php, *.js" --ws --no-inject-changes
[Browsersync] Proxying: http://localhost:81
[Browsersync] Access URLs:
       Local: http://localhost:3000
          UI: http://localhost:3001
 UI External: http://localhost:3001
[Browsersync] Watching files...

[Browsersync] Reloading Browsers...

If you want to add SSL without warning, you need to add the key and certificate via a configuration file. Example:

  "https": {
    "key": "D:\\cert\\key.pem",
    "cert": "D:\\cert\\cert.pem"
  "proxy": "https://localhost:5175",
  "host": "",
  "open": "external"

Documentation / Reference

Discover More
Cognito Js Auth App Client Settings
Cognito - Js Auth Sdk

This page is the Cognito Javascript Auth SDK (Amazon Cognito Auth SDK) It leverages the built-in hosted UI webpages: , , , multi-factor authentication...
Cross-Browser Testing tool

All cross-browser testing tool are web driver based. See the webdriver for more information. You can also open multiple browsers (desktop, mobile for responsive design) and see your change live thanks...
Admanager Homepage
Google Ad Manager - Getting started - How to show your first ad

A page on how to start with Google Ad Manager for a publisher. Got to Ad Manager Create an account if you don't have one (You need to have at minimal an adsense...
HTTP - Gateway (Reverse Proxy)

A reverse proxy (or gateway) is a proxy that is configured to appear to the client just like an ordinary web server. Traffic from the internet at large enters system through reverse proxy, which then...
Node - Web Server

in Node. With http.createServer with npm
Web - (Hot|Live) (Edit|Reload) - Auto File Sync

Live reloading (ie File sync) in the web means that the Browser automatically update/refresh the HTML page when you change files in your project (HTML, CSS, images, ...) Reload the page at interval:...

Share this page:
Follow us:
Task Runner