react_on_rails 13.2.0 → 13.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 763474ed712a00d925c374048aca65cef79aa72ababa1ab3b06d00c8eb8ede2a
-  data.tar.gz: 47cb351a79b2aca23615ae60b5b9d8e2f4300b7d1e92abf04b67ed7d7ac54a18
+  metadata.gz: e61be8a6315e32bd3127d5ed676e1235c9e44cb43ff011dde722947c4f18b518
+  data.tar.gz: 61be21f2eda6b8a58688af7a69f88b70c2b0dbfe23a9addf68f2894829e96787
 SHA512:
-  metadata.gz: ddff41744b61108f731644f8e4d7e7f9e059ee25a656baf60ac4b9e58ad7da8e90bc047a8d2e0d91d2caf3947080a8afa305a4c9ce75a1e29635da61c3b78e4c
-  data.tar.gz: 8030fdb57740f229e97e6545d360c61f6fbdcad4d8a2b227d11b21693ff0ee10774d92c3b8076610724f9ba9f8eb8d5cf10271c3e9f0726022a1a57968afe363
+  metadata.gz: '069f91f435f7609c582a197e100e0140c9d4045b472fa163a06819847d860a339d0fba56ab408d32aa7307cb2b1205dfd5387b6e503810897a4898d6acf56dee'
+  data.tar.gz: ed764a94f2cf6b4ff1a50d605c73cab97371e0a0bc68bb344bc1978988c54b213b44cbc2bce6f6045158d662e7e8201e829f801df2a07392394dfcfcade3e3d4

data/.circleci/config.yml

@@ -205,6 +205,9 @@ jobs:
       - run: *install-yalc-add-react-on-rails
       - run: *install-dummy-app-node-modules
       - run: *install-dummy-app-ruby-gems
+      - run:
+          name: generate file system-based packs
+          command: cd spec/dummy && bundle exec rake react_on_rails:generate_packs
       - run:
           name: Build test bundles for dummy app
           command: cd spec/dummy && yarn run build:test
@@ -269,12 +272,12 @@ jobs:
           name: Prep for CI
           # TODO -- need to leverage Circle CI containers
           command: |
-            bundle exec rake prepare_for_ci
+            bundle exec rails prepare_for_ci
       - run:
           name: Main CI
           # TODO -- need to leverage Circle CI containers
           command: |
-            bundle exec rake run_rspec:all_dummy
+            bundle exec rails run_rspec:all_dummy
       # The following step will run only if the main job is finished successfully.
       # Build hook is triggered by curl command described here https://docs.netlify.com/configure-builds/build-hooks/
       # NETLIFY_HOOK is an environment variable on CircleCI to keep sensitive data outside the repo

data/.github/workflows/lint-js-and-ruby.yml

@@ -8,7 +8,7 @@ jobs:
       matrix:
         ruby: [2.7]
         node: [14]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
     - uses: actions/checkout@v2
     - name: Setup Ruby
@@ -32,12 +32,12 @@ jobs:
       uses: actions/cache@v2
       with:
         path: node_modules
-        key: v4-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
+        key: v5-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
     - name: Save root ruby gems to cache
       uses: actions/cache@v2
       with:
         path: vendor/bundle
-        key: v4-package-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}
+        key: v5-package-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}
     - name: Install Node modules with Yarn for renderer package
       run: |
         yarn install --no-progress --no-emoji

data/.github/workflows/main.yml

@@ -8,7 +8,7 @@ jobs:
       matrix:
         ruby: [2.7]
         node: [14]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
     - uses: actions/checkout@v2
     - name: Setup Ruby
@@ -36,7 +36,7 @@ jobs:
       uses: actions/cache@v2
       with:
         path: node_modules
-        key: v4-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
+        key: v5-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
     - name: Install Node modules with Yarn for renderer package
       run: |
         yarn install --no-progress --no-emoji
