React + Redux w/ ES6 Starter Project

🎉 A Completely updated version of my initial boilerplate 🚀

Note: If you still want to use a previous version, please checkout old-original-structure branch.

A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

The provided boilerplate is powered by the following technology stack:

Getting Started

Prerequisites

Support for Node.js > 5

Installation

$ git clone https://github.com/nicksp/redux-webpack-es6-boilerplate.git app-name
$ cd app-name
$ npm install

White Label It

Update name, description, author, repository in package.json
Update app title in src/client/assets/index.html

Development

There are two ways in which you can build and run the web app:

Build once for (ready for Production):
- $ npm run build
- $ npm run build:serve
The last command will boot up HTTP server on 3003 port and serve build/client directory in a default browser
Hot reloading via webpack middlewares:
- $ npm start
- Point your browser to http://localhost:3000/, page hot reloads automatically when there are changes

Testing

(TBD)

To execute all unit tests, use:

$ npm run test

To run unit tests continuously during development (watch tests), use:

$ npm run test:watch

Expose App on Your Local Dev Machine

Assign yourself a unique publicly accessible url that will proxy all requests to your locally running webserver.

$ npm install -g localtunnel
$ npm start
$ npm run tunnel # run in a new tab

You will receive a url, for example https://tbst.localtunnel.me, that you can share with anyone for as long as your local instance of lt remains active. Any requests will be routed to your local service at the specified port.

Error Tracking and Insights with Sentry

In order to get info on errors that happened in production, we integrate Sentry into our application to track errors and get context on what happened.

To use it on your side, configure it first:

Create account at https://sentry.io/signup/
Add new project for your app on Sentry website
In /src/client/assets/javascripts/app/config.js file assign SENTRY_KEY and SENTRY_APP constants values that you got after adding a new project
Don't forget to define Allowed Domains section under your Project Settings on Sentry website to track errors from required domains

Debugging

For debugging purposes please use:

Redux DevTools plugin for Chrome to simplify debugging React apps.
React Developer Tools

FAQ

What's this for?

This starter kit implements best practices like testing (unit testing), minification, bundling, and so on. It saves you from the long, painful process of wiring it all together into an automated dev environment and build process.

What's happening under the hood when I run `npm start`?

Webpack serves your app in memory when you run npm start. No physical files are written. However, the web root is /src, so you can reference files under /src in index.html. When the app is built using npm run build, physical files are written to /build folder and the app is served from /build.

How is Sass being processed?

We're handling it differently in DEV vs PROD.

When you run npm start:

The sass-loader compiles Sass into CSS
Webpack bundles the compiled CSS into app.js. Sounds weird, but it works!
app.js contains code that loads styles into the <head> section of index.html via JavaScript. This is why there is no stylesheet reference in index.html. In fact, if you disable JavaScript in your browser, you'll see the styles don't load either.

The approach above supports hot reloading, which is great for development. However, it also create a flash of unstyled content on load because you have to wait for the JavaScript to parse and load styles before they're applied. So for the production build, we use a different approach:

When you run npm run build:

The sass-loader compiles Sass into CSS
The extract-text-webpack-plugin extracts the compiled Sass into app.css
buildHtml.js adds a reference to the stylesheet to the head of index.html.

How do I deploy this?

npm run build. This will prepare and build the project for production use. It does the following:

Minifies all JS and CSS
Inline base64 URLs for images and fonts if their size is less than specified limit
Sets NODE_ENV to production so that React is built in production mode
Places the resulting built project files into /build directory. (This is the folder you'll expose to the world).

TODO

License

MIT License, 2016

Brought to you by Nick S. Plekhanov

nicksp/redux-webpack-es6-boilerplate