opencredo-react-boilerplate
React and Redux boilerplate codebase.
Features
react
redux
react-router
react-router-redux
– synchronises react router state with your redux storewebpack
- Configured with
webpack-dev-middleware
andwebpack-hot-middleware
- Hot Module Replacement with
react-transform-hmr
andbabel-preset-react-hmre
- SASS / SCSS
- CSS modules
.eslintrc
pre-loader- Support for production and development builds based on
NODE_ENV
- Configured with
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
, andreact-hmre
(development)
- Presets:
react-bootstrap
andreact-router-bootstrap
react-intl
for i18n support with several example translations; using v2 beta: keep an eye on the RFCredux-form
andredux-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
Credits
Much of the original codebase was taken from Dave Zuko's excellent react-redux-starter-kit. Thanks Dave!