Add Express server at port 3001 to render components

The express server will take the requested path and serialized state
as input and will return the HTML representation as well as the state
embedded in script tags. You will want to use something like supervisor
to restart the server on component changes. Technically we could have
used Webpack to hotload the changes, but I couldn't figure it out

DevProcfile

@@ -1,2 +1,3 @@
 web: rails s
 webpack: webpack-dev-server --config app/assets/webpack.config.js --progress --inline --module-bind --hot
+node: supervisor -e node,js,coffee,jsx,cjsx app/assets/javascripts/component_render_server.js

README.md

@@ -23,6 +23,10 @@ We are going to set the barebones of the Flux architecture without thinking too
 
 The first step to server side rendering is to be able to deserialize data into the store for the client. This also avoids the inital request for data. React is also smart enough to not touch the DOM as the resulting HTML is identical.
 
+### 4. Add Server-Side Rendering
+
+We are going to use a simple express server which will take the 1. route and 2. serializedState as parameters and simply return the HTML.
+
 ### Not Adressing
 
 1. User Authentication

app/assets/javascripts/component_render_server.js

@@ -0,0 +1,28 @@
+var renderToString = require('enhanced-require')(module, {
+  resolve: {
+    extensions: ['', '.js', '.jsx', '.cjsx', '.coffee'],
+    modulesDirectories: ["node_modules", "javascripts"]
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js?$/, loaders: []},
+      { test: /\.jsx?$/, loaders: ['jsx-loader'] },
+      { test: /\.cjsx$/, loaders: ["react-hot", "coffee", "cjsx"]},
+      { test: /\.coffee$/, loader: "coffee"},
+      { test: /\.json$/, loader: "json-loader"}
+      ]
+  }
+})('render_to_string')
+
+var express = require('express')
+var app = express()
+
+app.use(require("body-parser").json());
+app.post('/', function (req, res) {
+  renderToString(req.body.path, req.body.serializedStoreState, function(s){
+    res.end(s)
+  });
+})
+
+var server = app.listen(3001)

app/assets/javascripts/render_to_string.cjsx

@@ -0,0 +1,19 @@
+React = require('react')
+Router = require('react-router')
+routes = require('./routes')
+
+Flux = require('flux')
+FluxComponent = require('flummox/component')
+
+renderToString = (route, serializedStoreState, callback) ->
+  flux = new Flux()
+  flux.deserialize(serializedStoreState)
+
+  Router.run routes, route, (Handler, state) ->
+    html = React.renderToString(<FluxComponent flux={flux} render={ => <Handler  />}></FluxComponent>)
+    embeddedStoreState = "<script>"
+    embeddedStoreState += "window.serializedStoreState = " + JSON.stringify(serializedStoreState)
+    embeddedStoreState += "</script>"
+    callback (html + embeddedStoreState)
+
+module.exports = renderToString

app/assets/package.json

@@ -20,6 +20,9 @@
     "react-router": "*",
     "immutable": "*",
     "flummox": "*",
-    "axios": "*"
+    "axios": "*",
+    "express": "^4.12.0",
+    "enhanced-require": "*",
+    "body-parser": "*"
   }
 }