Bump react_on_rails gem version to 1.0.3

Add server-bundle.js to .gitignore
Add server webpack command to Procfile.dev
Create webpack.server.config.js for server side rendering.
Add react_on_rails config initializer file
Rename App.jsx to ServerApp.jsx to use for App server-side
Add clientGlobals.jsx entry point for client-side rendering
Add serverGlobals.jsx entry point for server-side rendering
Add ClientApp.jsx for client-side App

Author: dylangrafmyre

.gitignore

@@ -17,6 +17,8 @@
 /public/assets
 client-bundle.js
 client-bundle.js.map
+server-bundle.js
+server-bundle.js.map
 .env
 node_modules
 npm-debug.log

Gemfile

@@ -39,7 +39,8 @@ gem "rails-html-sanitizer"
 # Use Unicorn as the app server
 gem "unicorn"
 
-gem "react_on_rails", "~> 0.1.1"
+gem "react_on_rails", "~> 0.1.3"
+gem "therubyracer"
 
 gem "autoprefixer-rails"
 

Gemfile.lock

@@ -123,6 +123,7 @@ GEM
     kgio (2.9.3)
     launchy (2.4.3)
       addressable (~> 2.3)
+    libv8 (3.16.14.11)
     loofah (2.0.2)
       nokogiri (>= 1.5.9)
     mail (2.6.3)
@@ -180,9 +181,10 @@ GEM
     raindrops (0.15.0)
     rake (10.4.2)
     rdoc (4.2.0)
-    react_on_rails (0.1.1)
+    react_on_rails (0.1.3)
       execjs (~> 2.5)
       rails (~> 4.2)
+    ref (2.0.0)
     rest-client (1.8.0)
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 3.0)
@@ -252,6 +254,9 @@ GEM
     term-ansicolor (1.3.2)
       tins (~> 1.0)
     terminal-table (1.5.2)
+    therubyracer (0.12.2)
+      libv8 (~> 3.16.14.0)
+      ref
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (1.4.1)
@@ -307,7 +312,7 @@ DEPENDENCIES
   rails-html-sanitizer
   rails_12factor
   rainbow
-  react_on_rails (~> 0.1.1)
+  react_on_rails (~> 0.1.3)
   rspec-rails
   rubocop
   ruby-lint
@@ -317,6 +322,7 @@ DEPENDENCIES
   spring
   spring-commands-rspec
   sqlite3
+  therubyracer
   turbolinks
   uglifier (~> 2.7.2)
   unicorn

Procfile.dev

@@ -1,3 +1,4 @@
 web: rails s -p 4000
 client: sh -c 'cd client && $(npm bin)/webpack -w --config webpack.rails.config.js'
+server: sh -c 'cd client && $(npm bin)/webpack -w --config webpack.server.config.js'
 hot: sh -c 'cd client && node server.js'

app/views/pages/index.html.erb

@@ -16,4 +16,4 @@
   </li>
 </ul>
 <hr/>
-<%= react_component('App', {}, prerender: false) %>
+<%= react_component('App', {}, generator_function: true, prerender: true) %>

client/assets/javascripts/App.jsx renamed to client/assets/javascripts/ClientApp.jsx

@@ -13,7 +13,5 @@ const App = () => {
   return reactComponent;
 };
 
-window.App = App;
-
 // Export is needed for the hot reload server
 export default App;

client/assets/javascripts/ServerApp.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import CommentScreen from './components/CommentScreen';
+import CommentStore from './stores/CommentStore';
+
+const App = () => {
+  const reactComponent = (
+    <Provider store={CommentStore}>
+      {() => <CommentScreen />}
+    </Provider>
+  );
+  return reactComponent;
+};
+
+// Export is needed for the hot reload server
+export default App;

client/assets/javascripts/clientGlobals.jsx

@@ -0,0 +1,3 @@
+import App from './ClientApp';
+
+window.App = App;

client/assets/javascripts/serverGlobals.jsx

@@ -0,0 +1,7 @@
+// Example of React + Redux
+// Shows the mapping from the exported object to the name used by the server rendering.
+import App from './ServerApp';
+
+// We can use the node global object for exposing.
+// NodeJs: https://nodejs.org/api/globals.html#globals_global
+global.App = App;

client/webpack.common.config.js

@@ -6,7 +6,7 @@ module.exports = {
 
   // the project dir
   context: __dirname,
-  entry: ['jquery', 'jquery-ujs', './assets/javascripts/App'],
+  entry: ['jquery', 'jquery-ujs'],
 
   resolve: {
     root: [

client/webpack.rails.config.js

@@ -12,7 +12,7 @@ config.output = {
 };
 
 // You can add entry points specific to rails here
-config.entry.push('./scripts/rails_only');
+config.entry.push('./scripts/rails_only', './assets/javascripts/clientGlobals');
 
 // See webpack.common.config for adding modules common to both the webpack dev server and rails
 

client/webpack.server.config.js

@@ -0,0 +1,21 @@
+const config = require('./webpack.common.config');
+
+config.output = {
+  filename: 'server-bundle.js',
+  path: '../app/assets/javascripts/generated',
+
+  // CRITICAL for enabling Rails to find the globally exposed variables.
+  libaryTarget: 'this',
+};
+
+config.entry.push('./assets/javascripts/serverGlobals');
+
+config.module.loaders.push(
+
+      { loader: 'babel-loader' },
+
+      // require Resolve must go first
+      // 1. React must be exposed (BOILERPLATE)
+      { test: require.resolve('react'), loader: 'expose?React' }
+);
+module.exports = config;

config/initializers/react_on_rails.rb

@@ -0,0 +1,16 @@
+# Shown below are the defaults for configuration
+ReactOnRails.configure do |config|
+  # Client bundles are configured in application.js
+
+  # Server bundle is a single file for all server rendering of components.
+  # If you wish to use render_js in your views without any file, set this to "" to avoid warnings.
+  config.server_bundle_js_file = "app/assets/javascripts/generated/server-bundle.js" # This is the default
+
+  # Below options can be overriden by passing to the helper method.
+  config.prerender = true # default is false
+  config.generator_function = true # default is false, meaning that you expose ReactComponents directly
+  config.trace = Rails.env.development? # default is true for development, off otherwise
+
+  # For server rendering. This can be set to false so that server side messages are discarded.
+  config.replay_console = true # Default is true. Be cautious about turning this off.
+end