react_on_rails 12.0.2 → 12.1.0

data/docs/{basics → additional-details}/generator-details.md

@@ -35,13 +35,9 @@ can pass the redux option if you'd like to have redux setup for you automaticall
 Then you may run
 
     `rails s`
-
-More Details:
-
-    `https://github.com/shakacode/react_on_rails/blob/master/docs/basics/generator-details.md`
 ```
 
-Another good option is to create a simple test app per the [Tutorial](../tutorial.md).
+Another good option is to create a simple test app per the [Tutorial](https://www.shakacode.com/react-on-rails/docs/basics/tutorial).
 
 # Understanding the Organization of the Generated Client Code
 The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `app/javascript/app/bundles`. Note, the recommended for bigger projects is `client/app/bundles`. This encourages for modularity of *domains*.
@@ -58,4 +54,3 @@ You may also notice the `app/lib` folder. This is for any code that is common be
 If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
 
 Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`.
-

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/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

@@ -34,7 +34,7 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
    * 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

@@ -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

@@ -23,7 +23,7 @@ Uncommonly used options:
 ```
 
 - **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](../basics/configuration.md).
+  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,7 +43,7 @@ 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.
 3. Your view code must expect an object and not a string.
@@ -100,7 +100,7 @@ You can call `rails_context` or `rails_context(server_side: true|false)` from yo
 
 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.
 
@@ -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,11 +1,11 @@
 # Client-Side Rendering vs. Server-Side Rendering
 
-*See also [react-server-rendering.md](./react-server-rendering.md).*
+*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:
@@ -18,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
 ```
 

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

@@ -58,20 +58,22 @@ To enable HMR functionality you have to use `./bin/webpack-dev-server`
     ` 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 isWebpackDevServer = process.env.WEBPACK_DEV_SERVER;
-    
-    //plugins
-    if(isWebpackDevServer) {
-      environment.plugins.append(
-         'ReactRefreshWebpackPlugin',
-         new ReactRefreshWebpackPlugin({                 
-                           overlay: {
-                               sockPort: 3035
-                           }
-                       })
-      );  
-    }
+   ```
+   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)`. 
 

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