Live Browser Updates


Introduction

Editing an HTML document frequently involves typing the code in an editor, saving and publishing it to a website and then refreshing your browser to see the latest updates. While really not particularly onerous, doing these steps save-after-save does get tedious.

Here is a simpler approach using a JavaScript package called browser-sync that can push your changes through a web server running on localhost and automatically refreshing your browser. Thanks and a tip of the hat to Wes Bos for his on-line CSS Grid tutorial where he has a whole video chapter devoted to recommended editors, browsers and other tools and related setups. He are also discusses these and more on his website: https://wesbos.com/uses/.

So, how do you implement live updates?

First, we will do some software installs:

  1. Install Node.js – https://nodejs.org/en/download/
  2. Use the Node.js Package Manager (npm) to install browser-sync
  3. > npm install -g browser-sync

    Lots more browser-sync information here: https://browsersync.io/

  4. Add a file named package.json to the root of your project containing the following:
  5. 
      {
        "name": "project name",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "start": "run-script-os",
          "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
          "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "browser-sync": "^2.18.13",
        "run-script-os": "^1.0.2"
        }
      }
    

    When you get node.js running (below), this tells browser-sync to run a server on localhost and to pass updates on html, css and js files to your browser (in this example, Firefox Developer Edition). See browser-sync’s website for more details.

  6. Install npm in your project root:
  7. 
      > npm i
    
  8. Finally, you can periodically update npm:
  9. 
      > sudo npm install -g npm
    

Now get it all running

When you are ready for a coding session, get this running by the following:

  1. Start your browser (Firefox Developer Edition, per the above)
  2. Start your editor (I’m using Atom Editor). Open the file to be edited.
  3. In terminal:
  4. 
        > cd /your/project   # package.json file created above lives here.
        > npm start          # this performs the commands in package.json
        

    Terminal will now show browser-sync running. Your browser will show the project root directory, so click on the file being edited.

  5. Edit the file. Each time you save, browser-sync will detect the change and refresh your browser with the change.
  6. One caveat: your html file must have enclosing BODY tags, since:
  7.     "Browsersync works by injecting an asynchronous script tag right after the body tag during initial request.
        In order for this to work properly the body tag must be present."
        ==> (https://www.npmjs.com/package/browser-sync>
      

You can play around with window layouts, but a simple, side-by-side browser/editor layout works well for me. Of course multiple monitors can help, too .

==Ollie