Awesome Open Source
Awesome Open Source

Koa React Universal

Greenkeeper badge Build Status Code Climate Test Coverage

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/developmentsrc/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-componentwebpack-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).

record

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

MIT

Contributing

Issues are welcome :)

PRs are welcome (if you can help to make things more concise and simple!).


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,839
Reactjs (72,884
Boilerplate (5,528
Ssr (1,631
Redux Thunk (1,381
Koa (1,213
React Router V4 (584
Universal (494
Isomorphic (440
Webpack3 (382
Code Splitting (239
Hmr (217
Related Projects