redux to redux-server-rendering

Gemfile

@@ -4,7 +4,7 @@ gem 'react_on_rails', path: '../react_on_rails'
 
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
-gem 'rails', '4.2.5'
+gem 'rails', '4.2.5.1'
 # Use sqlite3 as the database for Active Record
 gem 'sqlite3'
 # Use SCSS for stylesheets
@@ -47,4 +47,7 @@ group :development do
   gem 'spring'
 end
 
+
+gem 'therubyracer', platforms: :ruby
+
 gem 'bootstrap-sass'

Gemfile.lock

@@ -11,36 +11,36 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    actionmailer (4.2.5)
-      actionpack (= 4.2.5)
-      actionview (= 4.2.5)
-      activejob (= 4.2.5)
+    actionmailer (4.2.5.1)
+      actionpack (= 4.2.5.1)
+      actionview (= 4.2.5.1)
+      activejob (= 4.2.5.1)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 1.0, >= 1.0.5)
-    actionpack (4.2.5)
-      actionview (= 4.2.5)
-      activesupport (= 4.2.5)
+    actionpack (4.2.5.1)
+      actionview (= 4.2.5.1)
+      activesupport (= 4.2.5.1)
       rack (~> 1.6)
       rack-test (~> 0.6.2)
       rails-dom-testing (~> 1.0, >= 1.0.5)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (4.2.5)
-      activesupport (= 4.2.5)
+    actionview (4.2.5.1)
+      activesupport (= 4.2.5.1)
       builder (~> 3.1)
       erubis (~> 2.7.0)
       rails-dom-testing (~> 1.0, >= 1.0.5)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    activejob (4.2.5)
-      activesupport (= 4.2.5)
+    activejob (4.2.5.1)
+      activesupport (= 4.2.5.1)
       globalid (>= 0.3.0)
-    activemodel (4.2.5)
-      activesupport (= 4.2.5)
+    activemodel (4.2.5.1)
+      activesupport (= 4.2.5.1)
       builder (~> 3.1)
-    activerecord (4.2.5)
-      activemodel (= 4.2.5)
-      activesupport (= 4.2.5)
+    activerecord (4.2.5.1)
+      activemodel (= 4.2.5.1)
+      activesupport (= 4.2.5.1)
       arel (~> 6.0)
-    activesupport (4.2.5)
+    activesupport (4.2.5.1)
       i18n (~> 0.7)
       json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
@@ -56,7 +56,7 @@ GEM
       autoprefixer-rails (>= 5.2.1)
       sass (>= 3.3.4)
     builder (3.2.2)
-    byebug (8.2.1)
+    byebug (8.2.2)
     coffee-rails (4.1.1)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0, < 5.1.x)
@@ -74,54 +74,57 @@ GEM
     globalid (0.3.6)
       activesupport (>= 4.1.0)
     i18n (0.7.0)
-    jbuilder (2.4.0)
+    jbuilder (2.4.1)
       activesupport (>= 3.0.0, < 5.1)
       multi_json (~> 1.2)
     jquery-rails (4.1.0)
       rails-dom-testing (~> 1.0)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
     json (1.8.3)
+    libv8 (3.16.14.13)
     loofah (2.0.3)
       nokogiri (>= 1.5.9)
     mail (2.6.3)
       mime-types (>= 1.16, < 3)
     mime-types (2.99)
     mini_portile2 (2.0.0)
-    minitest (5.8.3)
+    minitest (5.8.4)
     multi_json (1.11.2)
-    nokogiri (1.6.7.1)
+    nokogiri (1.6.7.2)
       mini_portile2 (~> 2.0.0.rc2)
     rack (1.6.4)
     rack-test (0.6.3)
       rack (>= 1.0)
-    rails (4.2.5)
-      actionmailer (= 4.2.5)
-      actionpack (= 4.2.5)
-      actionview (= 4.2.5)
-      activejob (= 4.2.5)
-      activemodel (= 4.2.5)
-      activerecord (= 4.2.5)
-      activesupport (= 4.2.5)
+    rails (4.2.5.1)
+      actionmailer (= 4.2.5.1)
+      actionpack (= 4.2.5.1)
+      actionview (= 4.2.5.1)
+      activejob (= 4.2.5.1)
+      activemodel (= 4.2.5.1)
+      activerecord (= 4.2.5.1)
+      activesupport (= 4.2.5.1)
       bundler (>= 1.3.0, < 2.0)
