ptzagk / react-universal-boiler

A bold way to begin your next great universal React application. Uses Webpack 3, React 16, Redux, and more for a great developer experience.

React Universal Boiler

Features

• React 16
• A pleasant 😍 developer experience with 🔥 fast bundling, so you can get shit done. This starter takes advantage of tools like, HappyPack and the DLL capabilities within Webpack itself. Your rebuilds happen fast because, nobody enjoys waiting around like a 🐢 while assets recompile.
• React-Router 4: configured with async data loading.
• React-Hot-Loader: Build your React components with less full page reloads thanks to hot module replacement and React Hot Loader.
• Code Splitting: Give your visitors the best experience possible by allowing their browsers to only download what's necessary.
• React-Universal-Component: The final answer to a React Universal Component: simultaneous SSR + Code Splitting.
• Webpack Flush Chunks: flushes an array of rendered moduleIds or chunkNames.
• Styled-Components: Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.

Demo

https://boiler.strues.io

Usage

Development

Getting up and running for development is easy.

git clone [email protected]:strues/react-universal-boiler.git

cd react-universal-boiler

Install the dependencies yarn.

Copy the env file cp .env.example .env.

Start development yarn dev and your universal React application is running on port 3000.

Production

Running the two commands below will compile your application and serve the production ready build.

Build: yarn build

Run: yarn start

Env Variables

PORT=3000
# where assets will be "served" from
PUBLIC_PATH=/assets/
# Entry file for Webpack on the server
SERVER_ENTRY=src/entry/server.js
# Entry file for the client
CLIENT_ENTRY=src/entry/client.js
# Output directory for clientside 
CLIENT_OUTPUT=build/assets
# Output directory for the server bundle
SERVER_OUTPUT=build

Notes

Configuring the development DLLs is handled in tools/webpack/createWebpackConfig.js at the bottom in the AutoDLLWebpackPlugin options. Adding dependencies here allows Webpack to bundle them once, and not again during development. This dramatically speeds up rebundle times.

For production, this is handled for you by comparing imports to what's in node_modules.

This boilerplate uses babel 7, which is currently in beta. If you plan on using babel-plugin-transform-decorators-legacy, please see the Planning for Babel 7, particularly Stage 3: Class Properties (from Stage 2)

Resources

• React Redux Links

Alternatives

• React, Universally A starter kit giving you the minimum requirements for a modern universal React application. I contribute to React Universally frequently.

• ReactGo Your One-Stop solution for a full-stack app with ES6/ES2015 React.js featuring universal Redux, React Router, React Router Redux Hot reloading, CSS modules, Express 4.x, and multiple ORMs.

• React Cool Starter A simple but feature rich starter boilerplate for you to build an universal web app with the best development experience and a focus on performance and best practices.

Contributing

Pull requests are welcome and encouraged. If I made a mistake, raise an issue and/or fix it and submit a PR. Have a question? I'll do what I can to answer it for you.