react_on_rails 12.4.0 → 12.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ab995812150b12121f864f9826f1467bc4fa557b7b63a50a253d222558cce33
-  data.tar.gz: 3b58277fba79aa38cec6b99782146758cfa5a294f571ed64630b0275ca8e512b
+  metadata.gz: 28e3d2a5f4910c2d0e1aec7d57f2b3d5073cc3317d65dc92d209608d6b305dcd
+  data.tar.gz: f3280cfe4e5e57aeb60da72928a45ff01df41890ee7ab8a018cb6b4fefef61c8
 SHA512:
-  metadata.gz: d4abb58e8412368943531aa9ce0c875d5332714b86877a85b0a7ddbf9cf85233df9fe91e6014929041ddf0bc25a0c40e58e0a51082838f9ef2e409aebf552e73
-  data.tar.gz: 4da65a8f4d3b55b5d0f68e4a639e3e931f5c3babd96012cac4b1822d9416fdecb2e0f32830f5ca6e1910770c3c450ce5549fa3715e07ecec8ddbe00476d85718
+  metadata.gz: 9ee357656b8bf3fd8367d6036269f8d844c2e6dc72a6133698930dcfae138bfc7312d44d383dcd8d8db20d67da2b110e177374d18322738619ff4de7d43080e4
+  data.tar.gz: 6a291c92e4d2c86d9b1b6c3bac60a2a4980c7b0c876227d53ad741c802f23a1a63c2bcb451b19a89f0c7e8eb583617d42cafc0810d5f3289866e23def0f8fb8c

data/CHANGELOG.md

@@ -17,6 +17,16 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
 
