Appendix B - Browserify-based environment

When I first wrote this book in the spring of 2015, I came up with a build-and-run system based on Grunt and Browserify. I also suggested using Bower for client-side dependencies.

I now consider that to have been a mistake, and I think Webpack is a much better option. I also suggest using one of the numerous boilerplate projects to get started quickly.

I’m leaving the old chapter here as a curiosity, and to help those stuck in legacy systems. With a bit of tweaking, you can use Grunt with Webpack, and Webpack can support Bower as a package manager.

NPM for server-side tools

NPM is node.js’s default package manager. Originally developed as a dependency management tool for node.js projects, it’s since taken hold of the JavaScript world as a way to manage the toolbelt.

We’ll use NPM to install the other tools we need.

You can get it by installing node.js from nodejs.org. Grunt, Bower, and our development server will run in node as well.

Once you’ve got it, create a working directory, navigate to it, and run:

This will ask you a few questions and create package.json file. It contains some meta data about the project, and more importantly, it has the list of dependencies. This is useful when you return to a project months or years later and can’t remember how to get it running.

It’s also great if you want to share the code with others.

And remember, the stub project included with the book already has all of this set up.

The development server

Production servers are beyond the scope of this book, but we do need a server running locally. You could work on a static website without one, but we’re loading data into the visualization dynamically and that makes browser security models panic.

We’re going to use live-server, which is a great static server written in JavaScript. Its biggest advantage is that the page refreshes ...