Add styled-components, routing, storybook and a sensible project structure to the create-react-app boilerplate.

View it live here.

You will need the following software installed on your machine:

• node

We recomend installing node throught nvm, as well as updating npm to version >=5.

You can setup a new project based on this boilerplate using Yeoman.

First, install Yeoman and generator-refresh using npm.

npm install -g yo
npm install -g generator-refresh

Then generate your new project:

yo refresh <my-project>

Navigate to the root of the project and install the dependencies:

cd <my-project>
npm i

Once the dependencies are installed, you can launch the development environment and have a look at the boilerplate application:

npm run start

This will launch the webpack dev server for you and automatically sync your browser. You can now view the website on localhost:3000.

A set of scripts are provided for you to test, build and analyze the project.

With storybook you can view the components you have created in isolation. To view them, simply run:

npm run storybook

To include a component to the storybook, simply add a <componentName>.stories.js file in your component folder, containing the stories you want to show.

You can run all tests in the project with the following command:

npm run test

You can also generate a website with information on the code coverage with:

npm run test -- --coverage

This will generate a website in the folder coverage. You can launch it with any server of your choice, for example serve.

npm i -g serve && serve coverage

You can build a production ready version of the website by running:

npm run build

This will create a build folder with the minimized and transpiled JS.

You can generate a map of all dependencies, this can be very usefull when trying to identify a library causing bloat to the application. After building your application you can generate a map, by running:

npm run analyze

This will look into your build folder and open an interactive map of the dependencies in your browser.

MIT