This demo has been updated to a Webpack 4 implementation
This is a demo of how to use the Universal family of packages:
- react-universal-component
- webpack-flush-chunks
- extract-css-chunks-webpack-plugin
- babel-plugin-universal-import
Feel free to use it as a boilerpate.
git clone https://github.com/faceyspacey/universal-demo.git
cd universal-demo
yarn
yarn start
-
Open localhost:3000 in your browser
-
Click "CHANGE PAGE" to cycle through dynamically imported pages
-
refresh on any page
-
and then view the source in the browser to see what chunks are being sent on each page
-
view the primary code in: src/components/App.js
-
open the Network tab to see when imports are fetched
-
edit the components to see that HMR works--even for split chunks.
-
edit and save the CSS files to confirm HMR works for CSS as well, thanks to extract-css-chunks-webpack-plugin
-
examine the build folders to see exactly what chunks and files are built for you
Long live the dreams of Universal HMR and Universal Code-Splitting!
We use commitizen, so run npm run cm to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. If you see anything wrong, feel free to make a PR.
- redux-first-router. It's made to work perfectly with Universal. Together they comprise our "frameworkless" approach to what Next.js does.
- React Universal Component 2.0 + babel-plugin-universal-import Launch Article