React Universal Boilerplate 😎

A simple but feature rich starter boilerplate for creating your own universal app. It built on the top of Node.js, Koa, React, Redux and React Router v4. Includes all the hot stuff and modern web development tools such as Webpack 3, Babel, PostCSS, Jest and Redux Devtools Extension. See the “Features” section for other awesome features you can expect.

I will maintain the starter boilerplate and keep all of the technologies on trend. Welcome to join me if you want. Hope you guys love it 🤩

Features

Really cool starter boilerplate with the most popular technologies:

• Universal rendering with async data fetching.
• React as the view.
• React Router v4 as the router.
• Redux's futuristic Flux implementation.
• Koa server.
• Webpack 3 for bundling and "Tree-Shaking" support.
• Babel for ES6 and ES7 transpiling.
• nodemon to monitor for any changes in your node.js application and automatically restart the server.
• 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 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.
• css-modules-require-hook compiles CSS Modules in runtime for SSR.
• assets-webpack-plugin generates assets with hash so you can use them for SSR.
• Webpack Bundle Analyzer creates a visualize size of webpack output files with an interactive zoomable treemap.
• Redux Devtools Extension for next generation developer experience.
• ESLint to maintain a consistent javascript code style (Airbnb + Prettier).
• StyleLint to maintain a consistent css/scss code style.
• CSS support with PostCSS for advanced transformations (e.g. autoprefixer, cssnext etc.). 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 component.
• Shared app config between development and production.
• 404 error page and redirect handling.
• Integrate Jest with enzyme as the solution for writing unit tests with code coverage support.
• Yarn as the package manager.

Getting Started

1. You can start by cloning the repository on your local machine by running:

git clone https://github.com/mdenisov/react-universal-boilerplate.git
cd react-universal-boilerplate

2. Install all of the dependencies:

yarn

3. Build it:

yarn build:dev    # Building bundle

3. Start to run it:

yarn start:dev    # Running dev server

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

Note: You can change the port that you want from ./package.json.

NPM Script Commands

I use better-npm-run to manage the scripts in a better way, which also provides the compatibility of cross-platform. All of the scripts are listed as following:

yarn <script>	Description
start:dev	Run your app on the development server at localhost:8000. HMR will be enabled.
start:prod	Run your app on the production server only at localhost:8000.
build:dev	Remove the previous bundled files and bundle it to ./public/assets.
build:prod	Remove the previous bundled files and bundle it to ./public/assets.
lint:js	Lint all .js files (Use --fix to auto fix eslint errors).
lint:css	Lint all .css files (Use --fix to auto fix stylelint errors).
test	Run testing once (with code coverage reports).