├── .gitignore
├── app
    ├── image.jpg
    ├── image.png
    ├── Application.css
    ├── entry.js
    └── Application.js
├── server
    ├── style-collector.js
    ├── style-collector.loader.js
    ├── index.js
    └── page.js
├── package.json
├── webpack.config.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /server/*.generated.*
3 | /public/assets


--------------------------------------------------------------------------------
/app/image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webpack/react-webpack-server-side-example/master/app/image.jpg


--------------------------------------------------------------------------------
/app/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webpack/react-webpack-server-side-example/master/app/image.png


--------------------------------------------------------------------------------
/app/Application.css:
--------------------------------------------------------------------------------
1 | .application {
2 | 	border: 1px solid blue;
3 | 	background: url(image.png), url(image.jpg);
4 | }


--------------------------------------------------------------------------------
/server/style-collector.js:
--------------------------------------------------------------------------------
 1 | exports.collect = function(fn) {
 2 | 	var stuff = [];
 3 | 	function add(css) {
 4 | 		stuff.push(css);
 5 | 	}
 6 | 	var old = exports.add;
 7 | 	exports.add = add;
 8 | 	fn();
 9 | 	exports.add = old;
10 | 	return stuff.join("\n");
11 | }
12 | 
13 | exports.add = function() {}


--------------------------------------------------------------------------------
/server/style-collector.loader.js:
--------------------------------------------------------------------------------
1 | module.exports = function() {};
2 | module.exports.pitch = function(req) {
3 | 	this.cacheable();
4 | 	return "require(" + JSON.stringify(require.resolve("./style-collector")) + ").add(require(" + JSON.stringify("!!" + req) + "));\n" +
5 | 		"delete require.cache[module.id];";
6 | }


--------------------------------------------------------------------------------
/app/entry.js:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require("react");
 4 | var Application = require("./Application");
 5 | 
 6 | React.renderComponent(
 7 | 	<Application url={location.pathname + (location.search || "")} />,
 8 | 	document.getElementById("content")
 9 | );
10 | 
11 | var serverSideStyle = document.getElementById("server-side-style");
12 | if(serverSideStyle)
13 | 	document.getElementsByTagName("head")[0].removeChild(serverSideStyle);


--------------------------------------------------------------------------------
/app/Application.js:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require("react");
 4 | 
 5 | var Application = React.createClass({
 6 | 	render: function() {
 7 | 		require("./Application.css");
 8 | 		return (
 9 | 			<div className="application">
10 | 				<h1>Hello World</h1>
11 | 				<pre>{this.props.url}</pre>
12 | 				<img src={require("./image.png")} height="100" />
13 | 				<img src={require("./image.jpg")} height="100" />
14 | 			</div>
15 | 		);
16 | 	}
17 | });
18 | 
19 | module.exports = Application;


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | var express = require("express");
 2 | var path = require("path");
 3 | var page = require("./page.generated.js");
 4 | 
 5 | var app = express();
 6 | 
 7 | app.use(express.static(path.join(__dirname, "..", "public")));
 8 | 
 9 | var stats = require("./stats.generated.json");
10 | 
11 | app.get("/", function(req, res) {
12 | 	res.end(page(req, stats.assetsByChunkName.main));
13 | });
14 | 
15 | var server = app.listen(3000, function() {
16 | 	console.log('Listening on port %d', server.address().port);
17 | });


--------------------------------------------------------------------------------
/server/page.js:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require("react");
 4 | 
 5 | var Application = require("../app/Application");
 6 | 
 7 | var styleCollector = require("./style-collector");
 8 | 
 9 | module.exports = function(req, scriptFilename) {
10 | 
11 | 	var html;
12 | 	var css = styleCollector.collect(function() {
13 | 		html = React.renderComponentToString(<Application url={req.url}/>);
14 | 	});
15 | 	return React.renderComponentToString(
16 | 		<html>
17 | 			<head>
18 | 				<style id="server-side-style" dangerouslySetInnerHTML={{__html: css}} />
19 | 			</head>
20 | 			<body>
21 | 				<div id="content" dangerouslySetInnerHTML={{__html: html}} />
22 | 				<script src={"assets/" + scriptFilename}></script>
23 | 			</body>
24 | 		</html>
25 | 	);
26 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-webpack-server-side-example",
 3 |   "version": "0.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "webpack --progress && node server",
 8 |     "production": "webpack -p --progress && node server"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "http://github.com/webpack/react-webpack-server-side-example.git"
13 |   },
14 |   "author": "Tobias Koppers @sokra",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/webpack/react-webpack-server-side-example/issues"
18 |   },
19 |   "homepage": "https://github.com/webpack/react-webpack-server-side-example",
20 |   "dependencies": {
21 |     "style-loader": "~0.6.3",
22 |     "url-loader": "~0.5.5",
23 |     "file-loader": "~0.5.1",
24 |     "envify": "~1.2.1",
25 |     "react": "~0.10.0",
26 |     "css-loader": "~0.7.0",
27 |     "webpack": "~1.3.1-beta7",
28 |     "jsx-loader": "~0.10.2",
29 |     "express": "~4.5.0",
30 |     "json-loader": "~0.5.1"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | 
 3 | var commonLoaders = [
 4 | 	{ test: /\.js$/, loader: "jsx-loader" },
 5 | 	{ test: /\.png$/, loader: "url-loader" },
 6 | 	{ test: /\.jpg$/, loader: "file-loader" },
 7 | ];
 8 | var assetsPath = path.join(__dirname, "public", "assets");
 9 | var publicPath = "assets/";
10 | 
11 | module.exports = [
12 | 	{
13 | 		// The configuration for the client
14 | 		name: "browser",
15 | 		entry: "./app/entry.js",
16 | 		output: {
17 | 			path: assetsPath,
18 | 			filename: "[hash].js",
19 | 			publicPath: publicPath
20 | 		},
21 | 		module: {
22 | 			loaders: commonLoaders.concat([
23 | 				{ test: /\.css$/, loader: "style-loader!css-loader" },
24 | 			])
25 | 		},
26 | 		plugins: [
27 | 			function(compiler) {
28 | 				this.plugin("done", function(stats) {
29 | 					require("fs").writeFileSync(path.join(__dirname, "server", "stats.generated.json"), JSON.stringify(stats.toJson()));
30 | 				});
31 | 			}
32 | 		]
33 | 	},
34 | 	{
35 | 		// The configuration for the server-side rendering
36 | 		name: "server-side rendering",
37 | 		entry: "./server/page.js",
38 | 		target: "node",
39 | 		output: {
40 | 			path: assetsPath,
41 | 			filename: "../../server/page.generated.js",
42 | 			publicPath: publicPath,
43 | 			libraryTarget: "commonjs2"
44 | 		},
45 | 		externals: /^[a-z\-0-9]+$/,
46 | 		module: {
47 | 			loaders: commonLoaders.concat([
48 | 				{ test: /\.css$/,  loader: path.join(__dirname, "server", "style-collector") + "!css-loader" },
49 | 			])
50 | 		}
51 | 	}
52 | ];


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-webpack-server-side-example
 2 | 
 3 | Example of an react application with webpack including server-side rendering.
 4 | 
 5 | 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.
 6 | 
 7 | ## Overview
 8 | 
 9 | 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.
10 | 
11 | ## Features
12 | 
13 | * Same react code (`app/Application.js`) run on server and on client
14 | * In both cases the code is compiled with webpack
15 |   * Supports loaders i. e. file-loader for assets
16 | * The server-side compilation collects styles and include them in the pre-rendered HTML
17 |   * This avoids FOUC of the pre-rendered HTML
18 | * browser build includes a hash in url for caching
19 | 
20 | ## Usage
21 | 
22 | ``` text
23 | npm start
24 | ```
25 | 
26 | Run the 2 steps:
27 | 
28 | 1. Compile the browser bundle and the server-side bundle. It also stores stats from the browser bundle as json file.
29 | 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.
30 | 
31 | ### Production
32 | 
33 | ``` text
34 | npm run production
35 | ```
36 | 
37 | This compiles production versions for the browser and server-side bundles. It also minimizes javascript and css.
38 | 
39 | ## License
40 | 
41 | None. Don't copy the code, only use the idea.
42 | 
43 | Copyright 2014 Tobias Koppers


--------------------------------------------------------------------------------