- 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.
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.
Running the two commands below will compile your application and serve the production ready build.
Build: yarn build
Run: yarn start
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
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)
-
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.
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.