Example of an react application with webpack including server-side rendering.
This is not for the normal user. This example is meant as inspiration to develop an framework that can do server-side rendering of react with webpack. You shouldn't use the code, only the idea.
webpack compile with two separate configurations: One for the browser bundle and one for the react application for server-side rendering. The server-side bundle can be required in other node.js code to build the pre-rendered HTML.
- Same react code (
app/Application.js) run on server and on client - In both cases the code is compiled with webpack
- Supports loaders i. e. file-loader for assets
- The server-side compilation collects styles and include them in the pre-rendered HTML
- This avoids FOUC of the pre-rendered HTML
- browser build includes a hash in url for caching
npm start
Run the 2 steps:
- Compile the browser bundle and the server-side bundle. It also stores stats from the browser bundle as json file.
- Starts a server. The server requires the server-side bundle, which generates HTML for every request. It also reads the filename of the browser bundle to insert the
<script>-tag.
npm run production
This compiles production versions for the browser and server-side bundles. It also minimizes javascript and css.
None. Don't copy the code, only use the idea.
Copyright 2014 Tobias Koppers