react-webpack-server-side-example

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.

Overview

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.

Features

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

Usage

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.

Production

npm run production

This compiles production versions for the browser and server-side bundles. It also minimizes javascript and css.

License