This project is a scaffold to start new react+redux projects powered by Webpack.
git clone https://github.com/ecozoic/react-starter cd react-starter yarn
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.
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.
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:
To develop using TDD (Jest in
--watch mode), run:
This command will start the webpack-dev-server, Koa server and Jest. Note that the TDD scripts do not generate coverage reports.
This will generate jsdoc documentation.
This will execute static type-checking with flow.
This will start a Storybook server to play around with stories for new components
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
- Improve documentation
- Improve server error handling
- Auth boilerplate
- Server-side rendering