react_on_rails 12.0.0 → 12.1.0

data/docs/{outdated → additional-details}/manual-installation-overview.md

@@ -14,17 +14,17 @@ The only requirements within this directory for basic React on Rails integration
 1. Your webpack configuration files:
    1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
    1. Provide server rendering if you wish to use that feature.
-1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See API docs in [README.md](README.md) and the [ReactOnRails.js source](../../node_package/src/ReactOnRails.js).
+1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our javascript API docs](https://www.shakacode.com/react-on-rails/docs/api/javascript-api) and the [ReactOnRails.js source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.js).
 1. Set your registration file as an "entry" point in your Webpack configs.
-1. Add the [Manifest plugin](https://github.com/danethurber/webpack-manifest-plugin) to your config. For examples see [dummy config](../../spec/dummy/client/webpack.client.base.config.js).
+1. Add the [Manifest plugin](https://github.com/danethurber/webpack-manifest-plugin) to your config.
 The default path: `public/webpack` can be loaded with webpackConfigLoader as shown in the dummy example.
 1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.
 
 ## Rails Steps (outside of /client)
-1. Add  `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](spec/dummy/app/views/layouts/application.html.erb)
-1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
+1. Add  `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb)
+1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
 1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
-1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. 
-1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/basics/heroku-deployment.md)
+1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files.
+1. If you are deploying to Heroku, see [our heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment)
 
 If I missed anything, please submit a PR or file an issue.

data/docs/additional-details/recommended-project-structure.md

@@ -0,0 +1,69 @@
+# Recommended Project structure
+
+The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
+
+```yml
+app/javascript:
+  ├── bundles:
+  │   # Logical groups of files that can be used for code splitting
+  │   └── hello-world-bundle.js
+  ├── packs:
+  │   # only webpack entry files here
+  │   └── hello-world-bundle.js
+```
+
+Per the example repo [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),
+you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
+
+## Steps to convert from the generator defaults to use a `/client` directory for source code 
+
+1. Move the directory:
+
+```
+mv app/javascript client
+```
+
+2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+
+```yml
+  source_path: client
+```
+
+## Moving node_modules from `/` to `/client` with a custom webpack setup.
+
+`rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
+
+1. Move the `/package.json` to `/client/package.json`
+2. Create a `/package.json` that delegates to `/client/package.json`. 
+   ```
+     "scripts": {
+       "heroku-postbuild": "cd ./client && yarn"
+     },
+   ```
+3. If your node_modules directory is not at the top level of the Rails project, then you will need to set the
+ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
+
+## CSS, Sass, Fonts, and Images
+Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends!
+
+Here's a good discussion of this option: [Why does Rails 6 include both Webpacker and Sprockets?](https://rossta.net/blog/why-does-rails-install-both-webpacker-and-sprockets.html). 
+
+You have 2 basic choices:
+
+### Simple Rails Way
+This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.
+
+#### Advantages to the Simple Rails Way
+1. Much simpler! There's no changes really from your current processes.
+
+### Using Webpack to Manage Styling Assets
+This technique involves customization of the webpack config files to generate CSS, image, and font assets. 
+
+#### Directory structure
+1. `/client/app/assets`: Assets for CSS for client app.
+1. `/client/app/assets/fonts` and `/client/app/assets/styles`: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.
+
+#### Advantages to having Webpack Manage Styles
+1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
+1. You can use CSS in JS.
+1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.

data/docs/additional-details/upgrade-webpacker-v3-to-v4.md

@@ -0,0 +1,10 @@
+# Upgrading rails/webpacker v3.5 to v4
+
+The following steps can be followed to update a Webpacker v3.5 app to v4.
+
+1. Update the gem `webpacker` and the package `@rails/webpacker`
+1. Merge changes from the new default [.babelrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.babelrc) to your `/.babelrc`. If you are using React, you need to add `"@babel/preset-react"`, to the list of `presets`.
+1. Copy the file [.browserslistrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.browserslistrc) to `/`.
+1. Merge any differences between [config/webpacker.yml](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/webpacker.yml) and your `/config/webpacker.yml`.
+
+Here is an [example commit of these changes](https://github.com/shakacode/react_on_rails-tutorial-v11/pull/1/files).

data/docs/api/javascript-api.md

@@ -25,16 +25,16 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
   /**
    * Main entry point to using the react-on-rails npm package. This is how Rails will be able to
    * find you components for rendering. Components get called with props, or you may use a
-   * "render function" to return a React component or an object with the following shape:
+   * "Render-Function" to return a React component or an object with the following shape:
    * { renderedHtml, redirectLocation, error }.
-   * For server rendering, if you wish to return multiple HTML strings from a render function,
-   * you may return an Object from your render function with a single top level property of
+   * For server rendering, if you wish to return multiple HTML strings from a Render-Function,
+   * you may return an Object from your Render-Function with a single top level property of
    * renderedHtml. Inside this Object, place a key called componentHtml, along with any other
    * needed keys. This is useful when you using side effects libraries like react helmet.
    * Your Ruby code with get this Object as a Hash containing keys componentHtml and any other
    * custom keys that you added:
    * { renderedHtml: { componentHtml, customKey1, customKey2 } }
-   * See the example in /docs/additional-reading/react-helmet.md
+   * See the example in https://www.shakacode.com/react-on-rails/docs/javascript/react-helmet
    * @param components (key is component name, value is component)
    */
   register(components)
@@ -69,7 +69,7 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
    * Allow directly calling the page loaded script in case the default events that trigger react
    * rendering are not sufficient, such as when loading JavaScript asynchronously with TurboLinks:
    * More details can be found here:
-   * https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/turbolinks.md
+   * https://www.shakacode.com/react-on-rails/docs/rails/turbolinks
    */
   reactOnRailsPageLoaded()
 

data/docs/api/redux-store-api.md

@@ -1,10 +1,10 @@
 # Redux Store
 
-_This redux API is no longer recommended as it prevents dynamic code splitting for performance. Instead, you should use the standard react_component view helper passing in a "render function."_
+_This redux API is no longer recommended as it prevents dynamic code splitting for performance. Instead, you should use the standard react_component view helper passing in a "Render-Function."_
 
 You don't need to use the `redux_store` api to use redux. This api was setup to support multiple calls to `react_component` on one page that all talk to the same redux store.
 
-If you are only rendering one react component on a page, as is typical to do a "Single Page App" in React, then you should _probably_ pass the props to your React component in a "render function."
+If you are only rendering one react component on a page, as is typical to do a "Single Page App" in React, then you should _probably_ pass the props to your React component in a "Render-Function."
 
 Consider using the `redux_store` helper for the two following use cases:
 
@@ -13,7 +13,7 @@ Consider using the `redux_store` helper for the two following use cases:
 
 ## Multiple React Components on a Page with One Store
 
-You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript. 
+You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript.
 
 A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
 
@@ -98,5 +98,5 @@ Place this view helper (no parameters) at the end of your shared layout so React
 
 # More Details
 
-* [lib/react_on_rails/controller.rb](../../lib/react_on_rails/controller.rb) source
-* [lib/react_on_rails/helper.rb](../../lib/react_on_rails/helper.rb) source
+* [lib/react_on_rails/controller.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/controller.rb) source
+* [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source

data/docs/api/view-helpers-api.md

@@ -22,8 +22,8 @@ Uncommonly used options:
   id: nil,
 ```
 
-- **component_name:** Can be a React component, created using an ES6 class or a render function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only).
-  All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](../basics/configuration.md).
+- **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID.
+  All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](https://www.shakacode.com/react-on-rails/docs/basics/configuration).
 - **general options:**
   - **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
   - **prerender:** enable server-side rendering of a component. Set to false when debugging!
@@ -43,9 +43,9 @@ Uncommonly used options:
 `react_component_hash` is used to return multiple HTML strings for server rendering, such as for
 adding meta-tags to a page. It is exactly like react_component except for the following:
 
-1. `prerender: true` is automatically added to options, as this method doesn't make sense for 
+1. `prerender: true` is automatically added to options, as this method doesn't make sense for
    client only rendering.
-2. Your JavaScript render function for server rendering must return an Object rather than a React Component.
+2. Your JavaScript Render-Function for server rendering must return an Object rather than a React Component.
 3. Your view code must expect an object and not a string.
 
 Here is an example of ERB view code:
@@ -98,11 +98,11 @@ You can call `rails_context` or `rails_context(server_side: true|false)` from yo
 
 ### Renderer Functions (function that will call ReactDOM.render or ReactDOM.hydrate)
 
-A "renderer function" is a render function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantate the React components into the DOM.
+A "renderer function" is a Render-Function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantate the React components into the DOM.
 
-Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](docs/outdated/code-splitting.md). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
+Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
 
-Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a render function. Attempting to server render with a renderer function will throw an error.
+Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a Render-Function. Attempting to server render with a renderer function will throw an error.
 
 ------------
 
@@ -110,9 +110,9 @@ Renderer functions are not meant to be used on the server since there's no DOM o
 
 [React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
 
-1. [React on Rails docs for react-router](../additional-reading/react-router.md)
-2. Examples in [spec/dummy/app/views/react_router](../../spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](../../spec/dummy/client/app/startup/ServerRouterApp.jsx).
-3. [Code Splitting docs](docs/outdated/code-splitting.md) for information about how to set up code splitting for server rendered routes.
+1. [React on Rails docs for react-router](https://www.shakacode.com/react-on-rails/docs/javascript/react-router)
+2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx).
+3. [Code Splitting docs](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting) for information about how to set up code splitting for server rendered routes.
 
 ------------
 
@@ -129,5 +129,4 @@ This is a helper method that takes any JavaScript expression and returns the out
 
 # More details
 
-See the [lib/react_on_rails/helper.rb](../../lib/react_on_rails/helper.rb) source.
-
+See the [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source.

data/docs/basics/client-vs-server-rendering.md

@@ -1,9 +1,11 @@
 # Client-Side Rendering vs. Server-Side Rendering
 
+*Also, see [our react server-rendering documentation](https://www.shakacode.com/react-on-rails/docs/basics/react-server-rendering).*
+
 In most cases, you should use the `prerender: false` (default behavior) with the provided 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. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime.
- 
+
 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).
 
 If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
@@ -16,7 +18,7 @@ If you open the HTML source of any web page using React on Rails, you'll see the
 
 # Different Server-Side Rendering Code (and a Server-Specific Bundle)
 
-You may want different code for your server-rendered components running server side versus client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`. 
+You may want different code for your server-rendered components running server side versus client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`.
 
 Another way is to use a separate webpack configuration file that can use a different server side entry file, like  'serverRegistration.js' as opposed to 'clientRegistration.js.' That would set up different code for server rendering.
 

data/docs/basics/configuration.md

@@ -12,7 +12,7 @@ default: &default
   # public_output_path folder
   manifest: manifest.json
   cache_manifest: false
-  
+
   # Source path is used to check if webpack compilation needs to be run for `compile: true`
   source_path: client/app
 
@@ -24,7 +24,7 @@ development:
 test:
   <<: *default
   # Ensure that webpacker invokes webpack to build files for tests if not using the
-  #   ReactOnRails rspec helper. 
+  #   ReactOnRails rspec helper.
   compile: true
 
   # Generated files for tests, in /public/webpack/test
@@ -49,7 +49,7 @@ for all client files, including your sources and node_modules.
 ReactOnRails.configure do |config|
   # `trace`: General debugging flag.
   # The default is true for development, off otherwise.
-  # With true, you get detailed logs of rendering and stack traces if you call setTimout, 
+  # With true, you get detailed logs of rendering and stack traces if you call setTimout,
   # setInterval, clearTimout when server rendering.
   config.trace = Rails.env.development? # default
 
@@ -57,22 +57,27 @@ ReactOnRails.configure do |config|
   # false ==> Sets the dom id to "#{react_component_name}-react-component"
   # true ==> Adds "-#{SecureRandom.uuid}" to that ID
   # If you might use multiple instances of the same React component on a Rails page, then
-  # it is convenient to set this to true or else you have to either manually set the ids to 
+  # it is convenient to set this to true or else you have to either manually set the ids to
   # avoid collisions. Most newer apps will have only one instance of a component on a page,
   # so this should be false in most cases.
   # This value can be overridden for a given call to react_component
   config.random_dom_id = true # default
 
-  # 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.	
+  # 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.
   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
+   
   ################################################################################
   ################################################################################
   # SERVER RENDERING OPTIONS
@@ -89,9 +94,9 @@ ReactOnRails.configure do |config|
   # you should include a name that matches your bundle name in your webpack config.
   config.server_bundle_js_file = "server-bundle.js"
 
-  # THE BELOW OPTIONS FOR SERVER-SIDE RENDERING RARELY NEED CHANGING 
+  # THE BELOW OPTIONS FOR SERVER-SIDE RENDERING RARELY NEED CHANGING
   #
-  # This value only affects server-side rendering when using the webpack-dev-server 
+  # This value only affects server-side rendering when using the webpack-dev-server
   # If you are hashing the server bundle and you want to use the same bundle for client and server,
   # you'd set this to `true` so that React on Rails reads the server bundle from the webpack-dev-server.
   # Normally, you have different bundles for client and server, thus, the default is false.
@@ -101,7 +106,7 @@ ReactOnRails.configure do |config|
   # If true, ensure that in config/webpacker.yml that you have both dev_server.hmr and
   # dev_server.inline set to false.
   config.same_bundle_for_client_and_server = false
-  
+
   # If set to true, this forces Rails to reload the server bundle if it is modified
   # Default value is Rails.env.development?
   # You probably will never change this.
@@ -119,16 +124,16 @@ ReactOnRails.configure do |config|
 
   # Default is true only for development? to raise exception on server if the JS code throws for
   # server rendering. The reason is that the server logs will show the error and force you to fix
-  # any server rendering issues immediately during development. 
-  config.raise_on_prerender_error = Rails.env.development? 
+  # any server rendering issues immediately during development.
+  config.raise_on_prerender_error = Rails.env.development?
 
   ################################################################################
   # Server Renderer Configuration for ExecJS
   ################################################################################
   # The default server rendering is ExecJS, probably using the mini_racer gem
-  # If you wish to use an alternative Node server rendering for higher performance, 
+  # If you wish to use an alternative Node server rendering for higher performance,
   # contact justin@shakacode.com for details.
-  # 
+  #
   # For ExecJS:
   # You can configure your pool of JS virtual machines and specify where it should load code:
   # On MRI, use `mini_racer` for the best performance
@@ -153,7 +158,7 @@ ReactOnRails.configure do |config|
   # By default(without this option) all yaml files from Rails.root.join("config", "locales")
   # and installed gems are loaded
   config.i18n_yml_dir = Rails.root.join("config", "locales")
-  
+
   # Possible output formats are js and json
   # The default format is json
   config.i18n_output_format = 'json'
@@ -178,13 +183,13 @@ ReactOnRails.configure do |config|
   # TEST CONFIGURATION OPTIONS
   # Below options are used with the use of this test helper:
   # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  # 
+  #
   # NOTE:
   # Instead of using this test helper, you may ensure fresh test files using rails/webpacker via:
   # 1. Have `config/webpacker/test.js` exporting an array of objects to configure both client and server bundles.
   # 2. Set the compile option to true in config/webpacker.yml for env test
   ################################################################################
-  
+
   # If you are using this in your spec_helper.rb (or rails_helper.rb):
   #
   # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
@@ -194,7 +199,7 @@ ReactOnRails.configure do |config|
   #
   config.build_test_command = "RAILS_ENV=test bin/webpack"
 
-  # CONFIGURE YOUR SOURCE FILES 
+  # CONFIGURE YOUR SOURCE FILES
   # The test helper needs to know where your JavaScript files exist. The value is configured
   # by your config/webpacker.yml source_path:
   # source_path: client/app # if using recommended /client directory
@@ -202,10 +207,22 @@ ReactOnRails.configure do |config|
   # Define the files we need to check for webpack compilation when running tests.
   # The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
   # However, if you are generated a server bundle that is NOT hashed (present in manifest.json),
-  # then include the file in this list like this: 
+  # then include the file in this list like this:
   config.webpack_generated_files = %w( server-bundle.js manifest.json )
   # Note, be sure NOT to include your server-bundle.js if it is hashed, or else React on Rails will
-  # think the server-bundle.js is missing every time for test runs. 
+  # think the server-bundle.js is missing every time for test runs.
+end
+```
+
+Example of a ReactOnRailsConfig module for `production_build_command`:
+
+```ruby
+module BuildProductionCommand
+  include FileUtils
+  # Method with the name of call will be called during assets:precompile
+  def self.call
+    sh "bin/webpack"
+  end
 end
 ```
 
@@ -215,7 +232,7 @@ Example of a RenderingExtension for custom values in the `rails_context`:
 module RenderingExtension
 
   # Return a Hash that contains custom values from the view context that will get merged with
-  # the standard rails_context values and passed to all calls to render functions used by the
+  # the standard rails_context values and passed to all calls to Render-Functions used by the
   # react_component and redux_store view helpers
   def self.custom_context(view_context)
     {

data/docs/basics/deployment.md

@@ -1,4 +1,4 @@
 # Deployment
 
-- `rails/webpacker` puts the necessary precompile steps automatically in the rake precompile step. 
-- See the [Heroku Deployment](docs/basics/heroku-deployment.md) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.
+- `rails/webpacker` puts the necessary precompile steps automatically in the rake precompile step.
+- See the [Heroku Deployment](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.

data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md

@@ -8,22 +8,18 @@ The webpack-dev-server provides:
    abruptly lose any tweaks within the Chrome development tools.
 3. Optional hot-reloading. The older react-hot-loader has been deprecated in 
    favor of [fast-refresh](https://reactnative.dev/docs/fast-refresh).
-   For use with webpack, see [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
+   For use with webpack, see **Client Side rendering and HMR using react-refresh-webpack-plugin** section bellow or visit [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) for additional details.
 
 If you are ***not*** using server-side rendering (***not*** using `prerender: true`),
 then you can follow all the regular docs for using the `bin/webpack-dev-server` 
 during development.
 
-
 # Server Side Rendering with the Default rails/webpacker bin/webpack-dev-server
 
 If you are using server-side rendering, then you have a couple options. The
 recommended technique is to have a different webpack configuration for server
 rendering.  
 
-
-
-
 ## If you use the same Webpack setup for your server and client bundles 
 If you do use the webpack-dev-server for prerendering, be sure to set the
 `config/initializers/react_on_rails.rb` setting of 
@@ -43,7 +39,66 @@ If you don't configure these two to false, 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)
 
-
-
-
-
+# Client Side rendering with HMR using react-refresh-webpack-plugin
+## Basic installation
+To enable HMR functionality you have to use `./bin/webpack-dev-server`
+1. In `config/webpacker.yml` set **hmr** and **inline** `dev_server` properties to true. 
+    ```
+    dev_server:
+      https: false
+      host: localhost
+      port: 3035
+      public: localhost:3035
+      hmr: true
+      # Inline should be set to true if using HMR
+      inline: true
+    ```
+
+2. Add react refresh packages:
+    ` yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D`
+
+3. HMR is for use with the webpack-dev-server, so we only add this for the webpack-dev-server.
+   ```
+   const { devServer } = require('@rails/webpacker')
+
+   const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
+
+   //plugins
+   if (isWebpackDevServer) {
+     environment.plugins.append(
+       'ReactRefreshWebpackPlugin',
+       new ReactRefreshWebpackPlugin({
+         overlay: {
+           sockPort: devServer.port
+         }
+       })
+     )
+   }
+    ```
+    We added overlay.sockedPort option in `ReactRefreshWebpackPlugin` to match the webpack dev-server port specified in config/webpacker.yml. Thats way we make sockjs works properly and suppress error in browser console `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`. 
+
+4. Add react-refresh plugin in `babel.config.js`
+```
+  module.export = function(api) {
+    return {
+      plugins: [process.env.WEBPACK_DEV_SERVER && 'react-refresh/babel'].filter(Boolean)
+    }
+  }
+```
+That's it :).
+Now Browser should reflect .js along with .css changes without reloading.
+
+If by some reason plugin doesn't work you could revert changes and left only devServer hmr/inline to true affecting only css files.
+
+These plugins are working and tested with 
+   - babel 7
+   - webpacker 5
+   - bootstrap 4
+   - jest 26
+   - core-js 3
+   - node 12.10.0
+   - react-refresh-webpack-plugin@0.4.1
+   - react-refresh 0.8.3 
+   - react_on_rails 11.1.4 
+   
+   configuration.

data/docs/{outdated → basics}/how-react-on-rails-works.md

@@ -1,21 +1,21 @@
 # How React on Rails Works (with rails/webpacker)
 
-*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).* 
+*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. [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.
 
 Ensure these generated bundle files are in your `.gitignore`, as you never want to add the large compiled bundles to git.
 
-Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper. 
+Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper.
 
-Optionally, you can also initialize a Redux store with the view or controller helper `redux_store` so that the redux store can be shared amongst multiple React components. 
+Optionally, you can also initialize a Redux store with the view or controller helper `redux_store` so that the redux store can be shared amongst multiple React components.
 
 ## Client-Side Rendering vs. Server-Side Rendering
 
 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).
- 
+
 ## HTML Source Code
 
 If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
@@ -28,17 +28,16 @@ You can see all this on the source for [reactrails.com](https://www.reactrails.c
 
 ## 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. Alternately, the `rails/webpacker` library also can ensure that your bundles are built.
 
-For example, you might create a [Procfile.dev](spec/dummy/Procfile.dev).
+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/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](docs/basics/configuration.md)
+1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/basics/configuration)
 
 Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.
 
 If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
-

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

@@ -1,22 +1,29 @@
 # Getting Started with an existing Rails app
 
-**Also consult the instructions for installing on a fresh Rails app**, see the [React on Rails Basic Tutorial](../../docs/tutorial.md).
+**Also consult the instructions for installing on a fresh Rails app**, see the [React on Rails Basic Tutorial](https://www.shakacode.com/react-on-rails/docs/basics/tutorial).
 
 **If you have rails-5 API only project**, first [convert the rails-5 API only app to rails app](#convert-rails-5-api-only-app-to-rails-app) before [getting started](#getting-started-with-an-existing-rails-app).
 
-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 `client/package.json` file.
+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", "12.0.0" # Update to the current version
    gem "webpacker", "~> 5"
    ```
 
-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).
+1. Add the webpacker and react_on_rails gems
+_Use the latest version for react_on_rails._
 
+```
+bundle add webpacker                 
+bundle add react_on_rails --version=12.0.4 --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).
 
    ```bash
-   $ bundle exec rails webpacker:install
-   $ bundle exec rails webpacker:install:react
+   bundle exec rails webpacker:install
+   bundle exec rails webpacker:install:react
    ```
 
 3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
@@ -45,7 +52,7 @@
 
 ## Installation
 
-See the [Installation Overview](docs/outdated/manual-installation-overview.md) for a concise set summary of what's in a React on Rails installation.
+See the [Installation Overview](https://www.shakacode.com/react-on-rails/docs/additional-details/manual-installation-overview) for a concise set summary of what's in a React on Rails installation.
 
 
 ## NPM