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 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"
}