web:build:browser-sync

About

Browser Sync ¹⁾ 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:

for the builtin web server of browser-sync
but also for a third party server (serving dynamically created page by another language such as php, java,…)

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.

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:

You have already a amp server (Apache, Mysql, Php) running at http:localhost:81 and you want to reload the page when a css, php or js file is changed

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

Then when going to http://localhost:3000 when a file change, you see in the log:

[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": "member.eraldy.dev",
  "open": "external"
}

Documentation / Reference

¹⁾

http://www.browsersync.io/

Table of Contents

Browsersync.io