Universal React Starter Kit

Universal React Starter Kit is an universal web application framework using koa, react, redux and webpack.

Features

Really starter boilerplate with the most popular technologies:

• Universal rendering, dynamic routing, async redux reducers, async data fetching and code-splitting.
• React as the view.
• React Router as the router.
• Redux's futuristic Flux implementation.
• Immutable-js provides persistent data collections which increase efficiency and simplicity.
• koa server.
• Webpack 2 for bundling and "Tree-Shaking" support.
• Babel for ES6 and ES7 transpiling.
• React Hot Loader 3 to tweak React components in real time.
• redux-thunk as the middleware to deal with asynchronous action.
• react-router-redux to keep your router in sync with Redux state.
• react-helmet to manage title, meta, styles and scripts tags on both server and client.
• webpack-isomorphic-tools to allow require() work for statics both on client and server.
• Webpack Dev Middleware serves the files emitted from webpack over the Express server.
• Webpack Hot Middleware allows you to add hot reloading into the Express server.
• react-addons-shallow-compare for a performance boost, it works perfectly with immutable data structure.
• morgan the HTTP request logger for server side debugging.
• Redux Devtools Extension for next generation developer experience.
• ESLint to maintain a consistent javascript code style (Airbnb's code style).
• StyleLint to maintain a consistent css/less code style.
• CSS and LESS support with [PostCSS] (https://github.com/postcss/postcss-loader) for advanced transformations (e.g. autoprefixer). CSS Modules enabled.
• Image (with image-webpack-loader for optimizing) and Font support.
• Split vendor's libraries from client bundle.
• No other view engines, just javascript based HTML rendering template.
• Shared app config between development and production.
• 404 error page and redirect handling.
• karma, mocha, enzyme, chai and sinon as the integrated solution for writing unit tests.
• Testing code coverage support.
• Happypack for build performance.
• Auto open chrome window when service start.
• Code splitting
  • Extract text plugin with code splitting
  • Code splitting for redux-modules
• Progressive Web Application ready, with offline support, via a Service Worker.
• Optimized configuration file structure
• webpack-dashboard
• Quick scaffolding - Create components, containers, routes from the CLI!
• DllPlugin to improve compiler performance

Requirements

• node >= 7.6
• npm >= 5.0

Getting Started

git clone https://github.com/zhongzhi107/universal-react-starter-kit my-project
cd my-project
cp profiles/local.env .env
yarn
yarn serve

Or, if you aren't using yarn:

git clone https://github.com/zhongzhi107/universal-react-starter-kit my-project
cd my-project
cp profiles/local.env .env
npm install
npm run serve

Now the app should be running at http://localhost:3000/

Commands

# Build the project
yarn build

# Build the project with CDN_ROOT
CDN_ROOT=//mycdn.com/ yarn build

# Test
yarn test

# JavaScript && CSS lint
yarn lint

# CSS lint
yarn lint:style

# JavaScript lint
yarn lint:js

# Build "dll" bundles
yarn dll