No description, website, or topics provided.
JavaScript Other
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
build
config
public
server
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.flowconfig
.gitignore
.stylelintrc
LICENSE.md
README.md
jsconfig.json
package.json
webpack.config-server.js
webpack.config.js

README.md

Example of the universal project on react, redux, koa, etc.

Table of Contents

  1. Requirements
  2. Features
  3. Getting Started
  4. Usage
  5. Structure
  6. Using Redux DevTools

Requirements

Node ^4.0.0

Features

Getting Started

Just clone the repo and install the necessary node modules:

$ git clone https://github.com/bystrobank/react-redux-universal.git
$ cd react-redux-universal
$ npm install                   # Install Node modules listed in ./package.json (may take a while the first time)
$ npm start                     # Compile and launch

Usage

Before delving into the descriptions for each available npm script, here's a brief summary of the three which will most likely be your bread and butter:

  • Doing live development with HMR (hot module reload)?
    • Use npm start(npm run watch) to spin up the koa and webpack-dev-server (HMR) with redux-devtools.
    • Use npm run watch:logger to spin up the koa and webpack-dev-server (HMR) with redux-logger.
  • Doing live development without HMR? Use npm run dev to spin up the only koa server in watch mode.
  • Compiling the application to disk? Use npm run compile.

Great, now that introductions have been made here's everything in full detail:

  • npm start(npm run watch) - Spins up koa server to serve your app at localhost:4000 and webpack-dev-server (HMR) at localhost:3000.
  • npm run compile - Compiles the application to disk (~/dist/server and ~/public/client by default).
  • npm run watch:logger - Same as npm start, but uses redux-logger instead redux-devtools.
  • npm run dev - Spins up the only koa server to serve your app at localhost:4000.
  • npm run lint - Runs ESLint, StyleLint, Flow check your JS and CSS source code.
  • npm run lint:js - Run ESLint check your JS source code.
  • npm run lint:js:fix - Run ESLint with option for automatically fix problems in your JS source code.
  • npm run lint:css - Run StyleLint check your CSS code.
  • npm run flow - Run Flow for static type checks your JS source code.

NOTE: Koa host and port defined by env variables NODE_HOST and NODE_PORT in package.json. webpack-dev-server is launched on the same host as koa. Project path defined by env variable 'PROJECT_PATH' and empty by default (http://localhost:4000/PROJECT_PATH/root_route/...).

Structure

The folder structure provided is only meant to serve as a guide, it is by no means prescriptive. It is something that has worked very well for me and my team, but use only what makes sense to you.

.
├── bin                      # Build/Start scripts
├── build                    # All build-related configuration
│   └── webpack              # Environment-specific configuration files for webpack
├── config                   # Project configuration settings
├── dist                     # Compiled application (src) for server side rendering
├── public                   # Assets and compiled application (src) for client side rendering
├── server                   # Koa application
|   ├── helpers              # Helpers for API
|   ├── middleware           # Koa middleware
|   |   ├── api              # Available to application of API
|   |   ├── renderRoute      # Routes rendering
|   |   └── ...              # Other middlewares
│   ├── app.js               # Server side entry point in application
│   └── index.js             # Server application entry point
├── src                      # Application source code
│   ├── components           # Common React components
│   ├── config               # Application configuration settings
│   ├── containers           # Layouts, routes root smart components with child dumb components, reducers, actions, sagas, styles etc and other HOC with reducers, actions, sagas, styles etc combined on features
│   ├── helpers              # Helpers of application
│   ├── redux                # Common reducers
│   ├── routes               # Application route definitions
│   ├── index.js             # Client side entry point in application
│   └── index.html           # HTML template of application
├── .babelrc                 # Global babel settings
├── .editorconfig            # Editor config
├── .eslintignore            # The ignored objects for eslint
├── .eslintrc                # Global eslint settings
├── .gitignore               # The ignored objects for git
├── LICENSE.md               # License
├── README.md                # This text
├── package.json             # NPM settings
├── webpack.config-server.js # Settings for webpack of bundle of application for server side
└── webpack.config.js        # Settings for webpack of bundle of application for client side


Using Redux DevTools

Redux Devtools are enabled by default in npm start(npm run watch) mode.

If you have the Redux DevTools chrome extension installed it will automatically be used on the client-side instead.

If you want to disable the dev tools use npm run watch:logger or npm run dev mode. DevTools are not enabled during production.