https://github.com/webpack/react-webpack-server-side-example
Example of an react application with webpack including server-side rendering.
https://github.com/webpack/react-webpack-server-side-example
Last synced: about 2 months ago
JSON representation
Example of an react application with webpack including server-side rendering.
- Host: GitHub
- URL: https://github.com/webpack/react-webpack-server-side-example
- Owner: webpack
- Archived: true
- Created: 2014-05-22T23:34:00.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-09-19T07:42:20.000Z (over 9 years ago)
- Last Synced: 2024-10-30T00:58:48.698Z (over 1 year ago)
- Language: JavaScript
- Size: 148 KB
- Stars: 460
- Watchers: 21
- Forks: 70
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
``` text
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 ``-tag.
### Production
``` text
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