Main menu

You are here

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:
  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.

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   # this is where the package.json created above lives.
        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.

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

==Ollie

Drupal theme by pixeljets.com D7 ver.1.1