react_on_rails 13.3.5 → 14.0.0

data/docs/guides/tutorial.md

@@ -1,374 +0,0 @@
-# React on Rails Basic Tutorial
-
-_Also see the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr)_ 
-
------
-
-*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v6*
-
-This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
-
-After finishing this tutorial you will get an application that can do the following (live on Heroku):
-
-![example](https://cloud.githubusercontent.com/assets/371302/17368567/111cc722-596b-11e6-9b72-ac5967a60e42.gif)
-
-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/)
-
-By the time you read this, the latest may have changed. Be sure to check the versions here:
-
-* 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 (webpacker) generator](#run-the-shakapacker-webpacker-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-railswebpacker-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.
-
-- **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 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).
-
-```bash
-# For Rails 6.x
-rails new test-react-on-rails --skip-javascript
-
-# For Rails 7.x
-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
-We recommend using the latest version of these gems. Otherwise, specify the
-exact versions of both the gem and npm packages. In other words, don't use
-the `^` or `~` in the version specifications.
-
-```bash
-bundle add react_on_rails --strict
-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
-
-```bash
-bundle exec rails webpacker:install
-```
-
-Commit all the changes so far to avoid getting errors in the next step.
-
-```bash
-git commit -am "Initial commit"
-```
-
-Alternatively, you can use `--ignore-warnings` in the next step.
-
-## Run the React on Rails Generator
-
-```bash
-rails generate react_on_rails:install
-```
-
-You will be prompted to approve changes in certain files. Press `enter` to proceed
-one by one or enter `a` to replace all configuration files required by the project.
-You can check the diffs before you commit to see what changed.
-
-Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
-If you want the redux install, run:
-
-```bash
-rails generate react_on_rails:install --redux
-```
-
-## Setting up your environment variables
-
-Add the following variable to your environment:
-
-```
-EXECJS_RUNTIME=Node
-```
-
-Then run the server with one of the following options:
-
-## Running the app
-
-```bash
-./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.
-
-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
-
-## 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
-
-```bash
-heroku git:remote -a my-name-react-on-rails
-```
-
-Set heroku to use multiple buildpacks:
-
-```bash
-heroku buildpacks:set heroku/ruby
-heroku buildpacks:add --index 1 heroku/nodejs
-```
-
-## 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 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)
-
-Now replace your `database.yml` file with this (assuming your app name is "ror").
-
-```yml
-default: &default
-  adapter: postgresql
-  username:
-  password:
-  host: localhost
-
-development:
-  <<: *default
-  database: ror_development
-
-# Warning: The database defined as "test" will be erased and
-# re-generated from your development database when you run "rake".
-# Do not set this db to the same as development or production.
-test:
-  <<: *default
-  database: ror_test
-
-production:
-  <<: *default
-  database: ror_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)
-
-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"
-```
-
-![09](https://cloud.githubusercontent.com/assets/20628911/17465018/1f3b685e-5cf4-11e6-93f8-105fc48517d0.png)
-
-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` with the following content. This is what Heroku uses to start your app.
-
-```
-web: bundle exec puma -C config/puma.rb
-```
-
-Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of 2020-06-04, the docs looked like this:
-
-`config/puma.rb`
-```rb
-workers Integer(ENV['WEB_CONCURRENCY'] || 2)
-threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5)
-threads threads_count, threads_count
-
-preload_app!
-
-rackup      DefaultRackup
-port        ENV['PORT']     || 3000
-environment ENV['RACK_ENV'] || 'development'
-
-on_worker_boot do
-  # Worker specific setup for Rails 4.1+
-  # See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
-  ActiveRecord::Base.establish_connection
-end
-```
-
-Next, update your `package.json` to specify the version of yarn and node. Add this section:
-
-```json
-  "engines": {
-    "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!
-
-```bash
-git add -A
-git commit -m "Changes for Heroku"
-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!
-
-# Other features
-## Turning on Server Rendering
-
-You can turn on server rendering by simply changing the `prerender` option to `true`:
-
-```erb
-<%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>
-```
-
-If you want to test this out with HMR, then you also need to add this line to your
-`config/intializers/react_on_rails.rb`
-
-```ruby
-  config.same_bundle_for_client_and_server = true
-```
-
-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.
-
-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:
-
-```html
-<div id="HelloWorld-react-component-b7ae1dc6-396c-411d-886a-269633b3f604"></div>
-```
-
-versus with server rendering:
-
-```html
-<div id="HelloWorld-react-component-d846ce53-3b82-4c4a-8f32-ffc347c8444a"><div data-reactroot=""><h3>Hello, <!-- -->Stranger<!-- -->!</h3><hr/><form><label for="name">Say hello to:</label><input type="text" id="name" value="Stranger"/></form></div></div>
-```
-
-For more details on server rendering, see:
-
-  + [Client vs. Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/)
-  + [React Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/)
-
-## Moving from the Rails default `/app/javascript` to the recommended `/client` structure
-
-ShakaCode recommends that you use `/client` for your client side app. This way a non-Rails, front-end developer can be at home just by opening up the `/client` directory.
-
-
-1. Move the directory:
-
-```bash
-mv app/javascript client
-```
-
-2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
-
-```yml
-source_path: client
-```
-
-## Using HMR with the shakapacker setup
-
-Start the app using `overmind start -f Procfile.dev` or `foreman start -f Procfile.dev`.
-
-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:
-
-* [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 `shakapcker`.
-
-
-## 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`.
-
-``` Procfile.dev
-web: rails s -p 8080 -b 0.0.0.0
-```
-
-Then visit https://your-shared-addr.c9users.io:8080/hello_world
-
-## 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`
-* `node_modules`
-
-
-
-
-# Conclusion
-
-* Browse the docs on [our documentation website](https://www.shakacode.com/react-on-rails/docs/)
-
-Feedback is greatly appreciated! As are stars on github!
-
-If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com). We offer [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki) and consulting so you can focus on your app and not on how to make Webpack plus Rails work optimally.

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

@@ -1,304 +0,0 @@
-# Upgrading React on Rails
-
-## Need Help Migrating?
-If you would like help in migrating between React on Rails versions or help with implementing server rendering, please contact [justin@shakacode.com](mailto:justin@shakacode.com) for more information about our [React on Rails Pro Support](https://www.shakacode.com/react-on-rails-pro).
-
-We specialize in helping companies to quickly and efficiently upgrade. The older versions use the Rails asset pipeline to package client assets. The current and recommended way is to use Webpack 4+ for asset preparation. You may also need help migrating from the `rails/webpacker`'s Webpack configuration to a better setup ready for Server Side Rendering.
-
-## Upgrading to v13
-
-### Breaking Change
-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)
-
-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.
-
-## Upgrading to v12
-### Recent versions
-Make sure that you are on a relatively more recent version of rails and webpacker. Yes, the [rails/webpacker](https://github.com/rails/webpacker) gem is required!
-v12 is tested on Rails 6. It should work on Rails v5. If you're on any older version,
-and v12 doesn't work, please file an issue.
-
-### Removed Configuration config.symlink_non_digested_assets_regex
-Remove `config.symlink_non_digested_assets_regex` from your `config/initializers/react_on_rails.rb`.
-If you still need that feature, please file an issue.
-
-### i18n default format changed to JSON
-* If you're using the internalization helper, then set `config.i18n_output_format = 'js'`. You can
-  later update to the default JSON format as you will need to update your usage of that file. A JSON
-  format is more efficient.
-
-### Updated API for `ReactOnRails.register()`
-
-In order to solve the issues regarding React Hooks compatibility, the number of parameters
-for functions is used to determine if you have a Render-Function that will get invoked to
-return a React component, or you are registering a React component defined by a function.
-Please see [Render-Functions and the Rails Context](https://www.shakacode.com/react-on-rails/docs/guides/render-functions-and-railscontext/) for
-more information on what a Render-Function is.
-
-##### Update required for registered functions taking exactly 2 params.
-
-Registered Objects are of the following type:
-1. **Function that takes only zero or one params and you return a React Element**, often JSX.  If the function takes zero or one params, there is **no migration needed** for that function.
-    ```js
-    export default (props) => <Component {...props} />;
-    ```
-
-2. **Function that takes only zero or one params and you return an Object (_not a React Element_)**.  If the function takes zero or one params, **you need to add one or two unused params so you have exactly 2 params** and then that function will be treated as a render function and it can return an Object rather than a React element. If you don't do this, you'll see this obscure error message:
-
-```
-  [SERVER] message: Objects are not valid as a React child (found: object with keys {renderedHtml}). If you meant to render a collection of children, use an array instead.
-  in YourComponentRenderFunction
-```
-
-  So look in YourComponentRenderFunction and do this change
-
-```js
-   export default (props) => { renderedHTML: getRenderedHTML };
-```
-
-   To have exactly 2 arguments:
-
-```js
-    export default (props, _railsContext) => { renderedHTML: getRenderedHTML };
-```    
-
-3. Function that takes **2 params** and returns **a React function or class component**. _Migration is needed as the older syntax returned a React Element._
-   A function component is a function that takes zero or one params and returns a React Element, like JSX. The correct syntax
-   looks like:
-    ```js
-    export default (props, railsContext) => () => <Component {{...props, railsContext}} />;
-    ```
-   Note, you cannot return a React Element (JSX). See below for the migration steps. If your function that took **two params returned
-   an Object**, then no migration is required.
-4. Function that takes **3 params** and uses the 3rd param, `domNodeId`, to call `ReactDOM.hydrate`. If the function takes 3 params, there is **no migration needed** for that function.
-5. ES6 or ES5 class. There is **no migration needed**.
-
-Previously, with case number 2, you could return a React Element.
-
-The fix is simple. Here is an example of the change you'll do:
-
-![2020-07-07_09-43-51 (1)](https://user-images.githubusercontent.com/1118459/86927351-eff79e80-c0ce-11ea-9172-d6855c45e2bb.png)
-
-##### Broken, as this function takes two params and it returns a React Element from a JSX Literal
-```js
-export default (props, railsContext) => <Component {{...props, railsContext} />;
-```
-
-If you make this mistake, you'll get this warning
-`Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <Fragment />. Did you accidentally export a JSX literal instead of a component?`
-
-And this error:
-`react-dom.development.js:23965 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.`
-
-In this example, you need to wrap the `<Component {...props} />` in a function call like this which
-results in the return value being a React function component.
-
-```js
-export default (props, _railsContext) => () => <Component {...props} />;
-```
-
-If you have a pure component, taking one or zero parameters, and you have an unnecessary function
-wrapper such that you're returning a function rather than a React Element, then:
-
-1. You won't see anything render.
-2. You will see this warning in development mode: `Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.`
-
----------
-
-## Upgrading rails/webpacker from v3 to v4
-### Custom Webpack build file
-The default value for `extract_css` is **false** in `config/webpack.yml`. Custom webpack builds should set this value to true or else no CSS link tags are generated. You have a custom webpack build if you are not using [rails/webpacker](https://github.com/rails/webpacker) to setup your Webpack configuration.
-
-  ```yml
-  default: &default
-     # other stuff
-     extract_css: true
-     # by default, extract and emit a css file. The default is false
-  ```
-
-## Upgrading to version 11
-* Remove `server_render_method` from config/initializers/react_on_rails.rb. Alternate server rendering methods are part of React on Rails Pro. If you want to use a custom renderer, contact justin@shakacode.com. We have a custom node rendering solution in production for egghead.io.
-* Remove your usage of ENV["TRACE_REACT_ON_RAILS"] usage. You can get all tracing with either specifying **`trace`** at your component or in your config/initializers/react_on_rails.rb file.
-* ReactOnRails::Utils.server_bundle_file_name and ReactOnRails::Utils.bundle_file_name were removed. React on Rails Pro contains upgrades to enable component and other types caching with React on Rails.
-
-## Upgrading to version 10
-
-Pretty simple:
-* Follow the steps to migrate to version 9 (except installing 10.x instead of 9.x)
-* If you have `react_component` returning hashes, then switch to `react_component_hash` instead
-
-## Upgrading to version 9
-
-### Why Webpacker?
-Webpacker provides areas of value:
-* View helpers that support bypassing the asset pipeline, which allows you to avoid double minification and enable source maps in production. This is 100% a best practice as source maps in production greatly increases the value of services such as HoneyBadger or Sentry.
-* A default Webpack config so that you only need to do minimal modifications and customizations. However, if you're doing server rendering, you may not want to give up control. Since Webpacker's default webpack config is changing often, we at Shakacode can give you definitive advice on webpack configuration best practices. In general, if you're happy with doing your own Webpack configuration, then we suggest using the `client` strategy discussed below. Most corporate projects will prefer having more control than direct dependence on webpacker easily allows.
-
-### Integrating Webpacker
-Reason for doing this: This enables your webpack bundles to bypass the Rails asset pipeline and it's extra minification, enabling you to use source-maps in production, while still maintaining total control over everything in the client directory
-
-#### From version 7 or lower
-
-##### ...while keeping your `client` directory
-*   `.gitignore`: add `/public/webpack/*`
-*   `Gemfile`: bump `react_on_rails` and add `webpacker`
-*   layout views: anything bundled by webpack will need to be requested by a `javascript_pack_tag` or `stylesheet_pack_tag`.
-  * Search your codebase for javascript_include_tag. Use the
-*   `config/initializers/assets.rb`: we no longer need to modify `Rails.application.config.assets.paths` or append anything to `Rails.application.config.assets.precompile`.
-*   `config/initializers/react_on_rails.rb`:
-    *   Delete `config.generated_assets_dir`. Webpacker's config now supplies this information
-    *   Replace `config.npm_build_(test|production)_command` with `config.build_(test|production)_command`
-*   `config/webpacker.yml`: start with our [example config](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/config/webpacker.yml) (feel free to modify it as needed). I recommend setting dev_server.hmr to false however since HMR is currently broken.
-*   `client/package.json`: bump `react_on_rails` (I recommend bumping `webpack` as well). You'll also need `js-yaml` if you're not already using `eslint` and `webpack-manifest-plugin` regardless.
-
-######  Client Webpack config:
-  *   You'll need the following code to read data from the webpacker config:
-
-```
-const path = require('path');
-const ManifestPlugin = require('webpack-manifest-plugin'); // we'll use this later
-
-const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
-const configPath = path.resolve('..', 'config');
-const { output } = webpackConfigLoader(configPath);
-```
-
-  *   That output variable will be used for webpack's `output` rules:
-
-```
-  output: {
-    filename: '[name]-[chunkhash].js', // [chunkhash] because we've got to do our own cache-busting now
-    path: output.path,
-    publicPath: output.publicPath,
-  },
-```
-
-  *   ...as well as for the output of plugins like `webpack-manifest-plugin`:
-
-```
-
-      new ManifestPlugin({
-        publicPath: output.publicPath,
-        writeToFileEmit: true
-      }),
-```
-
-  *   If you're using referencing files or images with `url-loader` & `file-loader`, their publicpaths will have to change as well: `publicPath: '/webpack/',`
-  *   If you're using `css-loader`, `webpack.optimize.CommonsChunkPlugin`, or `extract-text-webpack-plugin`, they will also need cache-busting!
-
-...and you're finally done!
-
-##### ...while replacing your `client` directory
-* Make the same changes to `config/initializers/react_on_rails.rb as described above`
-* Upgrade RoR & add Webpacker in the Gemfile
-* Upgrade RoR in the `client/package.json`
-* Run `bundle`
-* Run `rails webpacker:install`
-* Run `rails webpacker:install:react`
-* Run `rails g react_on_rails:install`
-* Move your entry point files to `app/javascript/packs`
-* Either:
-    * Move all your source code to `app/javascript/bundles`, move your linter configs to the root directory, and then delete the `client` directory
-    * or just delete the webpack config and remove webpack, its loaders, and plugins from your `client/package.json`.
-
-...and you're done.
-
-#### From version 8
-
-For an example of upgrading, see [react-webpack-rails-tutorial/pull/416](https://github.com/shakacode/react-webpack-rails-tutorial/pull/416).
-
-- Breaking Configuration Changes
-  1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
-  2. Renamed
-   * config.npm_build_test_command ==> config.build_test_command
-   * config.npm_build_production_command ==> config.build_production_command
-
-- Update the gemfile. Switch over to using the webpacker gem.
-
-```rb
-gem "webpacker"
-```
-
-- Update for the renaming in the `WebpackConfigLoader` in your webpack configuration.
-  You will need to rename the following object properties:
-  - webpackOutputPath      ==> output.path
-  - webpackPublicOutputDir ==> output.publicPath
-  - hotReloadingUrl        ==> output.publicPathWithHost
-  - hotReloadingHostname   ==> settings.dev_server.host
-  - hotReloadingPort       ==> settings.dev_server.port
-  - hmr                    ==> settings.dev_server.hmr
-  - manifest               ==> Remove this one. We use the default for Webpack of manifest.json
-  - env                    ==> Use `const { env } = require('process');`
-  - devBuild               ==> Use `const devBuild = process.env.NODE_ENV !== 'production';`
-
-- Edit your Webpack.config files:
-  - Change your Webpack output to be like this. **Be sure to have the hash or chunkhash in the filename,** unless the bundle is server side.:
-    ```
-    const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
-    const configPath = resolve('..', 'config');
-    const { output, settings } = webpackConfigLoader(configPath);
-    const hmr = settings.dev_server.hmr;
-    const devBuild = process.env.NODE_ENV !== 'production';
-
-    output: {
-      filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js',
-      chunkFilename: '[name]-[chunkhash].chunk.js',
-
-      publicPath: output.publicPath,
-      path: output.path,
-    },
-    ```
-  - Change your ManifestPlugin definition to something like the following
-    ```
-    new ManifestPlugin({
-        publicPath: output.publicPath,
-        writeToFileEmit: true
-      }),
-
-    ```
-
-- Find your `webpacker_lite.yml` and rename it to `webpacker.yml`
-  - Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml
-  - If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section.
-  - Alternately, if you are updating from webpacker_lite, you can manually change these:
-  - Add a default setting
-    ```
-    cache_manifest: false
-    ```
-  - For production, set:  
-    ```
-    cache_manifest: true
-    ```
-  - Add a section like this under your development env:
-    ```
-    dev_server:
-      host: localhost
-      port: 3035
-      hmr: false
-    ```
-    Set hmr to your preference.
-  - See the example `spec/dummy/config/webpacker.yml`.
-  - Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
-  - Rename `webpack_public_output_dir` to `public_output_path`.
-
-- Edit your Procfile.dev
-  - Remove the env value WEBPACKER_DEV_SERVER as it's not used
-  - For hot loading:
-    - Set the `hmr` key in your `webpacker.yml` to `true`.
-
-### Without integrating webpacker
-* Bump your ReactOnRails versions in `Gemfile` & `package.json`
-* In `/config/initializers/react_on_rails.rb`:
-    *  Rename `config.npm_build_test_command` ==> `config.build_test_command`
-    *  Rename `config.npm_build_production_command` ==> `config.build_production_command`
-    *  Add `config.node_modules_location = "client"`
-
-...and you're done.