@@ -48,7 +48,7 @@ jobs:
       uses: actions/cache@v2
       with:
         path: spec/dummy/node_modules
-        key: v4-dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/yarn.lock') }}
+        key: v5-dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/yarn.lock') }}
     - name: yalc add react-on-rails
       run: cd spec/dummy && yalc add react-on-rails
     - name: Install Node modules with Yarn for dummy app
@@ -57,9 +57,11 @@ jobs:
       uses: actions/cache@v2
       with:
         path: spec/dummy/vendor/bundle
-        key: v4-dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}
+        key: v5-dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}
     - name: Install Ruby Gems for dummy app
       run: cd spec/dummy && bundle lock --add-platform 'x86_64-linux' && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
+    - name: generate file system-based packs
+      run: cd spec/dummy && RAILS_ENV=test bundle exec rake react_on_rails:generate_packs
     - name: Build test bundles for dummy app
       run: cd spec/dummy && yarn run build:test
     - id: get-sha
@@ -68,7 +70,7 @@ jobs:
       uses: actions/cache@v2
       with:
         path: spec/dummy/public/webpack
-        key: v4-dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}
+        key: v5-dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}
 
   main:
     needs: build-dummy-app-webpack-test-bundles
@@ -77,7 +79,7 @@ jobs:
         ruby: [2.7]
         node: [14]
         rake_task: ['run_rspec:all_dummy', 'run_rspec:all_but_examples', 'run_rspec:examples']
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
     - uses: actions/checkout@v2
     - name: Setup Ruby
@@ -101,29 +103,29 @@ jobs:
       uses: actions/cache@v2
       with:
         path: node_modules
-        key: v4-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
+        key: v5-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
     - name: Save root ruby gems to cache
       uses: actions/cache@v2
       with:
         path: vendor/bundle
-        key: v4-package-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}
+        key: v5-package-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}
     - name: Save dummy app ruby gems to cache
       uses: actions/cache@v2
       with:
         path: spec/dummy/vendor/bundle
-        key: v4-dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}
+        key: v5-dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}
     - name: Save spec/dummy/node_modules to cache
       uses: actions/cache@v2
       with:
         path: spec/dummy/node_modules
-        key: v4-dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/yarn.lock') }}
+        key: v5-dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/yarn.lock') }}
     - id: get-sha
       run: echo "::set-output name=sha::$(git rev-parse HEAD)"
     - name: Save test webpack bundles to cache (for build number checksum used by rspec job)
       uses: actions/cache@v2
       with:
         path: spec/dummy/public/webpack
-        key: v4-dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}
+        key: v5-dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}
 
     - name: Install Node modules with Yarn for renderer package
       run: |
@@ -157,9 +159,9 @@ jobs:
     - name: Increase the amount of inotify watchers
       run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
     - name: Prep for CI
-      run: bundle exec rake prepare_for_ci
+      run: bundle exec rails prepare_for_ci
     - name: Main CI
-      run: bundle exec rake ${{ matrix.rake_task }}
+      run: bundle exec rails ${{ matrix.rake_task }}
     - name: Store test results
       uses: actions/upload-artifact@v2
       with:

data/.github/workflows/package-js-tests.yml

@@ -7,7 +7,7 @@ jobs:
     strategy:
       matrix:
         node: [12, 14]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
     - uses: actions/checkout@v2
     - name: Setup Node
@@ -25,7 +25,7 @@ jobs:
       uses: actions/cache@v2
       with:
         path: node_modules
-        key: v4-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
+        key: v5-package-node-modules-cache-${{ hashFiles('yarn.lock') }}
     - name: Install Node modules with Yarn for renderer package
       run: |
         yarn install --no-progress --no-emoji

data/.github/workflows/rspec-package-specs.yml

@@ -8,7 +8,7 @@ jobs:
       matrix:
         ruby: [2.7]
         node: [14]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
     - uses: actions/checkout@v2
     - name: Setup Ruby
