Browsersync.io
Table of Contents
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:
- for the builtin web server of browser-sync
- but also for a third party server (serving dynamic created page by another language such as php, java,…)
It can also serve as cross-browser testing tool.
Articles Related
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:
- 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...
Documentation / Reference
Recommended Pages
