Redux Coffee Boilerplate

A simple redux boilerplate/example written in coffeescript featuring:

• universal aka isomorphic aka "it runs both on server and client"
• hot reloading (w/ react-hot-loader)
• configurable webpack config
• React
• react-router
• and redux of course

If you wonder why coffeescript, read this.

Screenshot

Structure

.
├── App.coffee        # Routes and isomorphic helpers
├── README.md
├── actions           # Redux actions
│   └── todo.coffee   # actions for todo
├── api
│   ├── index.coffee
│   └── todo.coffee   # Simple API mock
├── client.coffee     # Entry point for client side
├── components
│   └── Page.coffee   # Page components (for menu)
├── constants
│   └── todos.coffee
├── gulpfile.coffee
├── package.json
├── reducers          # All the reducers
│   ├── index.coffee
│   └── todo.coffee
├── server.coffee     # Entry point for server side
├── services
│   └── Api.coffee    # Wrapper for superagent w/ Promise
├── views
│   ├── Index.coffee  # Simple index, no need for initialData
│   ├── Todo.coffee   # Todo view, need an initialData
│   └── base.html
├── webpack.client.coffee # Config for client
└── webpack.server.coffee # Config for server

Annotated source

• App.coffee
• Todo.coffee
• client.coffee
• server.coffee

Where to start ?

1. Clone the repo
2. npm i to install dependencies
3. Read the App.coffee and Todo.coffee annotated source
4. Read the source code and modify it
5. If any questions, open an issue...

To run:

gulp # run the dev server

Go further:

The example on this branch (master) is quite easy (it doesn't use an API). For a more complex examples:

• git checkout with-mongoose for an example with a mongoose backend
• git checkout with-generators for an example with es6 generators

Inspiration

• react-starter for the webpack configs
• react-redux-universal-hot-example for the way to fetch the initial data