Skip to content
This repository has been archived by the owner. It is now read-only.
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 

README.md

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:

  1. Compile the browser bundle and the server-side bundle. It also stores stats from the browser bundle as json file.
  2. 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

None. Don't copy the code, only use the idea.

Copyright 2014 Tobias Koppers

About

Example of an react application with webpack including server-side rendering.

Resources

Releases

No releases published

Packages

No packages published