Browsersync.io

About

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 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.

Installation

  • 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

Example:

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

where:

  • 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
    External: http://172.23.220.49:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

where:

  • 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', '*');
              next();
            }
},
"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.

Example:

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
    External: http://10.0.75.1:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...

Documentation / Reference


Powered by ComboStrap