react-redux-es2015-starter-kit

react-redux-es2015-starter-kit

My own starter kit for making a React/Redux web application using Webpack and ES2015. Feel free to fork this repo to start your own project.

Features:

• Written in ECMAScript 2015, transpiled by Babel 6.
• Compiled using Webpack for both server and client-side code.
• Generating sourcemaps for backend & client code during development.
• Using my own cluster management library cluster-respawn.
• React with server side rendering on expressjs backend.
• React-router for isomorphic routing.
• Redux Flux with atomic immutable.js app state.
• Hot reloading of client modules and reducers using React-Hot-Loader.
• Shared cluster configuration managed by Shared-Store.
• Bootstrap integration for styling.
• Eslint integration.
• Server auto restart, or restart-on-demand using "make reload".

Quick Start

This starter kit has been optimized for Node 4.x and NPM 3.x. Of course, you can run it with Node 5.x.

git clone https://github.com/fredguile/react-redux-es2015-starter-kit.git
cd react-redux-es2015-starter-kit
make setup
make dev

Open it in your browser http://localhost:3000.

File Structure

My proposed app structure as following:

react-redux-es2015-starter-kit/
 ├──app/                       * project files
 │   ├──components/            * some React components as example
 │   │
 │   ├──core/                  * default app behavior
 │   │   ├──bootstrap.js       * master & workers processes initialization script
 │   │   └──frontend/          * client-side bootstrap code & main CSS
 │   │
 │   ├──modules/               * proposed folder for app modules
 │       └──todoList/              * our infamous todo example using Redux
 │
 ├──build/                     * webpack build for backend code (optimized for Node 4.x)
 │
 ├──config/                    * configuration files
 │
 ├──public/                    * static files served by Express
 │
 ├──tasks/                     * Gulp tasks for building project and starting server
 │
 ├──tmp/                       * Temperary copy of the shared configuration
 │
 ├──index.js                   * Node start script
 ├──Makefile                   * For managing server lifecycle using make commands
 │
 ├──master.pid                 * Master PID file (when server is started)
 ├──worker-X.pid               * Workers PID file (when server is started)
 │
 └──package.json               * npm configuration