Koa React Universal
koa2、react、react-universal-component、koa-webpack-server、async/await、code-splitting、hot-module-replacement、react-router4、redux-thunk
This project is dedicated to build simple yet powerful Koa-React-Universal boilerplate.
Less is More: All key ingredients are in src/development、src/production and webpack configurations, easy to understand、set-up and extend. We promise to use the most recent & official packages(as much as we can), no weird or tricky stuffs, keeping this project clean and fully customizable.
Fully functional: HMR for client and server side, code splitting for both javascript and css, async/await universal programming support for koa2 server-side and redux-thunk client-side…
Universal: We are using react-universal-component、webpack-flush-chunks. It simplifies universal development with code-splitting(js、css) and is also compatible with the latest react-router-v4.
Production: We are using webpack to build client(target: web) and server(target: node).
Development: We are using koa-webpack-server (which simplifies development env set-ups), it also webpacks client and server(with client & server hot-load), so we can stay as much as the same with production.
Screenshots
DEMO: Search Github Repositories.
Noted: Github search API has Rate Limitation of 10 reqs/min (without credentials).
Components
- koa2
- react
- react-router4
- redux-thunk
- react-universal-component
- es2015 + async/await
- less、postcss(autoprefixer)
- webpack
- koa-webpack-server
- webpack-flush-chunks
- axios
- ejs
- jest
- eslint(airbnb)
- docker
- wallaby
Roadmap
- graphql(Github API v3 -> v4)
- flow
- enzyme
- immutable
- vendor
Start
Prerequisites
development
- yarn / npm
- node ≥ 7.0
production
- docker ≥ 1.13
Production
yarn prod
or with docker
docker build -t koa-react-universal .
docker run -d -p 3006:3006 koa-react-universal
Development
yarn dev
Test
yarn test
also supports wallaby.js live test reports view
CMD + SHIFT + R -> R (vscode)
License
Contributing
Issues are welcome :)
PRs are welcome (if you can help to make things more concise and simple!).