React Redux Boilerplate

A react/redux/webpack boilerplate application with scaffolding, styleguide, and tests

Table of Contents

1. Requirements
2. Getting Started
3. Testing
4. Production Build
5. Styleguide
6. Scaffolding

Requirements

• node ^4.5.0

Getting Started

Clone the repo

$ git clone https://github.com/miketownsend/neverbland-tvmaze.git
$ cd neverbland-tvmaze

Then, install the dependencies

$ npm install

Serve the web application with webpack using:

$ npm start

Testing

// Run unit tests using Jest
$ npm test

// Run end to end tests using Cypress
& npm run integration_tests

Production Build

// Run the build here
npm run build

// View the distribution build at http://localhost:3002 using:
npm run build:serve

Styleguide

Generate a style guide using Styleguidist.

Run the styleguide dev server (watches component library)

& npm run styleguide

View the styleguide in the browser

Build the styleguide once (for CI)

$ npm run styleguide:build

Scaffolding

The scaffolding is a simple + messy node script that is next on my list for improvement. Blueprints of common patterns are provided for:

• component (component / styles / styleguide)
• container (container / styles)
• module (actions / constants / reducer / saga / selectors / tests)
• model (mock / transforms / test)
• route -- coming soon
• form -- coming soon

These can be generated from the command line using:

// Generate a new component/module/route
$ node blueprint <type> <name> --overwrite

// e.g.
$ node blueprint module ActivityScreen -o
$ node blueprint component UserIcon
$ node blueprint model schedule

// If you remove a generated module/component/route
// You can reset the sagas/routers/styles using...
$ node blueprint reset

Roadmap

1. Fix tests a. jest --watch a. Add saga tests for /module/request
2. Improve scaffolding:
3. Move scaffolding to use simple text replacement instead of preprocessor
4. Add route scaffolding
5. Add form scaffolding (deploy simple redux-form and form-container)
6. Move to JSS
7. Typescript (?)
8. Add base authentication module
9. Add base websocket module (start connection, receive RxJS observer)
10. Add to component library (find good 3rd party tools) a. Basic form components a. Rich autocomplete a. Menu + Navigation a. Loading states