react-starter

A starter kit for React+Redux UIs

react-starter

Build Status Dependency Status devDependency Status

This project is a scaffold to start new react+redux projects powered by Webpack.

Installation

git clone https://github.com/ecozoic/react-starter
cd react-starter
yarn

Development

yarn start

This will start up a webpack-dev-server with hot module replacement and redux-devtools at http://localhost:8080 and a Nodemon-monitored and debuggable (via Node’s --inspect flag) Koa server at http://localhost:3000. The webpack-dev-server is configured to proxy HTTP calls to /api/* routes to the Koa server.

Production

yarn build
yarn serve

This will generate minified assets in the /dist/ directory and serve them up using a Koa HTTP server at http://localhost:8080. This production-ready server supports HTTP caching, etags, and conditional GET requests. A visualization of the webpack build will be produced in the /webpack/stats directory.

Tests

yarn test

This will execute Jest unit tests and generate Istanbul coverage reports for both the client and server.

To run Nightwatch e2e tests, ensure the app is running with either yarn start or yarn serve and then run:

yarn e2e

To develop using TDD (Jest in --watch mode), run:

yarn tdd

This command will start the webpack-dev-server, Koa server and Jest. Note that the TDD scripts do not generate coverage reports.

Documentation

yarn docs

This will generate jsdoc documentation.

Flow

yarn flow

This will execute static type-checking with flow.

Storybook

yarn storybook

This will start a Storybook server to play around with stories for new components

Configuration

You can add environment specific configuration settings by creating a .env file in the root directory. .env.sample shows an example format. This file will be loaded by dotenv for both the client and server processes. You can expose these values to your Webpack build by using the DefinePlugin in webpack.common.js.

Tools & Features

  • react, [email protected], react-intl, react-helmet, material-ui, aphrodite
  • redux, react-redux, connected-react-router, redux-form, react-intl-redux, redux-thunk, redux-promise-middleware
  • history, fetch, lodash, moment, color
  • redux-devtools, redux-logger, redux-mock-store, [email protected] for HMR
  • koa HTTP server and API
  • Build powered by Webpack 2 and Babel 6
  • Optimized production build with UglifyJS + tree-shaking
  • Linting with eslint, optional static type-checking with Flow
  • Unit tests with Jest, Enzyme, and Istanbul coverage reports
  • E2E testing with Nightwatch
  • Autogenerated documentation via jsdoc
  • Storybook sandbox

Roadmap

  • Improve documentation
  • Improve server error handling
  • Auth boilerplate
  • Server-side rendering

Related Repositories

react-starter-kit

react-starter-kit

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync) ...

react-demo

react-demo

React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter,可能是东半球最佳的 React Starter,基于 Vue Cli 二次开发 ...

react-starter

react-starter

React + Babel + Webpack starter kit, for building simple static sites with React. Deploys to surge.sh. ...

react-starter-kit

react-starter-kit

Amaze UI React Starter Kit- a skeleton for SPA built with React, Amaze UI components, react-router. ...

hapi-react-starter-kit

hapi-react-starter-kit

A hapi React Starter kit with react-router, redux, react-transform ...