WORK IN PROGRESS - DO NOT USE

This is very heavily based on the opencredo-react-boilerplate which is heavily based on the react-redux-starter-kit

This contains a number of changes to make the starter kits work better for our exact configuation. It may be useful to you. It may not. At this time the docs have not been updated.

Changes are:

• react-toolbox replaces react-bootstrap, for a material design look
• Updating linting to use airbnb with semi-colons
• Updated layout structure
• Emezyne and expect added to testing framework
• Add Ramda support and use in preference to lodash
• Added support for redux-cli (coming soon)
• Added immutableJS (comsing soon)
• Replace axios with fetch (coming soon)
• Replace react-transform-hmr with react-hot-loader. See redux issue#1455 (coming soon)
• Updated support for react-intl (coming soon)
• Remove flowtype

• 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

Clone this repo, then run npm install.

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

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 :-)

To test a production build:

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

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

.
├── 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".