Professional Development

Quick Setup: Browser-Sync

Browser-Sync is a package that allows you to see changes to your website in real-time in the browser on save. This quick tutorial will tell you how to set it up. It’s easy!

The first thing you’ll need is npm (node package manager), which is included with Node.js. Get it free for Windows here.

Next, create a package.json file in your working directory. The contents of the file are something like:

{
  "name": "my 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 (x86)\\Mozilla Firefox\\firefox.exe\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "run-script-os": "^1.0.2"
  }
}

Be sure the path to your browser is correct:

--browser \"C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe\""

(the double backslashes are escaped backslashes so equal one backslash at runtime.)

Save that file to your working directory:

1

Add your development files, e.g.:

2

Now you’ll want to install npm in your working folder. To do this you’ll need some command-line interface (CLI). In Windows you can use the command prompt (cmd). I like PowerShell. In your CLI, navigate to your folder and execute npm i (short for npm install):

3

npm will do a bunch of stuff, and then your working folder will look something like:

4

From the CLI again, type npm start to start a Browser-Sync session:

5

The configured browser will automatically open with a directory like:

6

Now you can work with your files using your favorite IDE and see updated results in the browser every time you hit save, without having to refresh:

7

Cool right?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s