GT's Blog

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:

BrowserSync local server proxy configuration

Integrate BrowserSync - with existing local server :

In this example, I will show how we can configure BrowserSync - Grunt task with you existing existing webapp that is running on a local server.

If you want to know the details on

how to configure the BrowserSync and Watch tasks on Grunt, Please visit my previous post :

BrowserSync Grunt configuration - Multi browswer Live Reload

Pros and Cons of BrowserSync with LiveReload

BrowserSync vs LiveReload productivity boosters comparison

The configuration is simple : You just need to let the browserSync to know URL of your local server.

options: {
         proxy: "local.server-URL"
       }

The final Gruntfile.js file : (full configuration is already described on my earlier blog post
BrowserSync Grunt configuration - Multi browswer Live Reload )

   
module.exports = function(grunt) {
  // Task configuration will go here
  grunt.initConfig({
   watch: {
  
      },
   browserSync: {
       bsFiles: {
         src: [
           "css/*.css", "js/.js", "./*.html" //search file/folders
         ]
       },
       options: {
         proxy: "local.server-URL" // NEEDS TO BE CONFIGURED
       }
   }
  });
  
  
  // Load tasks dependencies
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');
  
  // Setup default task
  // both browserSync and watch will run when running >grunt command
  grunt.registerTask('default', ['browserSync', 'watch']);

};

BrowserSync Grunt configuration - Multi browswer Live Reload

How to configure BrowserSync's Live Reload feature with Grunt tasks :

BrowserSync is capable of live reloading and syncing the changes across all your test browsers. This will launch a mini web server by using your current working directory as the base, watch your files for changes & auto-inject those changes into all connected browsers.

See my earlier blog post for the pros/cons of BrowserSync over LiveReload.

In this tutorial, I will demonstrate how to configure the BrowserSync with Grunt tasks "grunt-contrib-watch" and "grunt-browser-sync" in a basic web page setup. You can easily configure your bigger projects on you follow the following steps:

Setup Steps:

The link to github project is given at the end of this article.

1) Web App/Site setup :

I've a basic web site with the following files / directories in my working folder:

index.html
css/
main.css
js/
app.js

Read Rest of this Article...