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
- 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
- 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
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 firstname.lastname@example.org: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).