react_on_rails 13.3.0 → 13.4.0

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

@@ -1,8 +1,8 @@
-# How React on Rails Works (with rails/webpacker)
+# How React on Rails Works (with Shakapcker)
 
 *Note, older versions of React on Rails pushed the Webpack bundles through the Asset Pipeline. This older method has *many* disadvantages, such as broken sourcemaps, performance issues, etc. If you need help migrating to the current way of bypassing the Asset Pipeline, [email Justin](mailto:justin@shakacode.com).*
 
-Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [rails/webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly configuring your Webpack output. You will either use the standard Webpack configuration (*recommended*) or the `rails/webpacker` setup for Webpack.
+Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [Shakapacker](https://github.com/shakacode/shakapacker) provides view helpers to access the Webpack-generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly configuring your Webpack output. You will either use the standard Webpack configuration (*recommended*) or the `shakapacker` setup for Webpack.
 
 Ensure these generated bundle files are in your `.gitignore`, as you never want to add the large compiled bundles to git.
 
@@ -14,7 +14,7 @@ Optionally, you can also initialize a Redux store with the view or controller he
 
 In most cases, you should use the `prerender: false` (default behavior) with the provided `react_component` helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
 
-Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
+Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. If you want to maximize the performance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
 
 ## HTML Source Code
 
@@ -22,17 +22,17 @@ If you open the HTML source of any web page using React on Rails, you'll see the
 
 1. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component. If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
 1. A script tag containing the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads, using this data to build and initialize your React components.
-1. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server side logs can be configured only to be sent to the server logs.
+1. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server-side logs can be configured only to be sent to the server logs.
 
 You can see all this on the source for [reactrails.com](https://www.reactrails.com/)
 
 ## Building the Bundles
 
-Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Alternately, the `rails/webpacker` library also can ensure that your bundles are built.
+Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Alternatively, the `shakapacker` library also can ensure that your bundles are built.
 
 For example, you might create a [Procfile.dev](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/Procfile.dev).
 
-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/webpacker` in your app.
+On production deployments that use asset precompilation, such as Heroku deployments, `shakapacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/shakapacker` in your app.
 
 However, if you want to run a custom command to run webpack to build your bundles, then you will:
 1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/guides/configuration/)

data/docs/guides/how-to-conditionally-server-render-based-on-device-type.md

@@ -7,6 +7,7 @@ However, sometimes we want to have layouts sufficiently different that we can't
 Here's an example:
 
 ## config/initializers/react_on_rails.rb
+
 ```ruby
 module RenderingExtension
   # Return a Hash that contains custom values from the view context that will get passed to
@@ -34,6 +35,6 @@ ReactOnRails.configure do |config|
 end
 ```
 
-Note, full details of the React on Rails confguration are [here in docs/basics/configuration.md](https://shakacode.com/react-on-rails/docs/guides/configuration/).
+Note, full details of the React on Rails configuration are [here in docs/basics/configuration.md](https://shakacode.com/react-on-rails/docs/guides/configuration/).
 
 See the doc file [docs/basics/generator-functions-and-railscontext.md](https://shakacode.com/react-on-rails/docs/guides/generator-functions-and-railscontext/#rails-context) for how your client-side code uses the device information

data/docs/guides/installation-into-an-existing-rails-app.md

@@ -7,21 +7,21 @@
 1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `package.json` file.
 
    ```ruby
-   gem "react_on_rails", "13.1.0" # Use the latest and the exact version
-   gem "shakapacker", "6.5.4"
+   gem "shakapacker", "7.0.1"     # Use the latest and the exact version
+   gem "react_on_rails", "13.3.1" # Use the latest and the exact version
    ```
 
    Or use `bundle add`:
 
    ```bash
-   bundle add react_on_rails --version=13.1.0 --strict
-   bundle add shakapacker --strict
+   bundle add shakapacker --version=7.0.1 --strict
+   bundle add react_on_rails --version=13.3.1 --strict
    ```
 
-2. Run the following 2 commands to install Webpacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
+2. Run the following 2 commands to install Shakapacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install Webpacker with React per the instructions [here](https://github.com/rails/webpacker).
 
    ```bash
-   rails webpacker:install
+   rails shakapacker:install
    ```
 
 3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
@@ -37,14 +37,16 @@
    ```bash
    rails generate react_on_rails:install --help
    ```
-5. Ensure that you have `overmind` or `foreman` installed
+5. Ensure that you have `overmind` or `foreman` installed.
+
+   Note: `foreman` should be installed on the system not on your project. [Read more](https://github.com/ddollar/foreman/wiki/Don't-Bundle-Foreman)
 
 6. Start your Rails server:
 
    ```bash
    ./bin/dev
    ```
-   Note: `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example this is already set.
+   Note: `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example, this is already set.
 
 7. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world).
 

data/docs/guides/rails-webpacker-react-integration-options.md

@@ -5,7 +5,7 @@ have your app make a second round trip to the Rails server to get initialization
 
 **Server-Side Rendering (SSR)** results in Rails rendering HTML for your React components. The main reasons to use SSR are better SEO and pages display more quickly.
 
-These gems provide advanced integration of React with [rails/webpacker](https://github.com/rails/webpacker):
+These gems provide advanced integration of React with [shakacode/shakapacker](https://github.com/shakacode/shakapacker):
 
 | Gem | Props Hydration | Server-Side-Rendering (SSR) | SSR with HMR | SSR with React-Router | SSR with Code Splitting | Node SSR |
 | --- | --------------- | --- | --------------------- | ----------------------| ------------------------|----|
@@ -56,12 +56,42 @@ document.addEventListener('DOMContentLoaded', () => {
 
 ----
 
+## Suppress warning related to Can't resolve 'react-dom/client' in React < 18
+
+You may see a warning like this when building a Webpack bundle using any version of React below 18:
+
+```
+Module not found: Error: Can't resolve 'react-dom/client' in ....
+```
+
+It can be safely [suppressed](https://webpack.js.org/configuration/other-options/#ignorewarnings) in your Webpack configuration. The following is an example of this suppression in `config/webpack/commonWebpackConfig.js`:
+
+```js
+const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');
+
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+};
+
+const ignoreWarningsConfig = {
+  ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
+};
+
+const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions, ignoreWarningsConfig);
+
+module.exports = commonWebpackConfig;
+```
+
+----
+
 ## HMR and React Hot Reloading
 
 Before turning HMR on, consider upgrading to the latest stable gems and packages:
-https://github.com/rails/webpacker#upgrading
+https://github.com/shakacode/shakapacker#upgrading
 
-Configure `config/webpacker.yml` file:
+Configure `config/shakapacker.yml` file:
 
 ```yaml
 development:
@@ -71,7 +101,7 @@ development:
     inline: true
 ```
 
-This basic configuration alone will have HMR working with the default webpacker setup. However, a code save will trigger a full page refresh each time you save a file.
+This basic configuration alone will have HMR working with the default Shakapacker setup. However, a code save will trigger a full page refresh each time you save a file.
 
 Webpack's HMR allows the replacement of modules for React in-place without reloading the browser. To do this, you have two options:
 

data/docs/guides/react-on-rails-overview.md

@@ -6,15 +6,13 @@ React on Rails integrates Rails with (server rendering of) Facebook's [React](ht
 
 # 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 [**Shakapacker**](https://github.com/shakacode/shakapacker) gem especially in regards to React Server-Side Rendering for better SEO and improved performance.
 
 # Features and Why React on Rails?
 
-Given that [`rails/webpacker`](https://github.com/rails/webpacker/) gem already provides basic React integration, why would you use "React on Rails"?
-
 1. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
-1. Tight integration with [rails/webpacker](https://github.com/rails/webpacker).
-1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `rails/webpacker`.
+1. Tight integration with [shakacode/shakapacker](https://github.com/shakacode/shakapacker).
+1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `shakacode/shakapacker`.
 1. Support for HMR for a great developer experience.
 1. Supports latest versions of React with hooks.
 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration including server-side-rendering.
@@ -23,8 +21,9 @@ Given that [`rails/webpacker`](https://github.com/rails/webpacker/) gem already
 1. [ReScript (Reason ML) Support](https://github.com/shakacode/reason-react-on-rails-example).
 
 See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
+
 ----
 
 ## Prerequisites
-
-Ruby on Rails >=5 and rails/webpacker 4.2+.
+- Ruby on Rails >=5
+- Shakapacker 6.5.1+.

data/docs/guides/rspec-configuration.md

@@ -1,29 +1,29 @@
 # RSpec Configuration
 _Click [here for minitest](https://www.shakacode.com/react-on-rails/docs/guides/minitest-configuration/)_
 
-# If your webpack configurations correspond to rails/webpacker's default setup
+# If your webpack configurations correspond to Shakapacker's default setup
 If you're able to configure your webpack configuration to be run by having your webpack configuration
 returned by the files in `/config/webpack`, then you have 2 options to ensure that your files are
 compiled by webpack before running tests and during production deployment:
 
-1. **Use rails/webpacker's compile option**: Configure your `config/webpacker.yml` so that `compile: true` is for `test` and `production`
-   environments. Ensure that your `source_path` is correct, or else `rails/webpacker` won't correctly
+1. **Use Shakapacker's compile option**: Configure your `config/shakapacker.yml` so that `compile: true` is for `test` and `production`
+   environments. Ensure that your `source_path` is correct, or else `Shakapacker` won't correctly
    detect changes.
 2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
 
 ```yml
-  config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/webpacker"
+  config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/shakapacker"
 ```
 
-Which should you use? If you're already using the `rails/webpacker` way to configure webpack, then
-you can keep things simple and use the `rails/webpacker` options.
+Which should you use? If you're already using the `Shakapacker` way to configure webpack, then
+you can keep things simple and use the `Shakapacker` options.
 
 # Checking for stale assets using React on Rails
 
 Because you will probably want to run RSpec tests that rely on compiled webpack assets (typically, your integration/feature specs where `js: true`), you will want to ensure you don't accidentally run tests on missing or stale webpack assets. If you did use stale Webpack assets, you will get invalid test results as your tests do not use the very latest JavaScript code.
 
-As mentioned above, you can configure `compile: true` in `config/webpacker.yml` _if_ you've got configuration for
-your webpack in the standard `rails/webpacker` spot of `config/webpack/<NODE_ENV>.js`
+As mentioned above, you can configure `compile: true` in `config/shakapacker.yml` _if_ you've got configuration for
+your webpack in the standard `Shakapacker` spot of `config/webpack/<NODE_ENV>.js`
 
 ReactOnRails also provides a helper method called `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument. See file [lib/react_on_rails/test_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/test_helper.rb) for more details. You can customize this to your particular needs by replacing any of the default components used by `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`.
 
@@ -44,13 +44,13 @@ If you are using Webpack to build CSS assets, you should do something like this
 ```
 
 Please take note of the following:
-- If you are using Webpacker, be **SURE** to configure the `source_path` in your `config/webpacker.yml` unless you are using the defaults for webpacker.
+- If you are using Shakapacker, be **SURE** to configure the `source_path` in your `config/shakapacker.yml` unless you are using the defaults for Shakapacker.
 
-- This utility uses your `build_test_command` to build the static generated files. This command **must not** include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles. If you are using webpacker, the default value will come from the `config/webpacker.yml` value for the `public_output_path` and the `source_path`
+- This utility uses your `build_test_command` to build the static generated files. This command **must not** include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles. If you are using Shakapacker, the default value will come from the `config/shakapacker.yml` value for the `public_output_path` and the `source_path`
 
 - If you add an older file to your source files, that is already older than the produced output files, no new recompilation is done. The solution to this issue is to clear out your directory of webpack generated files when adding new source files that may have older dates.
 
-- By default, the webpack processes look in the webpack generated files folder, configured via the `config/webpacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets.
+- By default, the webpack processes look in the webpack generated files folder, configured via the `config/shakapacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets.
 
 The following `config/react_on_rails.rb` settings **must** match your setup:
 ```ruby

data/docs/guides/tutorial.md

@@ -4,7 +4,7 @@ _Also see the example repo of [React on Rails Tutorial With SSR, HMR fast refres
 
 -----
 
-*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v6*
+*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v7*
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 
@@ -12,7 +12,7 @@ After finishing this tutorial you will get an application that can do the follow
 
 ![example](https://cloud.githubusercontent.com/assets/371302/17368567/111cc722-596b-11e6-9b72-ac5967a60e42.gif)
 
-You can find here:
+You can find it here:
 * [Source code for this app in PR, using the --redux option](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/17) and [for Heroku](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/18).
 * [Live on Heroku](https://react-on-rails-redux-gen-8-0-0.herokuapp.com/)
 
@@ -21,42 +21,56 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 * https://rubygems.org/gems/react_on_rails
 * https://www.npmjs.com/package/react-on-rails
 
+# Table of Content:
+- [Installation](#installation)
+  - [Setting up your environment](#setting-up-your-environment)
+  - [Create a new Ruby on Rails App](#create-a-new-ruby-on-rails-app)
+  - [Add the Shakapacker and react_on_rails gems](#add-the-shakapacker-and-react_on_rails-gems)
+  - [Run the Shakapacker generator](#run-the-shakapacker-generator)
+  - [Run the React on Rails Generator](#run-the-react-on-rails-generator)
+  - [Setting up your environment variables](#setting-up-your-environment-variables)
+  - [Running the app](#running-the-app)
+- [HMR vs. React Hot Reloading](#hmr-vs-react-hot-reloading)
+- [Deploying to Heroku](#deploying-to-heroku)
+  - [Create Your Heroku App](#create-your-heroku-app)
+  - [Swap out sqlite for postgres](#swap-out-sqlite-for-postgres)
+- [Other features](#other-features)
+  - [Turning on Server Rendering](#turning-on-server-rendering)
+  - [Moving from the Rails default `/app/javascript` to the recommended `/client` structure](#moving-from-the-rails-default-appjavascript-to-the-recommended-client-structure)
+  - [Using HMR with the shakapacker setup](#using-hmr-with-the-shakapacker-setup)
+  - [Custom IP & PORT setup (Cloud9 example)](#custom-ip--port-setup-cloud9-example)
+  - [RubyMine performance tip](#rubymine-performance-tip)
+- [Conclusion](#conclusion)
+# Installation
 ## Setting up your environment
 
-Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 14+. I recommend `rvm` or `rbenv` and `nvm` to install Ruby and Node. Rails can be installed as an ordinary gem.
+Trying out **React on Rails** is super easy, so long as you have the basic prerequisites.
 
-```
-nvm install node                # download and install latest stable Node
-nvm alias default node          # make it default version
-nvm list                        # check
-
-brew install yarn               # you can use other installer if desired, such as yvm
-rvm install 2.7                 # download and install latest stable Ruby (update to exact version)
-rvm use 2.7 --default           # use it and make it default
-rvm list                        # check
-
-gem install rails               # download and install latest stable Rails
-gem install foreman             # download and install Foreman
-```
+- **Ruby:** We support all active Ruby versions but recommend using the latest stable Ruby version. Solutions like [rvm](https://rvm.io) or [rbenv](https://github.com/rbenv/rbenv) make it easy to have multiple Ruby versions on your machine.
+- **Rails:** We support Rails 6 and later.
+- **Nodejs:** We support all [active Node versions](https://github.com/nodejs/release#release-schedule) but recommend using the latest LTS release of Nodejs for the longest support. Older inactive node versions might still work but is not guaranteed. We also recommend using [nvm](https://github.com/nvm-sh/nvm/) to ease using different node versions in different projects.
+- **yarn:** We use [yarn classic](https://classic.yarnpkg.com/) as our node package manager.
+- You need to have either [Overmind](https://github.com/DarthSim/overmind) or [Foreman](https://rubygems.org/gems/foreman) as a process manager.
 
 ## Create a new Ruby on Rails App
-Then we need to create a fresh Rails application as following.
+Then we need to create a fresh Rails application as follows.
 
-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).
+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).
 
 ```bash
 # For Rails 6.x
 rails new test-react-on-rails --skip-javascript
 
 # For Rails 7.x
-rails new test-react-on-rails --skip-turbolinks --skip-javascript
+rails new test-react-on-rails --skip-javascript
 
 cd test-react-on-rails
 ```
+Note: You can use `--database=postgresql` option to use Postgresql for the database.
 
-## Add the shakapacker and react_on_rails gems
+## Add the Shakapacker and react_on_rails gems
 We recommend using the latest version of these gems. Otherwise, specify the
-exact versions of both the gem and npm package. In other words, don't use
+exact versions of both the gem and npm packages. In other words, don't use
 the `^` or `~` in the version specifications.
 
 ```bash
@@ -67,10 +81,10 @@ bundle add shakapacker --strict
 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.
 
-## Run the shakapacker (webpacker) generator
+## Run the Shakapacker generator
 
 ```bash
-bundle exec rails webpacker:install
+bundle exec rails shakapacker:install
 ```
 
 Commit all the changes so far to avoid getting errors in the next step.
@@ -79,7 +93,7 @@ Commit all the changes so far to avoid getting errors in the next step.
 git commit -am "Initial commit"
 ```
 
-Alternatively you can use `--ignore-warnings` in the next step.
+Alternatively, you can use `--ignore-warnings` in the next step.
 
 ## Run the React on Rails Generator
 
@@ -110,59 +124,64 @@ Then run the server with one of the following options:
 
 ## Running the app
 
-### For HMR:
-
-```bash
-./bin/dev
-```
-
-### Without HMR, statically creating the bundles
-
 ```bash
-./bin/dev-static
+./bin/dev # For HMR
+# or
+./bin/dev-static # Without HMR, statically creating the bundles
 ```
 
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
 
 # HMR vs. React Hot Reloading
 
-First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
+First, check that the `hmr` and the `inline` options are `true` in your `config/shakapacker.yml` file.
 
-The basic setup will have HMR working with the default webpacker setup. The basic
+The basic setup will have HMR working with the default Shakapacker setup. The basic
 [HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
 React setup, will cause a full page refresh each time you save a file.
 
-## Deploying to Heroku
+# Deploying to Heroku
 
-### Create Your Heroku App
-*Assuming you can login to heroku.com and have logged into to your shell for heroku.*
+## Create Your Heroku App
+*Assuming you can log in to heroku.com and have logged into your shell for Heroku.*
 
 1. Visit [https://dashboard.heroku.com/new](https://dashboard.heroku.com/new) and create an app, say named `my-name-react-on-rails`:
 
 ![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
 
-Run this command that looks like this from your new heroku app
+Run this command that looks like this from your new Heroku app
 
-    heroku git:remote -a my-name-react-on-rails
+```bash
+heroku git:remote -a my-name-react-on-rails
+```
 
 Set heroku to use multiple buildpacks:
 
-    heroku buildpacks:set heroku/ruby
-    heroku buildpacks:add --index 1 heroku/nodejs
-
+```bash
+heroku buildpacks:set heroku/ruby
+heroku buildpacks:add --index 1 heroku/nodejs
+```
 
-### Swap out sqlite for postgres by doing the following:
+## Swap out sqlite for postgres:
+Heroku requires your app to use Postgresql. If you have not setup your app
+with Postgresql, you need to change your app settings to use this database.
 
-Run these two commands:
+Run the following command (in Rails 6+):
 
+```bash
+rails db:system:change --to=postgresql
 ```
+
+If for any reason you want to do this process manually, run these two commands:
+
+```bash
 bundle remove sqlite3
 bundle add pg
 ```
 
 ![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
 
-### Replace your `database.yml` file with this (assuming your app name is "ror").
+Now replace your `database.yml` file with this (assuming your app name is "ror").
 
 ```yml
 default: &default
@@ -189,14 +208,14 @@ production:
 
 Then you need to setup postgres so you can run locally:
 
-```
+```bash
 rake db:setup
 rake db:migrate
 ```
 
 ![08](https://cloud.githubusercontent.com/assets/20628911/17465016/1f3559f0-5cf4-11e6-8ab4-c5572e4644a5.png)
 
-I'd recommend adding this line to the top of your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
+Optionally you can add this line to your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
 
 ```ruby
 root "hello_world#index"
@@ -206,9 +225,8 @@ root "hello_world#index"
 
 Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
 
-Create `/Procfile`. This is what Heroku uses to start your app.
+Create `./Procfile` with the following content. This is what Heroku uses to start your app.
 
-`Procfile`
 ```
 web: bundle exec puma -C config/puma.rb
 ```
@@ -238,14 +256,14 @@ Next, update your `package.json` to specify the version of yarn and node. Add th
 
 ```json
   "engines": {
-    "node": "13.9.0",
+    "node": "16.19.0",
     "yarn": "1.22.4"
   },
 ```
 
-Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
+Then after all changes are done don't forget to commit them with git and finally, you can push your app to Heroku!
 
-```
+```bash
 git add -A
 git commit -m "Changes for Heroku"
 git push heroku master
@@ -253,14 +271,13 @@ git push heroku master
 
 Then run:
 
-```
+```bash
 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/)
-
+# Other features
 ## Turning on Server Rendering
 
 You can turn on server rendering by simply changing the `prerender` option to `true`:
@@ -277,15 +294,7 @@ If you want to test this out with HMR, then you also need to add this line to yo
 ```
 
 More likely, you will create a different build file for server rendering. However, if you want to
-use the same file from the webpack-dev-server, you'll need to add that line.
-
-Then push to Heroku:
-
-```
-git add -A
-git commit -m "Enable server rendering"
-git push heroku master
-```
+use the same file from the shakapack-dev-server, you'll need to add that line.
 
 When you look at the source code for the page (right click, view source in Chrome), you can see the difference between non-server rendering, where your DIV containing your React looks like this:
 
@@ -311,34 +320,34 @@ ShakaCode recommends that you use `/client` for your client side app. This way a
 
 1. Move the directory:
 
-```
+```bash
 mv app/javascript client
 ```
 
-2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+2. Edit your `/config/shakapacker.yml` file. Change the `default/source_path`:
 
 ```yml
-  source_path: client
+source_path: client
 ```
 
-## Using HMR with the rails/webpacker setup
+## Using HMR with the shakapacker setup
 
-Start the app using `foreman start -f Procfile.dev`.
+Start the app using `overmind start -f Procfile.dev` or `foreman start -f Procfile.dev`.
 
-When you change a JSX file and save, the browser will automatically refresh!
+When you change and save a JSX file, the browser will automatically refresh!
 
 So you get some basics from HMR with no code changes. If you want to go further, take a look at these links:
 
-* https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack-dev-server.md
-* https://webpack.js.org/configuration/dev-server/
-* https://webpack.js.org/concepts/hot-module-replacement/
+* [webpack-dev-server](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack-dev-server.md)
+* [DevServer](https://webpack.js.org/configuration/dev-server/)
+* [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/)
 
-React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by rails/webpacker.
+React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by `shakapcker`.
 
 
-### Custom IP & PORT setup (Cloud9 example)
+## Custom IP & PORT setup (Cloud9 example)
 
-In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
+In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example, to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
 
 ``` Procfile.dev
 web: rails s -p 8080 -b 0.0.0.0
@@ -346,17 +355,14 @@ web: rails s -p 8080 -b 0.0.0.0
 
 Then visit https://your-shared-addr.c9users.io:8080/hello_world
 
-## RubyMine
+## RubyMine performance tip
 
 It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
 
-* Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
+* Generated files, per the settings in your `config/shakapacker.yml`, which default to `public/packs` and `public/packs-test`
 * `node_modules`
 
-
-
-
-## Conclusion
+# Conclusion
 
 * Browse the docs on [our documentation website](https://www.shakacode.com/react-on-rails/docs/)
 

data/docs/guides/upgrading-react-on-rails.md

@@ -12,13 +12,13 @@ Previously, the gem `webpacker` was a Gem dependency.
 
 v13 has changed slightly to switch to `shakapacker`.
 
-For details, see see the [Shakapacker guide to upgrading](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md)
+For details, see the Shakapacker guide to upgrading to [version 6](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md) and [version 7](https://github.com/shakacode/shakapacker/blob/master/docs/v7_upgrade.md)
 
 In summary:
 
 1. Change the gem reference from 'webpacker' to 'shakapacker'
 2. Change the npm reference from '@rails/webpacker' to 'shakapacker'
-3. Other updates, depending on what version of rails/webpacker that you had.
+3. Other updates, depending on what version of `rails/webpacker` that you had.
 
 ## Upgrading to v12
 ### Recent versions