Browsersync.io

> (World Wide) Web - (W3|WWW) > Web - Building and Shipping

1 - About

http://www.browsersync.io/ - 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 server as cross-browser testing tool.

Advertising

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

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

5 - Steps by Server Type

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

5.2 - Proxy a existing server

BrowserSync can act as a 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...
web/shipping/browser-sync.txt · Last modified: 2019/03/13 20:07 by gerardnico