Skip to content

kiki-le-singe/react-redux-boilerplate

Repository files navigation

React Redux Boilerplate

Introduction

I started this project to learn tools like React, Redux, Webpack, babeljs.io, ES6/ES2015... I did it mainly for fun. And then I used it as Boilerplate for my React|Redux projects. So don't worry it works :p. It's not perfect but it works :).

If you are interested about isomorphic/universal rendering, you should take a look at this repo: React Redux Universal Boilerplate.

Enjoy it! :)

Requirements

Node ^5.0.0

Optional

Gulp is used to manage icons. I do not use it as builder, so it is not mandatory.

Mongodb is useful if you want used a database. In this project I used a fake API.

Installation

$ git clone git@github.com:kiki-le-singe/react-redux-boilerplate.git
$ cd react-redux-boilerplate
$ npm install

Scripts

$ npm start

Starts up koa server to serve your app at localhost:8080. HMR will be enabled in development.

$ npm run compile

It does some optimizations and Compiles the application, for the production, to disk (~/dist by default).

$ npm run dev:debug

Same as npm start, but displays the redux devtools.

$ npm run dev:quiet

Same as npm start, but displays no webpack informations in the terminal.

$ npm run dev:stub

Same as npm start, but in stub mode.

$ npm run test

Soon...

$ npm run deploy

Cleans the dist folder previously created and compiles your application to disk, then serves the app in production mode on localhost:3000.

$ npm run prod

Starts up koa server to serve your app at localhost:8080.

$ npm run lint

Lint all .js files.

$ npm run styleguide

Build style guides to disk ~/styleguide and ~/build_styleguide. The build_styleguide dir is only generated to get the css styles of project. This allow to use them in the style guide.

See ~/webpack/styleguide.config.js.

$ node server app.production.js

Serves the app in production mode on localhost:3000.

Don't forget to run npm run deploy before.

Gulp Tasks

$ gulp iconify

See 'A mystical CSS icon solution', grunticon-like build system..

Configuration

Basic project configuration is in ~/config/index.js

Structure

.
└── __tests__                # Unit tests (Soon...)
├── config                   # Project configuration settings (Server, Webpack, ...)
├── gulp                     # Gulp configuration tasks
├── server                   # Koa application (uses webpack middleware)
│   └── server.dev.js        # Server dev application
│   └── server.production.js # Server prod application
├── src                      # Application source code
│   ├── assets               # Static assets
│   ├── components           # Generic React Components
│   ├── config               # Project configuration settings (api, ...)
│   ├── containers           # Root components (Redux Provider, Router, DevTools, ...)
│   ├── layouts              # Components page structure
│   ├── redux                # Redux actions|constants|middleware|reducers|store
│   ├── routes               # Application route definitions
│   ├── services             # All kinds of services (Email, User, ...)
│   ├── styles               # Application-wide styles
│   └── index.js             # Application bootstrap and rendering
├── styleguide               # Application style guides
├── webpack                  # Environment-specific configuration files for webpack

Webpack

Configuration

The webpack compiler configuration is located to the root:

  • ~/webpack/dev.config.js

Webpack configuration for the development mode.

  • ~/webpack/prod.config.js

Webpack configuration for the production mode.

  • ~/webpack/styleguide.config.js

Webpack configuration to build assets for the style guides.

You can also see the ~/.babelrc configuration file.

Vendor Bundle

These default to:

[
  'react',
  'react-router',
  'redux',
  'lodash',
  'classnames',
  'superagent'
]

Globals

These are global variables available to you anywhere in your source code. They can be found in ~/config/index.js.

new webpack.DefinePlugin({
  __CLIENT__: projectConfig.__CLIENT__,
  __SERVER__: projectConfig.__SERVER__,
  __DEV__: projectConfig.__DEV__,
  __PROD__: projectConfig.__PROD__,
  __DEBUG__: projectConfig.__DEBUG__
})

Styles

You can use .css file extensions using the latest CSS syntax with PostCSS-cssnext. See the ~/src/styles directory. mdcss is used to generate a style guide of the application, you can see both the repository and the official documentation.

Features

Build Tools

API

By default the root access for the API is http://localhost:8080/api. Available example: http://localhost:8080/api/tools

Sources

Tips and tricks

If you use MongoDB, look at this node modules. It's an convenient admin interface for MongoDB.

Allows you to inspect the React component hierarchy.

Highlight React components on the page.

Contexts

Contexts allow to pass values through a tree without having to use props.

ES6 Classes

Autobinding/No Autobinding

In React's class model you'll have to explicitly use .bind(this) or arrow functions =>. See also Can't get this.prop when use ES6 classes in React and Why this.setState is undefined in React ES6 class?