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/

  3. Add a file named package.json to the root of your project containing the following:
    4. 
  {
    "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.

  4. Install npm in your project root:
    5. 
  > npm i
  5. Finally, you can periodically update npm:
    6. 
  > 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.

  4. Edit the file. Each time you save, browser-sync will detect the change and refresh your browser with the change.
  5. One caveat: your html file must have enclosing BODY tags, since:
    6.     "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