Install react-on-rails

Gemfile

@@ -12,6 +12,7 @@ gem 'sass-rails', '~> 5.0'
 gem 'uglifier', '>= 1.3.0'
 gem 'webpacker'
 gem 'semantic-ui-sass'
+gem 'react_on_rails', '11.2.2'
 
 gem 'jbuilder', '~> 2.5'
 
@@ -45,3 +46,5 @@ group :test do
 end
 
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem 'mini_racer', platforms: :ruby

Gemfile.lock

@@ -66,6 +66,7 @@ GEM
       nokogiri (~> 1.8)
     coderay (1.1.2)
     concurrent-ruby (1.1.4)
+    connection_pool (2.2.2)
     crass (1.0.4)
     diff-lcs (1.3)
     domain_name (0.5.20180417)
@@ -93,6 +94,7 @@ GEM
     jbuilder (2.8.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
+    libv8 (6.7.288.46.1)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -111,6 +113,8 @@ GEM
     mimemagic (0.3.3)
     mini_mime (1.0.1)
     mini_portile2 (2.4.0)
+    mini_racer (0.2.4)
+      libv8 (>= 6.3)
     minitest (5.11.3)
     msgpack (1.2.4)
     multi_json (1.13.1)
@@ -157,10 +161,17 @@ GEM
       method_source
       rake (>= 0.8.7)
       thor (>= 0.19.0, < 2.0)
+    rainbow (3.0.0)
     rake (12.3.2)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)
       ffi (~> 1.0)
+    react_on_rails (11.2.2)
+      addressable
+      connection_pool
+      execjs (~> 2.5)
+      rails (>= 3.2)
+      rainbow (~> 3.0)
     regexp_parser (1.3.0)
     rest-client (2.0.2)
       http-cookie (>= 1.0.2, < 2.0)
@@ -251,11 +262,13 @@ DEPENDENCIES
   haml
   jbuilder (~> 2.5)
   listen (>= 3.0.5, < 3.2)
+  mini_racer
   pg
   pry
   puma (~> 3.11)
   rails (~> 5.2.2)
   rails-controller-testing
+  react_on_rails (= 11.2.2)
   rest-client
   rspec-rails
   sass-rails (~> 5.0)

app/javascript/packs/react-bundle.js

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

config/initializers/react_on_rails.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
+# for many more options.
+
+ReactOnRails.configure do |config|
+  # This configures the script to run to build the production assets by webpack. Set this to nil
+  # if you don't want react_on_rails building this file for you.
+  config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
+
+  ################################################################################
+  ################################################################################
+  # TEST CONFIGURATION OPTIONS
+  # Below options are used with the use of this test helper:
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  ################################################################################
+
+  # If you are using this in your spec_helper.rb (or rails_helper.rb):
+  #
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  #
+  # with rspec then this controls what yarn command is run
+  # to automatically refresh your webpack assets on every test run.
+  #
+  config.build_test_command = "RAILS_ENV=test bin/webpack"
+
+  ################################################################################
+  ################################################################################
+  # SERVER RENDERING OPTIONS
+  ################################################################################
+  # This is the file used for server rendering of React when using `(prerender: true)`
+  # If you are never using server rendering, you should set this to "".
+  # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
+  # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
+  # JavaScript execution instances which should handle any component requested.
+  #
+  # While you may configure this to be the same as your client bundle file, this file is typically
+  # different. You should have ONE server bundle which can create all of your server rendered
+  # React components.
+  #
+  config.server_bundle_js_file = "react-bundle.js"
+end

package.json

@@ -7,6 +7,7 @@
     "babel-preset-react": "^6.24.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-on-rails": "11.2.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "resolve-url-loader": "^3.0.0",

spec/rails_helper.rb

@@ -31,6 +31,10 @@ rescue ActiveRecord::PendingMigrationError => e
   exit 1
 end
 RSpec.configure do |config|
+  # Ensure that if we are running js tests, we are using latest webpack assets
+  # This will use the defaults of :js and :server_rendering meta tags
+  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+
   # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
   config.fixture_path = "#{::Rails.root}/spec/fixtures"
 

yarn.lock

@@ -2,6 +2,14 @@
 # yarn lockfile v1
 
 
+"@babel/runtime-corejs2@^7.0.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.2.0.tgz#5ccd722b72d2c18c6a7224b5751f4b9816b60ada"
+  integrity sha512-kPfmKoRI8Hpo5ZJGACWyrc9Eq1j3ZIUpUAQT2yH045OuYpccFJ9kYA/eErwzOM2jeBG1sC8XX1nl1EArtuM8tg==
+  dependencies:
+    core-js "^2.5.7"
+    regenerator-runtime "^0.12.0"
+
 "@babel/runtime@^7.1.2":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
@@ -1735,7 +1743,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.2.tgz#267988d7268323b349e20b4588211655f0e83944"
   integrity sha512-NdBPF/RVwPW6jr0NCILuyN9RiqLo2b1mddWHkUL+VnvcB7dzlnBJ1bXYntjpTGOgkZiiLWj2JxmOr7eGE3qK6g==
@@ -5811,6 +5819,13 @@ react-dom@^16.7.0:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+react-on-rails@11.2.2:
+  version "11.2.2"
+  resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-11.2.2.tgz#e5cc062e41832f548d9d40dfc2aebd586b932f95"
+  integrity sha512-ZTS69giZDxVxwnraFNKujHpzK9GO5be+ISyGw5v3rKs4VlLKJ7BTVDtT22Fn0iEMe6x817s/cwGwepkAEEwA9A==
+  dependencies:
+    "@babel/runtime-corejs2" "^7.0.0"
+
 react-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"