update react_on_rails to beta version (#475)

This PR demonstrates how to use the rails/webpacker bin/webpack
to call a custom webpack configuration for tests and production.

Author: hussainakram

.nvmrc

@@ -1 +1 @@
-11
+12

.ruby-version

@@ -1 +1 @@
-ruby-2.5.3
+ruby-2.7.1

.travis.yml

@@ -21,6 +21,7 @@ gemfile: Gemfile
 env:
   global:
     - RAILS_ENV=test
+    - NODE_ENV=test
     - DRIVER=selenium_chrome
     - CHROME_BIN=/usr/bin/google-chrome
     - USE_COVERALLS=TRUE
@@ -34,7 +35,7 @@ before_install:
 
 install:
   - travis_retry gem install bundler -v '<2' # Ruby 2.2 and Rails 3.2 & 4.2 depend on bundler 1.x.
-  - travis_retry nvm install 11.7.0
+  - travis_retry nvm install 12
   - node -v
   - travis_retry npm i -g yarn
   - travis_retry bundle install

Gemfile

@@ -3,7 +3,7 @@
 source "https://rubygems.org"
 ruby "2.7.1"
 
-gem "react_on_rails", "12.0.0-beta.1"
+gem "react_on_rails", github: "shakacode/react_on_rails", branch: "justin808/remove-precompile-rake"
 gem "webpacker"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
@@ -96,12 +96,12 @@ end
 group :test do
   gem "capybara", "2.18.0"
   gem "capybara-screenshot"
-  gem "chromedriver-helper"
   gem "coveralls", require: false
   gem "database_cleaner"
   gem "generator_spec"
   gem "launchy"
   gem "rails_best_practices"
   gem "rspec-rails", "3.7.2"
   gem "selenium-webdriver"
+  gem "webdrivers", "~> 4.0"
 end

Gemfile.lock

@@ -1,3 +1,16 @@
+GIT
+  remote: https://github.com/shakacode/react_on_rails.git
+  revision: 38403e66bba1c3fde7edd4fb46c7f7daaaa111a6
+  branch: justin808/remove-precompile-rake
+  specs:
+    react_on_rails (12.0.0.pre.beta.2)
+      addressable
+      connection_pool
+      execjs (~> 2.5)
+      rails (>= 3.2)
+      rainbow (~> 3.0)
+      webpacker (>= 4.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -44,8 +57,6 @@ GEM
       tzinfo (~> 1.1)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
-    archive-zip (0.12.0)
-      io-like (~> 0.3.0)
     arel (9.0.0)
     ast (2.4.1)
     autoprefixer-rails (9.7.6)
@@ -71,9 +82,6 @@ GEM
       capybara (>= 1.0, < 4)
       launchy
     childprocess (3.0.0)
-    chromedriver-helper (2.1.1)
-      archive-zip (~> 0.10)
-      nokogiri (~> 1.8)
     code_analyzer (0.5.1)
       sexp_processor
     coderay (1.1.3)
@@ -115,7 +123,6 @@ GEM
     i18n (1.8.3)
       concurrent-ruby (~> 1.0)
     interception (0.5)
-    io-like (0.3.1)
     jbuilder (2.10.0)
       activesupport (>= 5.0.0)
     json (2.3.0)
@@ -209,12 +216,6 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rdoc (6.2.1)
-    react_on_rails (12.0.0.pre.beta.1)
-      addressable
-      connection_pool
-      execjs (~> 2.5)
-      rails (>= 3.2)
-      rainbow (~> 3.0)
     redis (3.3.3)
     regexp_parser (1.7.1)
     require_all (3.0.0)
@@ -310,6 +311,10 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webdrivers (4.4.1)
+      nokogiri (~> 1.6)
+      rubyzip (>= 1.3.0)
+      selenium-webdriver (>= 3.0, < 4.0)
     webpacker (5.1.1)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
@@ -332,7 +337,6 @@ DEPENDENCIES
   bundler-audit
   capybara (= 2.18.0)
   capybara-screenshot
-  chromedriver-helper
   coffee-rails
   coveralls
   database_cleaner
@@ -355,7 +359,7 @@ DEPENDENCIES
   rails-html-sanitizer
   rails_best_practices
   rainbow
-  react_on_rails (= 12.0.0.pre.beta.1)
+  react_on_rails!
   redis (= 3.3.3)
   rspec-rails (= 3.7.2)
   rubocop
@@ -368,6 +372,7 @@ DEPENDENCIES
   spring-commands-rspec
   uglifier
   web-console
+  webdrivers (~> 4.0)
   webpacker
 
 RUBY VERSION

bin/webpack

@@ -0,0 +1,17 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+require "webpacker"
+require "webpacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+
+puts "bin/webpack is running #{APP_ROOT}/bin/webpack.sh"
+exec "#{APP_ROOT}/bin/webpack.sh"

bin/webpack.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+__root="$(dirname $(dirname $(realpath $0)))"
+cd $__root
+
+# echo BEFORE
+# echo RAILS_ENV is ${RAILS_ENV:-UNDEFINED}
+# echo NODE_ENV is ${NODE_ENV:-UNDEFINED}
+
+# From default for bin/webpack from @rails/webpacker
+# ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+# ENV["NODE_ENV"]  ||= "development"
+
+RAILS_ENV=${RAILS_ENV:-${RACK_ENV:-development}}
+NODE_ENV=${NODE_ENV:-development}
+
+echo Running $0
+echo RAILS_ENV is $RAILS_ENV, NODE_ENV is $NODE_ENV
+
+
+#if [[ $RAILS_ENV = "production" ]] ; then
+#  yarn run build:production
+#fi
+
+#if [[ $RAILS_ENV = "test" ]] ; then
+#  yarn run build:test
+#fi
+
+bundle exec rake react_on_rails:locale
+
+# In case you have your build scripts in the /client subdirectory
+cd client
+
+case $NODE_ENV in
+  test)
+#    rm -rf public/webpack/development || true
+    yarn run build:test "$@"
+    ;;
+  production)
+    yarn run build:production "$@"
+    ;;
+  *)
+    yarn run build:dev "$@"
+esac