+### [12.5.0] - 2021-12-26
+
+#### Added
+- Added webpack configuration files as part of the generator and updated webpacker to version 6 [PR 1404](https://github.com/shakacode/react_on_rails/pull/1404) by [gscarv13](https://github.com/gscarv13).
+- Supports Rails 7.
+
+#### Changed
+- Changed logic of determining the usage of the default rails/webpacker webpack config or a custom command to only check if the config.build_production_command is defined. [PR 1402](https://github.com/shakacode/react_on_rails/pull/1402)by [justin808](https://github.com/justin808) and [gscarv13](https://github.com/gscarv13).
+- Minimimum required Ruby is 2.7 to match lastest rails/webpacker.
+
 ### [12.4.0] - 2021-09-22
 #### Added
 - ScoutAPM tracing support for server rendering [PR 1379](https://github.com/shakacode/react_on_rails/pull/1379) by [justin808](https://github.com/justin808).
@@ -974,7 +984,8 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.3.0...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.4.0...master
+[12.4.0]: https://github.com/shakacode/react_on_rails/compare/12.3.0...12.4.0
 [12.3.0]: https://github.com/shakacode/react_on_rails/compare/12.2.0...12.3.0
 [12.2.0]: https://github.com/shakacode/react_on_rails/compare/12.1.0...12.2.0
 [12.1.0]: https://github.com/shakacode/react_on_rails/compare/12.0.4...12.1.0

data/Gemfile.development_dependencies

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-gem "webpacker"
+gem "webpacker", "6.0.0.rc.6"
 gem "bootsnap", require: false
 gem "rails"
 gem "sqlite3"
@@ -20,6 +20,7 @@ gem "sdoc", group: :doc
 gem "sprockets"
 
 gem "amazing_print"
+
 gem "mini_racer"
 
 group :development, :test do

data/REACT-ON-RAILS-PRO-LICENSE

@@ -82,7 +82,7 @@ In no event will ShakaCode's liability exceed the Software license price as indi
 
 13.5 Indemnification. You agree to defend, indemnify, and hold harmless ShakaCode from and against any lawsuits, claims, losses, damages, fines and expenses (including attorneys' fees and costs) arising out of your use of the Software or breach of this Agreement.
 
-13.6 Governing Law. This Agreement is governed by the laws of the State of Oregon and the United States without regard to conflicts of laws provisions thereof, and without regard to the United Nations Convention on the International Sale of Goods or the Uniform Computer Information Transactions Act, as currently enacted by any jurisdiction or as may be codified or amended from time to time by any jurisdiction. The jurisdiction and venue for actions related to the subject matter hereof shall be the state of Oregon and United States federal courts located in Portland, Oregon, and both parties hereby submit to the personal jurisdiction of such courts.
+13.6 Governing Law. This Agreement is governed by the laws of the State of Hawaii and the United States without regard to conflicts of laws provisions thereof, and without regard to the United Nations Convention on the International Sale of Goods or the Uniform Computer Information Transactions Act, as currently enacted by any jurisdiction or as may be codified or amended from time to time by any jurisdiction. The jurisdiction and venue for actions related to the subject matter hereof shall be the state of Hawaii and United States federal courts located in Kahului, Hawaii, and both parties hereby submit to the personal jurisdiction of such courts.
 
 13.7 Attorneys’ Fees and Costs. The prevailing party in any action to enforce this Agreement will be entitled to recover its attorneys’ fees and costs in connection with such action.
 

data/README.md

@@ -11,6 +11,14 @@
 
 [![License](https://img.shields.io/badge/license-mit-green.svg)](LICENSE.md) [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master) [![](https://ruby-gem-downloads-badge.herokuapp.com/react_on_rails?type=total)](https://rubygems.org/gems/react_on_rails)
 
+# News
+* Project is updated to support Rails 7!
+* **React and Webpack with Ruby on Rails**: The current version of https://github.com/rails/webpacker will soon ship. While it won't be the default for Rails 7, it is not "deprecated." The core webpack configuration has become slimmer, allowing easier extension. If you want to get started today, use the master branch of  [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) with `gem "webpacker", "6.0.0.rc.6"` Any updates to get to v6 from this point forward should be simple.
+
+If you have time, please comment on Justin's final proposals for Webpacker v6: [webpacker/pulls/justin808](https://github.com/rails/webpacker/pulls/justin808).
+
+-----
+
 *These are the docs for React on Rails 12. To see the version 11 docs, [click here](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
 
 #### About
@@ -18,12 +26,12 @@ React on Rails integrates Rails with (server rendering of) Facebook's [React](ht
 
 This project is maintained by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on Ruby on Rails applications with React front-ends, often using TypeScript or ReScript (ReasonML). We also build React Native apps and Gatsby sites. See [our recent work](https://www.shakacode.com/recent-work) for examples of what we do. ShakaCode.com (HiChee.com) is [hiring developers that like working on open-source](https://www.shakacode.com/career/).
 
-Interested in optimizing your webpack setup for React on Rails including code
+Are you interested in optimizing your webpack setup for React on Rails including code
 splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and
  [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
 We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).
 
-Feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails, for more information.
+For more information, feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails.
 
 # Documentation
 
@@ -31,7 +39,7 @@ See the documentation at [shakacode.com/react-on-rails/docs](https://www.shakaco
 
 ## Project Objective
 
-To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem especially in regards to React Server-Side Rendering for better SEO and improved performance.
+To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem, especially regarding React Server-Side Rendering for better SEO and improved performance.
 
 ## Features and Why React on Rails?
 
@@ -49,6 +57,10 @@ See [Rails/Webpacker React Integration Options](https://www.shakacode.com/react-
 
 See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
 
+## Online demo
+
+A deployed version of the project `spec/dummy` which demonstrates several uses of `react_on_rails` is available on heroku [through this link](https://ror-spec-dummy.herokuapp.com/)
+
 ## ShakaCode Forum Premium Content
 _Requires creating a free account._
 
@@ -85,12 +97,12 @@ The following companies support this open source project, and ShakaCode uses the
 [![HoneyBadger](https://user-images.githubusercontent.com/1118459/114100696-63962a00-9860-11eb-8ac1-75ca02856d8e.png)](https://www.honeybadger.io/)
 [![StatusHero](https://user-images.githubusercontent.com/1118459/126868048-3fe64e54-4d6d-4066-9df2-8cf6fbaeb314.png)](https://statushero.com/)
 
-ShakaCode's favorite project tracking tool is [ClubHouse](https://clubhouse.io/). If you want to **try ClubHouse and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfoNeH). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/referral/). By using our [referral code](http://r.clbh.se/mvfoNeH) you'll be supporting ShakaCode and, thus, React on Rails!
+ShakaCode's favorite project tracking tool is [Shortcut](https://shortcut.com/). If you want to **try Shortcut and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfoNeH). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/referral/). By using our [referral code](http://r.clbh.se/mvfoNeH) you'll be supporting ShakaCode and, thus, React on Rails!
 
 Aloha and best wishes from Justin and the ShakaCode team!
 
 # Work with Us
-ShakaCode is **[hiring passionate software engineers](http://www.shakacode.com/career)** to work on our projects, including [HiChee](https://hichee.com).
+ShakaCode is **[hiring passionate software engineers](http://www.shakacode.com/career)** to work on our projects, including [HiChee](https://hichee.com)!
 
 # License
 

data/SUMMARY.md

@@ -1,5 +1,14 @@
 # Table of Contents
 
+Doccumentation for React on Rails has moved!
+
+Here is the new link:
+
+**[React on Rails Documentation Link](https://www.shakacode.com/react-on-rails/docs/)**
+
+-----
+
+## **OLD DOCS BELOW**
 + [Home](./README.md)
 
 ## **Basics**

data/docs/deployment/heroku-deployment.md

@@ -16,9 +16,20 @@ For more information, see [Using Multiple Buildpacks for an App](https://devcent
 
 ### rails/webpacker webpack configuration
 If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
-will automatically modify or create an assets:precompile task to build your assets.
+will automatically modify or create an assets:precompile task to build your assets. 
 
-### custom webpack configuration
-If you're a custom webpack configuration, and you **do not have the default
-`config/webpack/production.js`** file, then the `config/initializers/react_on_rails.rb`
-configuration `config.build_production_command` will be used.
+Alternatively, you can specify `config.build_production_command` to have
+react_on_rails invoke a command for you during assets:precompile.
+
+```
+config.build_production_command = "RAILS_ENV=production bin/webpack"
+```
+
+### Consider Removing Webpacker's clean task
+
+If you are deploying on Heroku, then you don't need Webpacker's clean task which
+might delete files that you need.
+
+```
+Rake::Task['webpacker:clean'].clear
+```

data/docs/guides/configuration.md

@@ -66,15 +66,14 @@ ReactOnRails.configure do |config|
   # defaults to "" (top level)
   config.node_modules_location = "client" # If using webpacker you should use "".
 
-  # 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.
-  # Note, if you want to use this command then you should remove the file
-  # config/webpack/production.js
-  # If that file exists, React on Rails thinks that you'll use the rails/webpacker bin/webpack compiler.
+  # If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
+  # will automatically modify or create an assets:precompile task to build your assets. If so,
+  # set this value to nil.  Alternatively, you can specify `config.build_production_command` 
+  # to have react_on_rails invoke a command for you during assets:precompile.
+  # The command is either a script or a module containing a class method `call`
+  # In this example, the module BuildProductionCommand would have a class method `call`.
   config.build_production_command = "RAILS_ENV=production bin/webpack"
 
-  # Alternatively, you can also specify a module containing a class method `call`
-  # In this example, the module BuildProductionCommand would have a class method `call`.
   # See bottom for an example of the BuildProductionCommand module.
   # config.build_production_command = BuildProductionCommand
   # If you wish to utilize ReactOnRailsPro production bundle caching logic, then use
@@ -86,7 +85,7 @@ ReactOnRails.configure do |config|
   # 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 "".
+  # If you are not using server rendering, you should set this to `nil`.
   # 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.

data/docs/guides/how-react-on-rails-works.md

@@ -35,7 +35,6 @@ For example, you might create a [Procfile.dev](https://github.com/shakacode/reac
 On production deployments that use asset precompilation, such as Heroku deployments, `rails/webpacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/webpack` in your app.
 
 However, if you want to run a custom command to run webpack to build your bundles, then you will:
-1. Ensure you do not have a `config/webpack/production.js` file
 1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/guides/configuration/)
 
 Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.

data/docs/guides/tutorial.md

@@ -4,7 +4,7 @@
 
 -----
 
-*Updated for Ruby 2.7.1, Rails 6.0.3.1, and React on Rails v12.0.0*
+*Updated for Ruby 2.7.1, Rails 6.0.3.1, React on Rails v12.5.0, and Webpacker v6*
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 
@@ -42,7 +42,7 @@ gem install foreman             # download and install Foreman
 ```
 
 ## Create a new Ruby on Rails App
-Then we need to create a fresh Rails application with webpacker react support as following.
+Then we need to create a fresh Rails application as following.
 
 First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
 
@@ -51,10 +51,9 @@ cd <directory where you want to create your new Rails app>
 
 # Any name you like for the rails app
 # Skip javascript so will add that next and get the current version
-rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
+rails new --skip-sprockets --skip-turbolinks --javascript=webpack test-react-on-rails
 
 cd test-react-on-rails
-bundle
 ```
 
 ## Add the webpacker and react_on_rails gems
@@ -63,22 +62,21 @@ of both the gem and npm package. In other words, don't use the `^` or `~` in the
 _Use the latest version for react_on_rails._
 
 ```
-gem 'react_on_rails', '12.0.4'         # prefer exact gem version to match npm version
+gem 'react_on_rails', '12.5.0'         # prefer exact gem version to match npm version
 ```
 
 Note: The latest released React On Rails version is considered stable. Please use the latest
 version to ensure you get all the security patches and the best support.
 
 ```bash
-bundle add webpacker                 
-bundle add react_on_rails --version=12.0.4 --strict
+bundle add webpacker --git=https://github.com/rails/webpacker.git
+bundle add react_on_rails --version=12.5.0 --strict
 ```
 
 ## Run the webpacker generator
 
-```
+```terminal
 bundle exec rails webpacker:install
-bundle exec rails webpacker:install:react
 ```
 
 Let's commit everything before installing React on Rails.
@@ -97,20 +95,24 @@ Install React on Rails: `rails generate react_on_rails:install`. You need to fir
 Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
 If you want the redux install: `rails generate react_on_rails:install --redux`
 
+The generator will add `mini_racer`'s latest version. If you're using linux & encounter issues installing `libv8`, here's [a common solution](https://github.com/rubyjs/mini_racer/issues/218).
+
 ```
 rails generate react_on_rails:install
 ```
 
-Then run server with a static client bundle. Static means that the bundle is saved in your
-public/webpack/packs directory.
+Enter `a` to replace all configuration files required by the project.
 
+Then run the server with one of the following options:
+
+## Running with HMR
 ```
 foreman start -f Procfile.dev
 ```
 
-## To run with the webpack-dev-server:
+## Running without HMR, statically creating the bundles
 ```
-foreman start -f Procfile.dev-hmr
+foreman start -f Procfile.dev-static
 ```
 
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
@@ -250,6 +252,8 @@ heroku open
 
 and you will see your live app and you can share this URL with your friends. Congrats!
 
+A deployed version of the project `spec/dummy` which demonstrates several uses of `react_on_rails` is available on heroku [through this link](https://ror-spec-dummy.herokuapp.com/)
+
 ## Turning on Server Rendering
 
 You can turn on server rendering by simply changing the `prerender` option to `true`:
@@ -312,7 +316,7 @@ mv app/javascript client
 
 ## Using HMR with the rails/webpacker setup
 
-Start the app using `foreman start -f Procfile.dev-hmr`.
+Start the app using `foreman start -f Procfile.dev`.
 
 When you change a JSX file and save, the browser will automatically refresh!
 

data/lib/generators/react_on_rails/base_generator.rb

@@ -33,7 +33,40 @@ module ReactOnRails
                         app/views/layouts/hello_world.html.erb
                         config/initializers/react_on_rails.rb
                         Procfile.dev
-                        Procfile.dev-hmr]
+                        Procfile.dev-static]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_js_bundle_files
+        base_path = "base/base/"
+        base_files = %w[app/javascript/packs/server-bundle.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_webpack_config
+        puts "Adding Webpack config"
+        base_path = "base/base"
+        base_files = %w[babel.config.js
+                        config/webpack/clientWebpackConfig.js
+                        config/webpack/commonWebpackConfig.js
+                        config/webpack/development.js
+                        config/webpack/production.js
+                        config/webpack/serverWebpackConfig.js
+                        config/webpack/webpackConfig.js]
+        config = {
+          message: "// The source code including full typescript support is available at:"
+        }
+        base_files.each do |file|
+          template("#{base_path}/#{file}.tt", file, config)
+        end
+      end
+
+      def copy_webpacker_config
+        puts "Adding Webpacker v6 config"
+        base_path = "base/base/"
+        base_files = %w[config/webpacker.yml]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -51,6 +84,16 @@ module ReactOnRails
           puts "Adding the lastest react-on-rails NPM module. Double check this is correct in package.json"
           run "yarn add react-on-rails --exact"
         end
+
+        puts "Adding React dependencies"
+        run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types \
+            babel-plugin-macros"
+
+        puts "Adding CSS handlers"
+        run "yarn add css-loader css-minimizer-webpack-plugin mini-css-extract-plugin style-loader"
+
+        puts "Adding dev dependencies"
+        run "yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh"
       end
 
       def append_to_spec_rails_helper
@@ -111,10 +154,10 @@ module ReactOnRails
             - Alternately, you may turn off compile in config/webpacker.yml and run the foreman
               command to start the rails server and run webpack in watch mode.
 
-                foreman start -f Procfile.dev
+                foreman start -f Procfile.dev-static
 
             - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
-              and bin/webpack-dev-server. Or use Procfile.dev-hmr.
+              and bin/webpack-dev-server. Or use Procfile.dev.
 
             - To server render, change this line app/views/hello_world/index.html.erb to
               `prerender: true` to see server rendering (right click on page and select "view source").

data/lib/generators/react_on_rails/generator_helper.rb

@@ -52,4 +52,8 @@ module GeneratorHelper
     empty_directory(parent_directories) unless dest_dir_exists?(parent_directories)
     copy_file source_file, destination_file
   end
+
+  def add_documentation_reference(message, source)
+    "#{message} \n#{source}"
+  end
 end

data/lib/generators/react_on_rails/templates/.eslintrc

@@ -1,5 +1,7 @@
 ---
-extends: eslint-config-shakacode
+extends: 
+  - eslint-config-shakacode
+  - prettier
 
 plugins:
   - react

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev

@@ -1,9 +1,5 @@
+# Procfile for development using HMR
 # You can run these commands in separate shells
-web: rails s -p 3000
-
-# Next line runs a watch process with webpack to compile the changed files.
-# When making frequent changes to client side assets, you will prefer building webpack assets
-# upon saving rather than when you refresh your browser page.
-# Note, if using React on Rails localization you will need to run
-# `bundle exec rake react_on_rails:locale` before you run bin/webpack
-client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'
+rails: bundle exec rails s -p 3000
+wp-client: HMR=true bin/webpack-dev-server
+wp-server: HMR=true SERVER_BUNDLE_ONLY=yes bin/webpack --watch

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static

@@ -0,0 +1,9 @@
+# You can run these commands in separate shells
+web: rails s -p 3000
+
+# Next line runs a watch process with webpack to compile the changed files.
+# When making frequent changes to client side assets, you will prefer building webpack assets
+# upon saving rather than when you refresh your browser page.
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/webpack
+webpack: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import style from './HelloWorld.module.css';
 
 const HelloWorld = (props) => {
   const [name, setName] = useState(props.name);
@@ -9,7 +10,7 @@ const HelloWorld = (props) => {
       <h3>Hello, {name}!</h3>
       <hr />
       <form>
-        <label htmlFor="name">
+        <label className={style.bright} htmlFor="name">
           Say hello to:
           <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
         </label>

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css

@@ -0,0 +1,4 @@
+.bright {
+    color: green;
+    font-weight: bold;
+}

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld';
+// This could be specialized for server rendering
+// For example, if using React-Router, we'd have the SSR setup here.
+
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+});

data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb

@@ -4,6 +4,7 @@
     <title>ReactOnRailsWithWebpacker</title>
     <%= csrf_meta_tags %>
     <%= javascript_pack_tag 'hello-world-bundle' %>
+    <%= stylesheet_pack_tag 'hello-world-bundle' %>
   </head>
 
   <body>

data/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt

@@ -0,0 +1,15 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js") %>
+
+const defaultConfigFunc = require('@rails/webpacker/package/babel/preset.js');
+
+module.exports = function (api) {
+  const resultConfig = defaultConfigFunc(api);
+
+  const changesOnDefault = {
+    plugins: [process.env.WEBPACK_SERVE && 'react-refresh/babel'].filter(Boolean),
+  };
+
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins];
+
+  return resultConfig;
+};

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -41,5 +41,5 @@ ReactOnRails.configure do |config|
   # different. You should have ONE server bundle which can create all of your server rendered
   # React components.
   #
-  config.server_bundle_js_file = "hello-world-bundle.js"
+  config.server_bundle_js_file = "server-bundle.js"
 end

data/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt

@@ -0,0 +1,17 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js") %>
+
+const commonWebpackConfig = require('./commonWebpackConfig');
+
+const configureClient = () => {
+  const clientConfig = commonWebpackConfig();
+
+  // server-bundle is special and should ONLY be built by the serverConfig
+  // In case this entry is not deleted, a very strange "window" not found
+  // error shows referring to window["webpackJsonp"]. That is because the
+  // client config is going to try to load chunks.
+  delete clientConfig.entry['server-bundle'];
+
+  return clientConfig;
+};
+
+module.exports = configureClient;

data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt

@@ -0,0 +1,15 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js") %>
+
+// Common configuration applying to client and server configuration
+const { webpackConfig: baseClientWebpackConfig, merge } = require('@rails/webpacker');
+
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+};
+
+// Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
+const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
+
+module.exports = commonWebpackConfig;

data/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt

@@ -0,0 +1,27 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js") %>
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const { devServer, inliningCss } = require('@rails/webpacker');
+
+const webpackConfig = require('./webpackConfig');
+
+const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
+  // plugins
+  if (inliningCss) {
+    // Note, when this is run, we're building the server and client bundles in separate processes.
+    // Thus, this plugin is not applied to the server bundle.
+
+    // eslint-disable-next-line global-require
+    const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+    clientWebpackConfig.plugins.push(
+      new ReactRefreshWebpackPlugin({
+        overlay: {
+          sockPort: devServer.port,
+        },
+      }),
+    );
+  }
+};
+
+module.exports = webpackConfig(developmentEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt

@@ -0,0 +1,11 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js") %>
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+const webpackConfig = require('./webpackConfig');
+
+const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
+  // place any code here that is for production only
+};
+
+module.exports = webpackConfig(productionEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt

@@ -0,0 +1,117 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js") %>
+
+const { merge, config } = require('@rails/webpacker');
+const commonWebpackConfig = require('./commonWebpackConfig');
+
+const webpack = require('webpack');
+
+const configureServer = () => {
+  // We need to use "merge" because the clientConfigObject, EVEN after running
+  // toWebpackConfig() is a mutable GLOBAL. Thus any changes, like modifying the
+  // entry value will result in changing the client config!
+  // Using webpack-merge into an empty object avoids this issue.
+  const serverWebpackConfig = commonWebpackConfig();
+
+  // We just want the single server bundle entry
+  const serverEntry = {
+    'server-bundle': serverWebpackConfig.entry['server-bundle'],
+  };
+
+  if (!serverEntry['server-bundle']) {
+    throw new Error(
+      "Create a pack with the file name 'server-bundle.js' containing all the server rendering files",
+    );
+  }
+
+  serverWebpackConfig.entry = serverEntry;
+
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  serverWebpackConfig.module.rules.forEach((loader) => {
+    if (loader.use && loader.use.filter) {
+      loader.use = loader.use.filter(
+        (item) => !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)),
+      );
+    }
+  });
+
+  // No splitting of chunks for a server bundle
+  serverWebpackConfig.optimization = {
+    minimize: false,
+  };
+  serverWebpackConfig.plugins.unshift(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
+
+  // Custom output for the server-bundle that matches the config in
+  // config/initializers/react_on_rails.rb
+  serverWebpackConfig.output = {
+    filename: 'server-bundle.js',
+    globalObject: 'this',
+    // If using the React on Rails Pro node server renderer, uncomment the next line
+    // libraryTarget: 'commonjs2',
+    path: config.outputPath,
+    publicPath: config.publicPath,
+    // https://webpack.js.org/configuration/output/#outputglobalobject
+  };
+
+  // Don't hash the server bundle b/c would conflict with the client manifest
+  // And no need for the MiniCssExtractPlugin
+  serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter(
+    (plugin) =>
+      plugin.constructor.name !== 'WebpackAssetsManifest' &&
+      plugin.constructor.name !== 'MiniCssExtractPlugin' &&
+      plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin',
+  );
+
+  // Configure loader rules for SSR
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  const rules = serverWebpackConfig.module.rules;
+  rules.forEach((rule) => {
+    if (Array.isArray(rule.use)) {
+      // remove the mini-css-extract-plugin and style-loader
+      rule.use = rule.use.filter((item) => {
+        let testValue;
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+        return !(testValue.match(/mini-css-extract-plugin/) || testValue === 'style-loader');
+      });
+      const cssLoader = rule.use.find((item) => {
+        let testValue;
+
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+
+        return testValue.includes('css-loader');
+      });
+      if (cssLoader && cssLoader.options) {
+        cssLoader.options.modules = { exportOnlyLocals: true };
+      }
+
+      // Skip writing image files during SSR by setting emitFile to false
+    } else if (rule.use && (rule.use.loader === 'url-loader' || rule.use.loader === 'file-loader')) {
+      rule.use.options.emitFile = false;
+    }
+  });
+
+  // eval works well for the SSR bundle because it's the fastest and shows
+  // lines in the server bundle which is good for debugging SSR
+  // The default of cheap-module-source-map is slow and provides poor info.
+  serverWebpackConfig.devtool = 'eval';
+
+  // If using the default 'web', then libraries like Emotion and loadable-components
+  // break with SSR. The fix is to use a node renderer and change the target.
+  // If using the React on Rails Pro node server renderer, uncomment the next line
+  // serverWebpackConfig.target = 'node'
+
+  return serverWebpackConfig;
+};
+
+module.exports = configureServer;

data/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt

@@ -0,0 +1,36 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpackConfig.js") %>
+
+const clientWebpackConfig = require('./clientWebpackConfig');
+const serverWebpackConfig = require('./serverWebpackConfig');
+
+const webpackConfig = (envSpecific) => {
+  const clientConfig = clientWebpackConfig();
+  const serverConfig = serverWebpackConfig();
+
+  if (envSpecific) {
+    envSpecific(clientConfig, serverConfig);
+  }
+
+  let result;
+  // For HMR, need to separate the the client and server webpack configurations
+  if (process.env.WEBPACK_SERVE || process.env.CLIENT_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the client bundles.');
+    result = clientConfig;
+  } else if (process.env.SERVER_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the server bundle.');
+    result = serverConfig;
+  } else {
+    // default is the standard client and server build
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating both client and server bundles.');
+    result = [clientConfig, serverConfig];
+  }
+
+  // To debug, uncomment next line and inspect "result"
+  // debugger
+  return result;
+};
+
+module.exports = webpackConfig;

data/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml

@@ -0,0 +1,62 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/webpacker
+  webpack_compile_output: true
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  additional_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+development:
+  <<: *default
+  # This is false since we're running `bin/webpack -w` in Procfile.dev-setic
+  compile: false
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
+    hmr: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    compress: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: [ 'localhost' ]
+    pretty: true
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    static:
+      watch:
+        ignored: '**/node_modules/**'
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import style from './HelloWorld.module.css';
 
 const HelloWorld = ({ name, updateName }) => (
   <div>
@@ -9,7 +10,7 @@ const HelloWorld = ({ name, updateName }) => (
     </h3>
     <hr />
     <form>
-      <label htmlFor="name">
+      <label className={style.bright} htmlFor="name">
         Say hello to:
         <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
       </label>

data/lib/react_on_rails/server_rendering_js_code.rb

@@ -18,6 +18,19 @@ module ReactOnRails
         react_component_name: nil,
         render_options: nil
       )
+
+        config_server_bundle_js = ReactOnRails.configuration.server_bundle_js_file
+
+        if render_options.prerender == true && config_server_bundle_js.blank?
+          msg = <<~MSG
+            The `prerender` option to allow Server Side Rendering is marked as true but the ReactOnRails configuration
+            for `server_bundle_js_file` is nil or not present in `config/initializers/react_on_rails.rb`.
+            Set `config.server_bundle_js_file` to your javascript bundle to allow server side rendering.
+            Read more at https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/
+          MSG
+          raise ReactOnRails::Error, msg
+        end
+
         js_code_renderer.render(props_string, rails_context, redux_stores, react_component_name, render_options)
       end
 

data/lib/react_on_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactOnRails
-  VERSION = "12.4.0"
+  VERSION = "12.5.0"
 end

data/lib/tasks/assets.rake

@@ -9,7 +9,7 @@ ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
 
 skip_react_on_rails_precompile = %w[no false n f].include?(ENV["REACT_ON_RAILS_PRECOMPILE"])
 
-if !skip_react_on_rails_precompile && !ReactOnRails::WebpackerUtils.webpacker_webpack_production_config_exists?
+if !skip_react_on_rails_precompile && ReactOnRails.configuration.build_production_command.present?
   # Ensure that rails/webpacker does not call bin/webpack if we're providing
   # the build command.
   ENV["WEBPACKER_PRECOMPILE"] = "false"
@@ -40,12 +40,10 @@ end
 # rubocop:disable Metrics/BlockLength
 namespace :react_on_rails do
   namespace :assets do
-    desc <<-DESC.strip_heredoc
-      Compile assets with webpack
-      Uses command defined with ReactOnRails.configuration.build_production_command
-      sh "#{ReactOnRails::Utils.prepend_cd_node_modules_directory('<ReactOnRails.configuration.build_production_command>')}"
-      Note: This command is not automatically added to assets:precompile if the rails/webpacker
-      configuration file config/webpack/production.js exists.
+    desc <<~DESC.strip_heredoc
+      If config.build_production_command is defined, this command is automatically
+      added to task assets:precompile and the regular webpacker compile will not run.
+      The defined command is either a script or a module with a method `call`.
     DESC
     task webpack: :locale do
       build_production_command = ReactOnRails.configuration.build_production_command
@@ -63,6 +61,7 @@ namespace :react_on_rails do
           exit!(1)
         end
       else
+        # Left in this warning message in case this rake task is run directly
         msg = <<~MSG
           React on Rails is aborting webpack compilation from task react_on_rails:assets:webpack
           because you do not have the `config.build_production_command` defined.

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {

data/rakelib/example_type.rb

@@ -52,7 +52,11 @@ module ReactOnRails
       attr_writer :rails_options
 
       def rails_options
-        @rails_options ||= "--skip-bundle --skip-spring --skip-git --skip-test-unit --skip-active-record"
+        @rails_options ||= if ReactOnRails::Utils.rails_version_less_than("7.0")
+                             "--skip-bundle --skip-spring --skip-git --skip-test-unit --skip-active-record -J"
+                           else
+                             "--skip-bundle --skip-spring --skip-git --skip-test-unit --skip-active-record -j webpack"
+                           end
       end
 
       %w[gen clobber npm_install build_webpack_bundles].each do |task_type|

data/rakelib/examples.rake

@@ -30,12 +30,17 @@ namespace :examples do # rubocop:disable Metrics/BlockLength
     desc "Generates #{example_type.name_pretty}"
     task example_type.gen_task_name_short => example_type.clobber_task_name do
       mkdir_p(example_type.dir)
-      example_type.rails_options += " --webpack" if Rails.version >= "5.1" && Rails.version < "6"
+      if Rails::VERSION::MAJOR < 6
+        example_type.rails_options += " --webpack"
+      elsif Rails::VERSION::MAJOR >= 7
+        example_type.rails_options += "--javascript=webpack"
+      end
       sh_in_dir(examples_dir, "rails new #{example_type.name} #{example_type.rails_options}")
       sh_in_dir(example_type.dir, "touch .gitignore")
+      copy_generator_webpacker_yml_to(example_type.dir)
+      sh_in_dir(example_type.dir, "bundle add webpacker --version 6.0.0.rc.6")
       sh_in_dir(example_type.dir, "rake webpacker:install")
       sh_in_dir(example_type.dir, "bundle binstubs --path=#{example_type.dir}/bin webpacker")
-      sh_in_dir(example_type.dir, "rake webpacker:install:react")
       append_to_gemfile(example_type.gemfile, example_type.required_gems)
       bundle_install_in(example_type.dir)
       sh_in_dir(example_type.dir, example_type.generator_shell_commands)

data/rakelib/release.rake

@@ -60,7 +60,7 @@ task :release, %i[gem_version dry_run tools_install] do |_t, args|
   # Will bump the yarn version, commit, tag the commit, push to repo, and release on yarn
   release_it_command = +"release-it"
   release_it_command << " #{npm_version}" unless npm_version.strip.empty?
-  release_it_command << " --ci --npm.publish --no-git.requireCleanWorkingDir"
+  release_it_command << " --npm.publish --no-git.requireCleanWorkingDir"
   release_it_command << " --dry-run --verbose" if is_dry_run
   sh_in_dir(gem_root, release_it_command)
 

data/rakelib/task_helpers.rb

@@ -12,6 +12,13 @@ module ReactOnRails
       File.join(gem_root, "gen-examples", "examples")
     end
 
+    # This method is used to prevent an error that when installing webpacker 6.0.0.rc.6
+    # without a previous config/webpacker.yml will throw and error
+    def copy_generator_webpacker_yml_to(destination)
+      webpacker_file = File.join(gem_root, "lib/generators/react_on_rails/templates/base/base/config/webpacker.yml")
+      sh %( cp #{webpacker_file} #{destination}/config/webpacker.yml )
+    end
+
     def dummy_app_dir
       File.join(gem_root, "spec/dummy")
     end

data/react_on_rails.gemspec

@@ -23,7 +23,7 @@ Gem::Specification.new do |s|
   s.executables   = s.files.grep(%r{^exe/}) { |f| File.basename(f) }
   s.require_paths = ["lib"]
 
-  s.required_ruby_version = ">= 2.5.0"
+  s.required_ruby_version = ">= 2.7.0"
 
   s.add_dependency "addressable"
   s.add_dependency "connection_pool"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 12.4.0
+  version: 12.5.0
 platform: ruby
 authors:
 - Justin Gordon
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2021-10-11 00:00:00.000000000 Z
+date: 2021-12-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: addressable
@@ -244,13 +244,24 @@ files:
 - lib/generators/react_on_rails/react_with_redux_generator.rb
 - lib/generators/react_on_rails/templates/.eslintrc
 - lib/generators/react_on_rails/templates/base/base/Procfile.dev
-- lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr
+- lib/generators/react_on_rails/templates/base/base/Procfile.dev-static
 - lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb
 - lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
+- lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css
+- lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
 - lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt
+- lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js
 - lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt
 - lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb
+- lib/generators/react_on_rails/templates/base/base/babel.config.js.tt
 - lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb
+- lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt
+- lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt
+- lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt
+- lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt
+- lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt
+- lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt
+- lib/generators/react_on_rails/templates/base/base/config/webpacker.yml
 - lib/generators/react_on_rails/templates/dev_tests/.eslintrc
 - lib/generators/react_on_rails/templates/dev_tests/.rspec
 - lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb
@@ -330,7 +341,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.5.0
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr

@@ -1,26 +0,0 @@
-# Procfile for development using HMR
-
-web: rails s -p 3000
-
-# Note, hot and live reloading don't work with the default generator setup on
-# top of the rails/webpacker Webpack config with server rendering.
-# If you have server rendering enabled (prerender is true), you either need to
-# a. Ensure that you have dev_server.hmr and dev_server.inline BOTH set to false,
-#    and you have this option in your config/initializers/react_on_rails.rb:
-#      config.same_bundle_for_client_and_server = true
-#    If you have either config/webpacker.yml option set to true, you'll see errors like
-#    "ReferenceError: window is not defined" (if hmr is true)
-#    "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
-# b. Skip using the webpack-dev-server. bin/webpack --watch is typically
-     fast enough.
-# c. See the React on Rails README for a link to documentation for how to setup
-#    SSR with HMR and React hot loading using the webpack-dev-server only for the
-#    client bundles and a static file for the server bundle.
-
-# Run the webpack-dev-server for client and maybe server files
-webpack-dev-server: bin/webpack-dev-server
-
-# Keep the JS fresh for server rendering. Remove if not server rendering.
-# Especially if you have not configured generation of a server bundle without a hash.
-# as that will conflict with the manifest created by the bin/webpack-dev-server
-# rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch