opencredo-react-boilerplate

React and Redux boilerplate codebase.

Features

• react
• redux
• react-router
• react-router-redux – synchronises react router state with your redux store
• webpack
  • Configured with webpack-dev-middleware and webpack-hot-middleware
  • Hot Module Replacement with react-transform-hmr and babel-preset-react-hmre
  • SASS / SCSS
  • CSS modules
  • .eslintrc pre-loader
  • Support for production and development builds based on NODE_ENV
• react-addons-test-utils for unit testing
• Flowtype Static type checker (see FLOWTYPE.md for more info)
• Babel for ES2015 and beyond
  • Presets: es2015, react, stage-0, and react-hmre (development)
• react-bootstrap and react-router-bootstrap
• react-intl for i18n support with several example translations; using v2 beta: keep an eye on the RFC
• redux-form and redux-form-validation for form integration and validation
• Example production build script (npm run build)
• Basic support for restricted pages. Check src/routes.js for examples of restricted routes

Usage

First time

Clone this repo, then run npm install.

Windows users need to follow the instructions in FLOWTYPE.md to install the flow binaries.

Development

When you're developing, start webpack as follows:

npm run start       # standard development
npm run start:bs    # as above, but with browser-sync

Then open a browser at http://localhost:3000/.

Some useful commands:

npm run lint        # execute the eslint process on the codebase
npm run karma       # execute just the unit tests
npm run flow-check  # alias for `flow check`
npm run test        # execute flow checks, eslint and unit tests
npm run build       # run this just before you commit - the Travis-CI job runs this command

Most editors will report lint and type errors if properly configured. If you need help setting up your editor, we've put together a few tips for some of the more popular ones in the Editors document. If your editor is not listed and you'd like to contribute some tips, feel free to make a PR :-)

Production

To test a production build:

npm run build && (cd dist && python -m SimpleHTTPServer)

Then open a browser at http://localhost:8000/.

Directory Structure

.
├── config                      # Config: mostly used by build & webpack
│   ├── environments/           # Config overrides for different NODE_ENVs
│   └── index.js                # Config entry point. Modify to suit your needs
├── dist/                       # Built artifacts get put here (e.g. webpack.output)
├── server/                     # Express server files go here
│   ├── index.js                # Launches the express() server with webpack-hmr
├── src                         # The source code of the application
│   ├── api/                    # Modules that make API service calls
│   ├── components/             # React [functional|dumb|stateless] components
│   ├── containers/             # React "container" components (connected to store)
│   ├── declarations/           # Flowtype declarations would go here, if necessary
│   ├── pages/                  # Pages: React Components that live in routes
│   ├── redux/                  # Here we configure our redux stores, actions, reducers...
│   │   ├── modules/            # Redux modules would be collections of reducers + actions
│   │   ├── configure-store.js  # Redux store configured here (middleware, initial state, reducers...)
│   │   └── root-reducer.js     # Here we combine all our reducers
│   ├── shared/                 # Shared resources
│   ├── static/                 # Static assets. Some call this `public/`
│   ├── styles/                 # Global CSS styles (class names left intact)
│   ├── translations/           # Our i18n translations go here
│   ├── app.js                  # Application entry point
│   ├── app-config.js           # Global application settings
│   ├── index.html              # index.html template
│   └── routes.js               # All our routes
├── karma.conf.js               # (self explanatory)
├── package.json                # (self explanatory)
├── tests.karma.js              # (self explanatory)
└── webpack.config.js           # (self explanatory)

Note: see Dan Abramov's explanation about "Smart and Dumb Components".

Contributing

Please see CONTRIBUTING.md for how to get involved.

Changelog

Changelog

Credits

Much of the original codebase was taken from Dave Zuko's excellent react-redux-starter-kit. Thanks Dave!