Update outdated instructions in documentations (#1517)

* Update prerequisites

* Remove broken link

* Copywriting and improve structure

* Fix typo, improve structure, and replace webpacker with shakapacker

* Add notice about foreman installation

Author: ahangarha

docs/guides/deployment.md

@@ -1,4 +1,5 @@
 # Deployment
 
-- `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.
+Shakapacker 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.

docs/guides/file-system-based-automated-bundle-generation.md

@@ -64,6 +64,7 @@ default: &default
 ```
 
 the directory structure will look like this
+
 ```
 app/javascript:
   └── packs:               # sets up webpack entries
@@ -100,15 +101,15 @@ Your layout would contain:
   <%= stylesheet_pack_tag 'application' %>
 ```
 
-
 Suppose, you want to use bundle splitting to minimize unnecessary javascript loaded on each page, you would put each of your components in the `packs` directory.
+
 ```
 app/javascript:
-  └── packs:               # sets up webpack entries
-  │   └── FooComponentOne.jsx # Internally uses ReactOnRails.register
-  │   └── BarComponentOne.jsx # Internally uses ReactOnRails.register
-  │   └── BarComponentTwo.jsx # Internally uses ReactOnRails.register
-  └── src:                 # any directory name is fine. Referenced files need to be under source_path
+  └── packs:                   # sets up webpack entries
+  │   └── FooComponentOne.jsx  # Internally uses ReactOnRails.register
+  │   └── BarComponentOne.jsx  # Internally uses ReactOnRails.register
+  │   └── BarComponentTwo.jsx  # Internally uses ReactOnRails.register
+  └── src:                     # any directory name is fine. Referenced files need to be under source_path
   │   └── Foo
   │   │   └── ...
   │   └── Bar

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

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

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

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

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

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