Abandoned 🚫🚫🚫🚫
This boilerplate has been abandoned in favour of tools like create-react-app and nwb.

One day this project might be reborn as a wrapper for tools like the two above.

Super Quick Boilerplate for Webpack, React & friends.

Avoid configuration.
Use common packages.
Have lovely developer experience.

Get your projects up super quickly with this boilerplate for Webpack, React & friends..

Why? 🐰

Bootstrapping frontend projects is time consuming, and providing consistent developer experience is hard.

The solution is simple... Take choices away. Reduce cognitive overload. Delay fatigue.

In this boilerplate, you aren't given any immediate choices to make. Just run npm start and write code. Wow, quick.

Details

Included Packages

• react
• react-dom
• redux
• react-redux
• flux-standard-action

Tooling

• babel
• webpack
• standard
• css-modules

Particulars

Webpack

Configured almost entirely with hjs-webpack. Includes:

• hot module replacement
• css modules
• import aliases for src directories
• bundle size visualiser (see Build)
• see hjs-webpack for details

Aliases

Module aliases have been setup for lib, models, components, styles.

// Example. Always resolves to 'src/models/todos.js'.
import todos from 'models/todos'

Linting

ESLint is using standardjs, with react plugin.

Babel

Babel is using es2015 and stage-0 presets, as well transform-decorators-legacy and react-hmre plugins.

Redux

The files in src/models adhere to ducks. If you're going to use redux selectors, it is also good to define them in the models.

Enabled middlewares:

• redux-thunk
• require flux standard actions (see redux-utils.js)
• add your own in store.js

Redux DevTools extension is supported.

Project Structure

bunny-boilerplate
├── public                  # build output
└── src
	├── lib/                # utils
	├── models/             # redux ducks
	├── components/         # all components
	├── styles/             # shared css
	└── bootstrap.js        # app container
	└── store.js            # redux store

Build

Development

PORT=3000 npm start

Note: Visit localhost:3000/stats for webpack bundle statistics.

Run 'Tests'

npm run test

Production Build

npm run build

Deploy

Deploying with surge.sh is quick and easy.

See bunny-boilerplate.surge.sh for the demo.

npm install -g surge

npm run build && \
surge --project ./public

Changelog

• v1.0.0 - initial release

Related Projects

• mxstbr/react-boilerplate demands a look

Special Thanks

Thanks to the army of people that made the tools and packages. <3

License

Licensed under the MIT license, (c) 2016 Lochlan Bunn.

--

Bunny is agile and majestic.