-      railties (= 4.2.5)
+      railties (= 4.2.5.1)
       sprockets-rails
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
     rails-dom-testing (1.0.7)
       activesupport (>= 4.2.0.beta, < 5.0)
       nokogiri (~> 1.6.0)
       rails-deprecated_sanitizer (>= 1.0.1)
-    rails-html-sanitizer (1.0.2)
+    rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
-    railties (4.2.5)
-      actionpack (= 4.2.5)
-      activesupport (= 4.2.5)
+    railties (4.2.5.1)
+      actionpack (= 4.2.5.1)
+      activesupport (= 4.2.5.1)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rainbow (2.1.0)
     rake (10.5.0)
-    rdoc (4.2.1)
+    rdoc (4.2.2)
+      json (~> 1.4)
+    ref (2.0.0)
     sass (3.4.21)
     sass-rails (5.0.4)
       railties (>= 4.0.0, < 5.0)
@@ -132,15 +135,18 @@ GEM
     sdoc (0.4.1)
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
-    spring (1.6.2)
+    spring (1.6.3)
     sprockets (3.5.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.0.0)
+    sprockets-rails (3.0.1)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
     sqlite3 (1.3.11)
+    therubyracer (0.12.2)
+      libv8 (~> 3.16.14.0)
+      ref
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (2.0.2)
@@ -151,7 +157,7 @@ GEM
     uglifier (2.7.2)
       execjs (>= 0.3.0)
       json (>= 1.8.0)
-    web-console (2.2.1)
+    web-console (2.3.0)
       activemodel (>= 4.0)
       binding_of_caller (>= 0.7.2)
       railties (>= 4.0)
@@ -166,12 +172,13 @@ DEPENDENCIES
   coffee-rails (~> 4.1.0)
   jbuilder (~> 2.0)
   jquery-rails
-  rails (= 4.2.5)
+  rails (= 4.2.5.1)
   react_on_rails!
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
   spring
   sqlite3
+  therubyracer
   turbolinks
   uglifier (>= 1.3.0)
   web-console (~> 2.0)

Procfile.dev

@@ -1,3 +1,3 @@
 web: rails s
 client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
-
+server: sh -c 'cd client && npm run build:dev:server'

Procfile.dev-hot

@@ -1,4 +1,4 @@
 web: rails s
 # TODO: MIGRATE from tutorial
 client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
-
+server: sh -c 'cd client && npm run build:dev:server'

app/views/hello_world/index.html.erb

@@ -1,4 +1,4 @@
-<h1 class="alert alert-info this-works">Client Rendering</h1>
+<h1 class="alert alert-info this-works">Server Rendering</h1>
 <%= react_component("HelloWorldApp",
                      props: @hello_world_props,
-                     prerender: false) %>
+                     prerender: true) %>

client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import createStore from '../store/helloWorldStore';
+import HelloWorld from '../containers/HelloWorld';
+
+// See documentation for https://github.com/reactjs/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+// This is how the server redux gets hydrated with data.
+export default (props) => {
+  const store = createStore(props);
+  const reactComponent = (
+    <Provider store={store}>
+      <HelloWorld />
+    </Provider>
+  );
+  return reactComponent;
+};

client/app/bundles/HelloWorld/startup/serverRegistration.jsx

@@ -0,0 +1,4 @@
+import ReactOnRails from 'react-on-rails';
+import HelloWorldApp from './HelloWorldAppServer';
+
+ReactOnRails.register({ HelloWorldApp });

client/webpack.server.rails.config.js

@@ -0,0 +1,39 @@
+// Webpack configuration for server bundle
+
+const webpack = require('webpack');
+const path = require('path');
+
+const devBuild = process.env.NODE_ENV !== 'production';
+const nodeEnv = devBuild ? 'development' : 'production';
+
+module.exports = {
+
+  // the project dir
+  context: __dirname,
+  entry: [
+    'babel-polyfill',
+    './app/bundles/HelloWorld/startup/serverRegistration',
+  ],
+  output: {
+    filename: 'server-bundle.js',
+    path: '../app/assets/javascripts/generated',
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    alias: {
+      lib: path.join(process.cwd(), 'app', 'lib'),
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(nodeEnv),
+      },
+    }),
+  ],
+  module: {
+    loaders: [
+      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
+    ],
+  },
+};

lib/tasks/assets.rake

@@ -15,6 +15,7 @@ namespace :assets do
   desc "Compile assets with webpack"
   task :webpack do
     sh "cd client && npm run build:client"
+    sh "cd client && npm run build:server"
   end
 
   task :clobber do