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

CSS

• postcss: css preprocess manager with many awesome plugins
• postcss-nested: to write nested css as within sass
• postcss-browser-reporter: for reporting errors directly within your browser
• cssnext: css transpiling using future css syntax
• stylelint: for keeping our css standards in check
• cssnano: for minified, optimized production builds

Libraries

• react: ui and rendering library
• redux: state management
• immutable: keeping state immutable
• react-router: routing
• react-router-redux: storing state in redux
• react-css-modules: for applying css via css-modules to classes
• redux-form: to manage form state
• redux-ui: to manage component ui state

Setup

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 [email protected]:tonyhb/redux-boilerplate.git. You can see the project here: https://github.com/tonyhb/redux-boilerplate. 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: https://github.com/petehunt/webpack-howto. 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).

[TODO]