Scaffolding a new project

The first thing you're going to need to do is scaffold the project. "What's scaffolding?", I hear you ask. Good question. It's essentially the same as using a boilerplate to get your project off the grounds.

We need a blank project which has our tooling and libraries installed. A list of the things we'll use is below, with a tiny description about what they do. We'll talk about the important ones below the list:

Builders & JS:

  • webpack: module bundler
  • babel: transpiles ES7 to ES2015
  • eslint: keeps our ES standards in check
  • esdoc: generates JS documentation and ensures we comment properly




Let's walk through some basic setup so you understand how to put this together.

A heads up, though: the entire setup is available for you to clone via git clone You can see the project here: Cheat all you want by cloning this — I think laziness and speed are great when programming.

Step 1: Webpack

What is webpack?

Webpack is a module bundler that glues together all our other tools. It does the following:

  • Combines separate JS files into one single bundle (with all dependencies loaded)
  • Uses plugins (such as babel) to preprocess files
  • Uses plugins (such as uglify) to postprocess files for minifications
  • Adds sourcemaps for debugging during development
  • Configures environment variables within your JS app

It's a great tool and, as you might expect, has a lot of features and configuration options. Pete Hunt put together a great webpack guide here: It covers a lot of webpack's advanced features which you should use in your app, though it'd be futile to copy/paste here. Definitely check that howto out if you want to learn more.

Setting up webpack

Webpack's configration is handled by a webpack.config.js file. We're going to make two: one for development and one for production. They're going to share common configuration which will be extended with changes between prod and dev (such as minification).