Step 2: trivial server-side rendering with Express

RUN: `npm run start` and go to `http://localhost:3000`.

- A little refactoring: move Hello component to separate file etc
- Render the same Hello component server-side with ReactDOMServer

Now we are rendering the same Hello component both on client and server:
with express server we pre-render the Hello component on the server, and
server the client with rendered html, and with webpack we continue to
bundle client.js into ES5 code that the browser would understand,
just as we did at previous step.

Author: dimaip

Hello.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Hello = React.createClass({
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+
+export default Hello;

index.js renamed to client.js

@@ -1,11 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-var Hello = React.createClass({
-  render: function() {
-    return <div>Hello {this.props.name}</div>;
-  }
-});
+import Hello from 'Hello';
 
 ReactDOM.render(
   <Hello name="World" />,

package.json

@@ -2,13 +2,14 @@
   "name": "server-side-rendering",
   "version": "0.0.1",
   "description": "The missing guide to server-side rendering",
-  "main": "index.js",
+  "main": "server.js",
   "scripts": {
-    "start": "webpack"
+    "start": "webpack && babel-node server.js"
   },
   "author": "Dmitri Pisarev",
   "license": "ISC",
   "dependencies": {
+    "express": "^4.13.4",
     "path": "^0.12.7",
     "react": "^0.14.8",
     "react-dom": "^0.14.8"

server.js

@@ -0,0 +1,27 @@
+import express from 'express';
+import fs from 'fs';
+import path from 'path';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import Hello from './Hello.js';
+
+function handleRender(req, res) {
+    const html = ReactDOMServer.renderToString(
+        <Hello name="World" />
+    );
+    fs.readFile('./index.html', 'utf8', function (err, file) {
+        if (err) {
+        return console.log(err);
+        }
+        const document = file.replace(/<div id="app"><\/div>/, `<div id="app">${html}</div>`);
+        res.send(document);
+    });
+}
+
+const app = express();
+// Serve built files with express static files middleware
+app.use('/built', express.static(path.join(__dirname, 'built')));
+// Serve normal requests with our handleRender function
+app.get('*', handleRender);
+app.listen(3000);
+console.log('=== Go to http://localhost:3000 ===');

webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 
 const config = {
-  entry: ['index.js'],
+  entry: ['client.js'],
   output: {
     path: path.join(__dirname, 'built/'),
     filename: 'index.js',