How browserSync actually works ?

How BrowserSync actually works ?


BrowserSync starts a small Node.js server which injects a script ( as below) into the webpage that it's monitoring.The script makes use of WebSockets to communicate between server and client to watch for changes to the code or browser actions. As soon as BrowserSync detects an action ( either in one browser or a server code) it performs a page reload.


<body>
<script id="__bs_script__">
//<![CDATA[

    document.write("<script async src='/browser-sync/browser-sync-client.2.11.2.js'> <\/script>".replace("HOST", location.hostname));
   
//]]>
</script>
...
...


If you’re already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. See how to do this.

Articles related to BrowserSync /Grunt configuration: