Fearless startup of a React-Redux project

Lets get a look at a “minimal” Redux boilerplate package.json file and count the dependencies.

There are 32 (thirty two!) dependencies! Is this boilerplate really minimal? Of course not!

This is the minimal one with only 5 dependencies:

Will those dependencies be enough for you? Most likely not, you’ll need more of them.

Why don’t just use create-react-app? Why bother with building your own project? To have control and to understand
how things work. Create-react-app is a great tool, and it does really simplify our life.
But if you’re reading this post, you probably want to build things yourself.

So, what is the key to a fearless project startup? It’s simple β€” just layout what you really want!
Let’s list what a modern developer might need for a React-Redux project:

  1. Modules support
  2. ES6 and JSX support
  3. CSS modules and preprocessors
  4. Linting
  5. Hot reloading
  6. Test suites
  7. Packages specific to a project

Looks much clearer than a bloated package.json, right? It’s the first step.

Now, as we’ve defined what we want, it’s much simpler to create our project. We’re just going to add step by step our tools.

Actually, with this list you could leave this post and go ahead to do it yourself. Just remember that you’re using webpack, so most of the packages you’ll be using have their specific webpack loaders.

Besides, some of the tools have their own configs, so it’s worth to have a little more thorough look on how these tools work.

I’ll show the steps to add all the tools listed above. But, first lets define your starting file structure.

Your index.html should load bundle.js.

Copy-paste into package.json the “true minimal” example. Then open terminal inside that directory and run:

Now you can put some code into your index.js and try to run

If everything is working, lets start!

Modules support

Done with Webpack! πŸ™‚

Actually, webpack is much more powerful tool. Our further tools will make use of its loaders system. I recommend to read webpack’s Concepts page, – it’s really short overview, just for having an idea about how it works and what it offers.

Then, you need to create webpack.config.js which is much more convenient to use than cli. Here’s a short instruction you can use β€” using a configuration. I’ve pointed to the piece you actually need, but if you’re not familiar with webpack, read the whole page, it’s also short, even if doesn’t seem β€” near half of the page’s height is occupied by code examples.

Once created the webpack config file, you can also change our

command inside package.json to

ES6 and JSX support

Well, probably, you already know that there’s Babel compiler for this. You just go to its official site directory, click on webpack and follow the guide, it’s extremly simple! Note that in the third step “Via config” of the guide means the webpack’s config file.


If you’ve followed the guide, you’ve seen that to make babel work properly you’ll need plugins. With the guide you add env preset, which is ok. We need react support too, in the plugin page you’ll see that a “react” preset exists, so you just need to add that the same way you’ve done with env preset.

Also, there are some more cool ES proposals like “object rest spread” or “transform class properties” and others. They are available in the stage-x presets or individually. Personally, I don’t bother and just add the state-0 preset and enable all the coolest features of modern JavaScript.

There’s also a not obvious detail. Babel makes available the use of modules, but we’re already using Webpack for this purpose and it uses “imports” and “exports” to do a “tree shaking” which allows it to eliminate the dead code. You just need to disable modules support in your .babelrc:

CSS modules and preprocessors

Okay, we want modules. We want to import our .scss code in our components modules and we want to create a css bundle.

It’s what we are using webpack for, but if you’ve read the webpack introduction, you could have notice that it understands only javascript. You need css-loader to translate it properly.

We also want to use SCSS syntax, it should be transpiled to normal .css. As you can probably guess, we will use a loader for it.

Lets handle first the modules. Fortunately, webpack has a really great documentation, look at Loading CSS. Just follow the guide.


As you’ve seen, the style-loader adds your styles inline, but at the end of the guide there’s a link for splitting css bundle, and preprocessor loaders are also mentioned, we are interested in sass.

The splitting is dead simple, just remember to update your index.html to link your styles.css. Adding the sass-loader is simple too. I use also the postcss-loader and its autoprefixer so I don’t worry about adding browser specific prefixes.


It was simple, nah?

I guess, currently your structure and your files should look closely like this:


I use eslint for this. There’s a loader for webpack you can find in loaders page. If you click on eslint-loader you’ll find a pretty straightforward guide to add it.


On the official site of ESLint you’ll find a short getting started guide and a far more extensive advanced configuration. In case you’ve never used ESLint previously, I’ll show you a simple example of .eslintrc config file.

You could notice that there’s a plugin react and a parser babel-eslint. We need them, so ESLint can understand our JSX and ES6 code. There’s nothing special about it, you can just install them

a little more detail about: react plugin and babel parser.

Now, if you run webpack, you’ll be cursing the double quotes! πŸ˜€

Hot Reloading

It’s a great feature for a development process and you’ll have no need to use watch. The guide is very simple. You’ll see that you need to install webpack-dev-server first, so you can just install it before proceed npm install webpack-dev-server --save-dev and add a script for running it to your package.json:

Here’s the guide.


Once done, you may want to install React Hot Loader. Here’s the guideΒ to do that, but to simplify I’ll layout the steps for you:

  1. Install
  2. Add it to your webpack entries list:
  3. Include this in the .babelrc config.
  4. Create a dev entry file, that will replace your root component. Comment store lines, if you haven’t set up the redux store.

Now, if you change your components their state will be preserved.

Test suites

You can refer directly to your prefered test suite docs, I guess that it should be documented enough. I’ll show an example how to use Tape for unit testing. It’s a little tricky.

  1. Install Tape.
  2. Install faucet for a prettier log.
  3. Install chokidar as a better replacement for watch.
  4. Install babel-register in order to transpile ES6.

    Tape can require it before running the spec files.
  5. Install a plugin to ignore css requires.
  6. Add those scripts to package.json
  7. Update .babelrc as babel-register will using that and it needs modules support.

It was just an example, but if you’ve followed it and want to give tape a try, here its docs, very short and simple.

Packages specific to a project

We have covered the most generic tools a developer might use in his project, but obviously there will always be some tools more specific to your needs. Even if you use ready-made solutions, boilerplates β€” you’ll be facing it. For example, I use html-webpack-plugin that allows me to create templates for webpack, so I control what kind of html I have in output. Try it!

Sure, the whole process of structuring your project is not really that simple, it’s tricky, and there are always little details you could omit or find out later. Fortunately, we have a big enough community to find answers to almost all the issues we encounter.

I hope this little hands-on guide made you a little more confident on starting your project by yourself.

Here’s the whole example code.