Shotgun Episode 4

Shotgun Episode 4

In this episode, it’s time to see how our component renders in a real browser.

Getting Started

If you haven’t cloned the app yet, do that first:

Make sure your local copy is up to date, and then check out the starting point for this episode:

I like to install browser-sync locally so that it gets installed with npm install:

Next, add the sync script above to your package.json file in the scripts section:

You’ll need both the watch script and browser-sync running at the same time. I run them in two separate terminal tabs. If your terminal doesn’t support tabs, you can run them in separate terminal windows.

Make a note of the external URL so you can browse to it on your mobile devices and experience how cool browser-sync really is. I highly recommend you do that. In another terminal:

Our watch script watches for changes and automatically rebuilds, which will trigger the browser-sync refresh.

You should be all set now to follow along and see how the changes effect things in the browser and the unit tests at the same time. Normally, I’ll run the browser and dev consoles on separate screens so I can easily see everything at once while I’m coding. Try it out with your workflow.

Commit Log

  • Add browser-sync
  • Fix “Continue” button