client/package.json

@@ -4,7 +4,7 @@
   "description": "Code from the React Webpack tutorial.",
   "main": "server-express.js",
   "engines": {
-    "node": "^7.8.0 || ^8.0.0 || ^9.2.0 || ^10.0.0 || ^11.0.0",
+    "node": "12",
     "yarn": "^1.0.0"
   },
   "repository": {
@@ -31,6 +31,7 @@
     "build:production:client": "NODE_ENV=production webpack -p --config webpack.client.rails.build.config.js",
     "build:production:server": "NODE_ENV=production webpack -p --config webpack.server.rails.build.config.js",
     "build:client": "webpack --config webpack.client.rails.build.config.js",
+    "build:dev": "yarn run build:client && yarn run build:server",
     "build:dev:client": "NODE_ENV=development webpack -w --config webpack.client.rails.build.config.js",
     "build:dev:server": "NODE_ENV=development webpack -w --config webpack.server.rails.build.config.js",
     "build:server": "webpack --config webpack.server.rails.build.config.js",
@@ -116,7 +117,7 @@
     "pug": "^2.0.0-rc.4",
     "react-transform-hmr": "^1.0.4",
     "regenerator-runtime": "^0.12.1",
-    "sleep": "^5.1.1",
+    "sleep": "^6.2.0",
     "webpack-dev-server": "^2.9.4"
   },
   "jest": {

client/yarn.lock

@@ -6086,7 +6086,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-nan@>=2.12.1, nan@^2.12.1, nan@^2.13.2:
+nan@^2.12.1, nan@^2.13.2:
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
@@ -8333,12 +8333,12 @@ slash@^1.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
   integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
 
-sleep@^5.1.1:
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/sleep/-/sleep-5.2.4.tgz#d1922209f61a1f29bc910495d406e3697dd730ec"
-  integrity sha512-SoltvxayTifWOgOGD6CTh+djcp5TaOa/zdbaA38wEH1ahF2azmiLOh8CPt6ExHf0pAJAsA9OCHTS7zK24Ym4yA==
+sleep@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/sleep/-/sleep-6.2.0.tgz#88029df49529b8aa3ea5b5a510d44921101579e5"
+  integrity sha512-W4Rpfx82IGEa3lMQQPBbew0lvb0u3WY5geYzeVmIvNuc/y3YUcx2c02zZBOk+R8E318KAtYU/Ee5tqZwrKqZHg==
   dependencies:
-    nan ">=2.12.1"
+    nan "^2.13.2"
 
 [email protected]:
   version "1.0.0"

config/initializers/react_on_rails.rb

@@ -1,7 +1,5 @@
 # Shown below are the defaults for configuration
 ReactOnRails.configure do |config|
-  config.node_modules_location = "client"
-
   # Define the files for we need to check for webpack compilation when running tests
   config.webpack_generated_files = %w[ app-bundle.js vendor-bundle.js app-bundle.css
                                        vendor-bundle.css server-bundle.js ]
@@ -12,15 +10,6 @@
   # not affect performance.
   config.server_bundle_js_file = "server-bundle.js"
 
-  # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  # with rspec then this controls what npm command is run
-  # to automatically refresh your webpack assets on every test run.
-  config.build_test_command = "yarn run build:test"
-
-  # 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 = "yarn run build:production"
-
   ################################################################################
   # CLIENT RENDERING OPTIONS
   # Below options can be overriden by passing options to the react_on_rails

config/webpacker.yml

@@ -9,14 +9,16 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
-  # Important to set this to false if not using the webpacker webpack setup
   compile: false
 
+  compile_output: true
+
   # default to building the extracted CSS file
   extract_css: true
 
 development:
   <<: *default
+  compile: true
 
   dev_server:
     host: localhost
@@ -28,6 +30,7 @@ development:
 
 test:
   <<: *default
+  compile: true
 
   # Compile test packs to a separate directory
   public_output_path: webpack-test

package.json

@@ -4,24 +4,24 @@
   "description": "ShakaCode's example of React on Rails plus React Native",
   "main": "server-express.js",
   "engines": {
-    "node": "^7.8.0 || ^8.0.0 || ^9.2.0 || ^10.0.0 || ^11.0.0",
+    "node": "12",
     "yarn": "^1.0.0"
   },
   "scripts": {
     "postinstall": "cd client && yarn install",
     "test": "rspec && yarn run test:client && yarn run lint",
-    "test:client": "(cd client && yarn run --silent test)",
-    "lint": "(cd client && yarn run --silent lint)",
+    "test:client": "(cd client && yarn run  test)",
+    "lint": "(cd client && yarn run  lint)",
     "build:clean": "rm app/assets/webpack/*",
-    "build:production": "(cd client && yarn run --silent build:production)",
-    "build:production:client": "(cd client && yarn run --silent build:production:client)",
-    "build:production:server": "(cd client && yarn run --silent build:production:server)",
-    "build:client": "(cd client && yarn run --silent build:client)",
-    "build:server": "(cd client && yarn run --silent build:server)",
-    "build:dev:client": "(cd client && yarn run --silent build:dev:client)",
-    "build:dev:server": "(cd client && yarn run --silent build:dev:server)",
+    "build:production": "(cd client && yarn run  build:production)",
+    "build:production:client": "(cd client && yarn run  build:production:client)",
+    "build:production:server": "(cd client && yarn run  build:production:server)",
+    "build:client": "(cd client && yarn run  build:client)",
+    "build:server": "(cd client && yarn run  build:server)",
+    "build:dev:client": "(cd client && yarn run build:dev:client)",
+    "build:dev:server": "(cd client && yarn run build:dev:server)",
     "hot-assets": "(cd client && yarn run hot-assets)",
-    "start": "(cd client && yarn run --silent start)"
+    "start": "(cd client && yarn run  start)"
   },
   "repository": {
     "url": "https://github.com/shakacode/react-webpack-rails-tutorial.git",

spec/rails_helper.rb

@@ -1,5 +1,6 @@
 # This file is copied to spec/ when you run "rails generate rspec:install"
 ENV["RAILS_ENV"] ||= "test"
+ENV["NODE_ENV"] ||= "test"
 require "coveralls"
 Coveralls.wear!("rails") # must occur before any of your application code is required
 require "spec_helper"
@@ -8,6 +9,7 @@
 require "rspec/rails"
 require "capybara/rspec"
 require "capybara-screenshot/rspec"
+require "webdrivers"
 
 ## Add additional requires below this line. Rails is not loaded until this point!
 
@@ -35,12 +37,6 @@
 Dir[Rails.root.join("spec", "support", "**", "*.rb")].each { |f| require f }
 
 RSpec.configure do |config|
-  # Ensure that if we are running js tests, we are using latest webpack assets
-  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config, :requires_webpack_assets)
-  config.define_derived_metadata(file_path: %r{spec/(system|requests)}) do |metadata|
-    metadata[:requires_webpack_assets] = true
-  end
-
   # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
   config.fixture_path = "#{::Rails.root}/spec/fixtures"