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
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
npm run production
None. Don't copy the code, only use the idea.
Copyright 2014 Tobias Koppers