@@ -28,7 +28,7 @@ jobs:
       uses: actions/cache@v2
       with:
         path: vendor/bundle
-        key: v4-package-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}
+        key: v5-package-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}
     - name: Install Ruby Gems for package
       run: bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
     - name: Run rspec tests

data/.rubocop.yml

@@ -94,6 +94,8 @@ RSpec/AnyInstance:
   Exclude:
     - 'spec/react_on_rails/git_utils_spec.rb'
     - 'spec/react_on_rails/locales_to_js_spec.rb'
+    - 'spec/react_on_rails/binstubs/dev_spec.rb'
+    - 'spec/react_on_rails/binstubs/dev_static_spec.rb'
 
 RSpec/DescribeClass:
   Enabled: false
@@ -111,6 +113,8 @@ RSpec/BeforeAfterAll:
   Exclude:
     - 'spec/react_on_rails/generators/dev_tests_generator_spec.rb'
     - 'spec/react_on_rails/generators/install_generator_spec.rb'
+    - 'spec/react_on_rails/binstubs/dev_spec.rb'
+    - 'spec/react_on_rails/binstubs/dev_static_spec.rb'
 
 RSpec/MessageChain:
   Enabled: false

data/CHANGELOG.md

@@ -17,6 +17,15 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
 
+### [13.3.0] - 2022-01-29
+### Fixed
+- Fixed pack not found warning while using `react_component` and `react_component_hash` helpers, even when corresponding chunks are present. [PR 1511](https://github.com/shakacode/react_on_rails/pull/1511) by [pulkitkkr](https://github.com/pulkitkkr)
+- Fixed FS-based packs generation functionality to trigger pack generation  on the creation of a new react component inside `components_subdirectory`. [PR 1506](https://github.com/shakacode/react_on_rails/pull/1506) by [pulkitkkr](https://github.com/pulkitkkr)
+- Upgrade several JS dependencies to fix security issues. [PR 1514](https://github.com/shakacode/react_on_rails/pull/1514) by [ahangarha](https://github.com/ahangarha)
+
+### Added
+- Added `./bin/dev` and `./bin/dev-static` executables to ease and standardize running the dev server. [PR 1491](https://github.com/shakacode/react_on_rails/pull/1491) by [ahangarha](https://github.com/ahangarha)
+
 ### [13.2.0] - 2022-12-23
                                            
 ### Fixed
@@ -1051,7 +1060,8 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/13.2.0...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/13.3.0...master
+[13.3.0]: https://github.com/shakacode/react_on_rails/compare/13.2.0...13.3.0
 [13.2.0]: https://github.com/shakacode/react_on_rails/compare/13.1.0...13.2.0
 [13.1.0]: https://github.com/shakacode/react_on_rails/compare/13.0.2...13.1.0
 [13.0.2]: https://github.com/shakacode/react_on_rails/compare/13.0.1...13.0.2

data/Gemfile.development_dependencies

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-gem "shakapacker", ">= 6.4.0"
+gem "shakapacker", "6.5.1"
 gem "bootsnap", require: false
 gem "rails", "~> 7.0"
 gem "sqlite3"

data/README.md

@@ -98,6 +98,11 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 # Supporters
 
+The following companies support our open source projects, and ShakaCode uses their products!
+
+<br />
+<br />
+
 <a href="https://www.jetbrains.com">
   <img src="https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png" alt="JetBrains" height="120px">
 </a>
@@ -122,8 +127,3 @@ The gem is available as open source under the terms of the [MIT License](https:/
 <a href="https://www.honeybadger.io">
   <img src="https://user-images.githubusercontent.com/4244251/184881133-79ee9c3c-8165-4852-958e-31687b9536f4.png" alt="Honeybadger" height="55px">
 </a>
-
-<br />
-<br />
-
-The following companies support our open source projects, and ShakaCode uses their products!

data/docs/getting-started.md

@@ -14,13 +14,20 @@ generated using `rails new my_app --javascript=webpack`). If your
 application is not yet set up to use webpacker, please see 
 [the instructions for installing into an existing Rails app](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/).*
 
-1. Add the `react_on_rails` gem to Gemfile:
+1. Add the `shakapacker` and `react_on_rails` gem to Gemfile:
 
    ```bash
+   bundle add shakapacker --strict
    bundle add react_on_rails --strict
    ```
 
-2. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
+2. Run installation command for webpacker:
+
+   ```bash
+   rails webpacker:install
+   ```
+
+3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
 
 3. Run the generator:
 
@@ -30,9 +37,8 @@ application is not yet set up to use webpacker, please see
 
 4. Start the app:
 
-   ```bash
-   rails s
-   ```
+   - Run `./bin/dev` for HMR
+   - Run `./bin/dev-static` for statically created bundles (no HMR)
 
 5. Visit http://localhost:3000/hello_world.
 

data/docs/guides/configuration.md

@@ -47,6 +47,11 @@ for all client files, including your sources and node_modules.
 # NOTE: you typically will leave the commented out configurations set to their defaults.
 # Thus, you only need to pay careful attention to the non-commented settings in this file.
 ReactOnRails.configure do |config|
+  # You can optionally add values to your rails_context. This object is passed
+  # every time a component renders.
+  # See below for an example definition of RenderingExtension
+  config.rendering_extension = RenderingExtension
+  
   # `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,
@@ -74,6 +79,10 @@ ReactOnRails.configure do |config|
   # In this example, the module BuildProductionCommand would have a class method `call`.
   config.build_production_command = "RAILS_ENV=production bin/webpacker"
 
+  # NOTE:
+  # When specifying `build_production_command`, you need to disable `rails/webpacker` 
+  # configuration by setting `webpacker_precompile: false` in your `config/webpacker.yml` file.
+
   # See bottom for an example of the BuildProductionCommand module.
   # config.build_production_command = BuildProductionCommand
   # If you wish to utilize ReactOnRailsPro production bundle caching logic, then use
@@ -95,6 +104,11 @@ ReactOnRails.configure do |config|
   # If you are hashing this file (supposing you are using the same file for client rendering), then
   # you should include a name that matches your bundle name in your webpack config.
   config.server_bundle_js_file = "server-bundle.js"
+  
+  # `prerender` means server-side rendering
+  # default is false. This is an option for view helpers `render_component` and `render_component_hash`.
+  # Set to true to change the default value to true. 
+  config.prerender = false
 
   # THE BELOW OPTIONS FOR SERVER-SIDE RENDERING RARELY NEED CHANGING
   #
@@ -154,14 +168,19 @@ ReactOnRails.configure do |config|
   ################################################################################
   ################################################################################
   # FILE SYSTEM BASED COMPONENT REGISTRY
+  # `render_component` and `render_component_hash` view helper methods can
+  # auto-load the bundle for the generated component, to avoid having to specify the
+  # bundle manually for each view with the component.
   ################################################################################
   # components_subdirectory is the name of the subdirectory matched to detect and register components automatically
   # The default is nil. You can enable the feature by updating it in the next line.
-  config.components_subdirectory = "ror_components"
+  config.components_subdirectory = nil
+  # Change to a value like this example to enable this feature 
+  # config.components_subdirectory = "ror_components"
 
-  # For automated component registry, `render_component` view helper method tries to load bundle for component from
-  # generated directory. default is false, you can pass option at the time of individual usage or update the default
-  # in the following line
+  # Default configuration to auto loading bundles for components.
+  # default is false. The default can be overrident as an option in calls to view helpers
+  # `render_component` and `render_component_hash`. You may set to true to change the default to auto loading.
   config.auto_load_bundle = false
 
   ################################################################################
@@ -184,20 +203,6 @@ ReactOnRails.configure do |config|
   # The default format is json
   config.i18n_output_format = 'json'
 
-  ################################################################################
-  ################################################################################
-  # CLIENT RENDERING OPTIONS
-  # Below options can be overridden by passing options to the react_on_rails
-  # `render_component` view helper method.
-  ################################################################################
-  # default is false
-  config.prerender = false
-
-  # You can optionally add values to your rails_context. This object is passed
-  # every time a component renders.
-  # See below for an example definition of RenderingExtension
-  config.rendering_extension = RenderingExtension
-
   ################################################################################
   ################################################################################
   # TEST CONFIGURATION OPTIONS

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

@@ -180,6 +180,8 @@ The default value of the `auto_load_bundle` parameter can be specified by settin
 
 If server rendering is enabled, the component will be registered for usage both in server and client rendering. In order to have separate definitions for client and server rendering, name the component files as `ComponentName.server.jsx` and `ComponentName.client.jsx`. The `ComponentName.server.jsx` file will be used for server rendering and the `ComponentName.client.jsx` file for client rendering. If you don't want the component rendered on the server, you should only have the `ComponentName.client.jsx` file.
 
+Once generated, all server entrypoints will be imported into a file named `[ReactOnRails.configuration.server_bundle_js_file]-generated.js`, which in turn will be imported into a source file named the same as `ReactOnRails.configuration.server_bundle_js_file`. If your server bundling logic is such that your server bundle source entrypoint is not named the same as your `ReactOnRails.configuration.server_bundle_js_file` & changing it would be difficult, please let us know.
+
 *Note: If specifying separate definitions for client and server rendering, please make sure to delete the generalized `ComponentName.jsx` file.*
 
 ### Using Automated Bundle Generation Feature with already defined packs

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

@@ -7,48 +7,46 @@
 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"
+   gem "react_on_rails", "13.1.0" # Use the latest and the exact version
+   gem "shakapacker", "6.5.4"
    ```
 
-1. Add the webpacker and react_on_rails gems
-_Use the latest version for react_on_rails._
+   Or use `bundle add`:
 
-```
-bundle add webpacker                 
-bundle add react_on_rails --version=12.0.4 --strict
-```
+   ```bash
+   bundle add react_on_rails --version=13.1.0 --strict
+   bundle add shakapacker --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
+   rails webpacker:install
    ```
 
 3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
 
-4. See help for the generator:
+4. Run the generator with a simple "Hello World" example (more options below):
 
    ```bash
-   $ rails generate react_on_rails:install --help
+   rails generate react_on_rails:install
    ```
 
-5. Run the generator with a simple "Hello World" example (more options below):
+   For more information about this generator use `--help` option:
 
    ```bash
-   $ rails generate react_on_rails:install
+   rails generate react_on_rails:install --help
    ```
+5. Ensure that you have `overmind` or `foreman` installed
 
-6. Ensure that you have `foreman` installed: `gem install foreman`.
-
-7. Start your Rails server:
+6. Start your Rails server:
 
    ```bash
-   $ foreman start -f Procfile.dev
+   ./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.
 
-8. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world). 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).
 
 ## Installation
 
@@ -60,7 +58,7 @@ See the [Installation Overview](https://www.shakacode.com/react-on-rails/docs/ad
 All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command (assuming you are in the directory where you have your `node_modules`):
 
 ```bash
-$ yarn add react-on-rails --exact
+yarn add react-on-rails --exact
 ```
 
 That will install the latest version and update your package.json. **NOTE:** the `--exact` flag will ensure that you do not have a "~" or "^" for your react-on-rails version in your package.json.

data/docs/guides/tutorial.md

@@ -45,25 +45,23 @@ Then we need to create a fresh Rails application as following.
 First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
 
 ```bash
-cd <directory where you want to create your new Rails app>
+# For Rails 6.x
+rails new test-react-on-rails --skip-javascript
 
-# Any name you like for the rails app
-# Skip javascript so will add that next and get the current version
-# This is for Rails 7
+# For Rails 7.x
 rails new test-react-on-rails --skip-turbolinks --skip-javascript
 
 cd test-react-on-rails
 ```
 
 ## Add the shakapacker and react_on_rails gems
-To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
-of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
-_Use the latest version for `react_on_rails` and `shakapacker`._
-
-```
-gem 'react_on_rails', '13.0.1'         # prefer exact gem version to match npm version
-gem 'shakapacker', '6.4.0'             # prefer exact gem version to match npm version
+We recommend using the latest version of these gems. Otherwise, specify the
+exact versions of both the gem and npm package. In other words, don't use
+the `^` or `~` in the version specifications.
 
+```bash
+bundle add react_on_rails --strict
+bundle add shakapacker --strict
 ```
 
 Note: The latest released React On Rails version is considered stable. Please use the latest
@@ -71,32 +69,34 @@ version to ensure you get all the security patches and the best support.
 
 ## Run the shakapacker (webpacker) generator
 
-```terminal
+```bash
 bundle exec rails webpacker:install
 ```
 
-**Let's commit everything before installing React on Rails.**
+Commit all the changes so far to avoid getting errors in the next step.
 
+```bash
+git commit -am "Initial commit"
 ```
-# Here are git commands to make a new git repo and commit everything.
-# Newer versions of Rails create the git repo by default.
-git add -A
-git commit -m "Initial commit"
-```
+
+Alternatively you can use `--ignore-warnings` in the next step.
 
 ## Run the React on Rails Generator
 
-Install React on Rails: `rails generate react_on_rails:install`. You need to first git commit your files before running the generator, or else it will generate an error.
+```bash
+rails generate react_on_rails:install
+```
+
+You will be prompted to approve changes in certain files. Press `enter` to proceed
+one by one or enter `a` to replace all configuration files required by the project.
+You can check the diffs before you commit to see what changed.
 
 Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
-If you want the redux install: `rails generate react_on_rails:install --redux`
+If you want the redux install, run:
 
+```bash
+rails generate react_on_rails:install --redux
 ```
-bundle exec rails generate react_on_rails:install
-```
-
-Enter `a` to replace all configuration files required by the project. You can check the diffs
-before you commit to see what changed.
 
 ## Setting up your environment variables
 
@@ -108,14 +108,18 @@ EXECJS_RUNTIME=Node
 
 Then run the server with one of the following options:
 
-## Running with HMR
-```
-foreman start -f Procfile.dev
-```
+## Running the app
 
-## Running without HMR, statically creating the bundles
+### For HMR:
+
+```bash
+./bin/dev
 ```
-foreman start -f Procfile.dev-static
+
+### Without HMR, statically creating the bundles
+
+```bash
+./bin/dev-static
 ```
 
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!

data/lib/generators/react_on_rails/base_generator.rb

@@ -144,6 +144,21 @@ module ReactOnRails
 
                 <%= javascript_pack_tag 'hello-world-bundle' %>
 
+            - To start Rails server run:
+
+                ./bin/dev # Running with HMR
+
+              or
+
+                ./bin/dev # Running with statically created bundles, without HMR
+
+            - To server render, change this line app/views/hello_world/index.html.erb to
+              `prerender: true` to see server rendering (right click on page and select "view source").
+
+                <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
+
+          Alternative steps to run the app:
+
             - Run `rails s` to start the Rails server.
 
             - Run bin/webpacker-dev-server to start the Webpack dev server for compilation of Webpack
@@ -152,18 +167,8 @@ module ReactOnRails
 
             - Visit http://localhost:3000/hello_world and see your React On Rails app running!
 
-            - Alternately, run the foreman command to start the rails server and run webpack#{' '}
-              in watch mode.
-
-                foreman start -f Procfile.dev-static
-
             - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
               and bin/webpacker-dev-server. Or use Procfile.dev.
-
-            - To server render, change this line app/views/hello_world/index.html.erb to
-              `prerender: true` to see server rendering (right click on page and select "view source").
-
-                <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
         MSG
       end