Added same_bundle_for_client_and_server

Added configuration option `same_bundle_for_client_and_server` with default `false` because 1. Production applications would typically have a server bundle that differs from the client bundle 2. This change only affects trying to use HMR with react_on_rails with rails/webpacker. The previous behavior was to always go to the webpack-dev-server for the server bundle if the webpack-dev-server was running _and_ the server bundle was found in the `manifest.json`. If you are using the **same bundle for client and server rendering**, then set this configuration option to `true`. Also, remove requirement that server bundle not have the default deployment path. A subdirectory can be specified for the server_bundle_js_file.
shakacode · May 18, 2020 · c934d55 · c934d55
1 parent 62bae24
commit c934d55
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 178 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,19 @@ for details.
 * Removal of support for old Rubies and Rails.
 * Removal of config.symlink_non_digested_assets_regex as it's no longer needed with rails/webpacker.
   If any business needs this, we can move the code to a separate gem.
+* Added configuration option `same_bundle_for_client_and_server` with default `false` because
+
+  1. Production applications would typically have a server bundle that differs from the client bundle
+  2. This change only affects trying to use HMR with react_on_rails with rails/webpacker. 
+
+  The previous behavior was to always go to the webpack-dev-server for the server bundle if the 
+  webpack-dev-server was running _and_ the server bundle was found in the `manifest.json`. 
+
+  If you are using the **same bundle for client and server rendering**, then set this configuration option
+  to `true`. By [justin808](https://github.com/shakacode/react_on_rails/pull/1240).
+
+#### Improved
+- Removed unnecessary restriction to keep the server bundle in the same directory with the client bundles. Rails/webpacker 4 has an advanced cleanup that will remove any files in the directory of other webpack files. Removing this restriction allows the server bundle to be created in a sibling directory. By [justin808](https://github.com/shakacode/react_on_rails/pull/1240).
 
 ### [11.3.0] - 2019-05-24
 #### Added

diff --git a/Gemfile.rails32 b/Gemfile.rails32
diff --git a/docs/basics/configuration.md b/docs/basics/configuration.md
@@ -65,52 +65,6 @@ ReactOnRails.configure do |config|
   # if you don't want react_on_rails building this file for you.
   config.build_production_command = "RAILS_ENV=production bin/webpack"
 
-  ################################################################################
-  ################################################################################
-  # TEST CONFIGURATION OPTIONS
-  # Below options are used with the use of this test helper:
-  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  ################################################################################
-
-  # If you are using this in your spec_helper.rb (or rails_helper.rb):
-  #
-  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  #
-  # with rspec then this controls what yarn command is run
-  # to automatically refresh your webpack assets on every test run.
-  #
-  config.build_test_command = "RAILS_ENV=test bin/webpack"
-
-  # Directory where your generated assets go. All generated assets must go to the same directory.
-  # If you are using webpacker, this value will come from your config/webpacker.yml file. 
-  # This is the default in webpacker.yml:
-  #   public_output_path: packs-test
-  # which means files in /public/packs-test
-  #
-  # Alternately, you may configure this if you are NOT using webpacker. It is relative to your Rails 
-  # root directory. A custom, non-webpacker, config might use something like:
-  #
-  # config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
-  # This setting should not be used if using webpacker. 
-
-  # CONFIGURE YOUR SOURCE FILES 
-  # The test helper needs to know where your JavaScript files exist. The default is configured
-  # by your config/webpacker.yml soure_path:
-  # source_path: client/app/javascript # if using recommended /client directory
-  #
-  # If you are not using webpacker, the `node_modules_location` is assumed to be the location of your source
-  # files.
-
-  # 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: 
-  #
-  config.webpack_generated_files = %w( server-bundle.js manifest.json )
-
-  # You can optionally add values to your rails_context. See example below for RenderingExtension
-  # config.rendering_extension = RenderingExtension
-
   ################################################################################
   ################################################################################
   # SERVER RENDERING OPTIONS
@@ -127,27 +81,35 @@ 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 
+  #
+  # 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.
+  # Furthermore, if you are not hashing the server bundle (not in the manifest.json), then React on Rails
+  # will only look for the server bundle to be created in the typical file location, typically by
+  # a `webpack --watch` process. 
+  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.
   config.development_mode = Rails.env.development?
 
-  # For server rendering so that it replays in the browser console.
+  # For server rendering so that the server-side console replays in the browser console.
   # This can be set to false so that server side messages are not displayed in the browser.
-  # Default is true. Be cautious about turning this off.
+  # Default is true. Be cautious about turning this off, as it can make debugging difficult.
   # Default value is true
-  # 
   config.replay_console = true
 
   # Default is true. Logs server rendering messages to Rails.logger.info. If false, you'll only
   # see the server rendering messages in the browser console.
-  #
   config.logging_on_server = true
 
   # 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? 
 
   ################################################################################
@@ -193,8 +155,47 @@ ReactOnRails.configure do |config|
   ################################################################################
   # default is false
   config.prerender = false
-end
 
+  # You can optionally add values to your rails_context. This object is passed
+  # every time a component renders.
+  # See example below for an example definition of RenderingExtension
+  #
+  # config.rendering_extension = RenderingExtension
+
+  ################################################################################
+  ################################################################################
+  # 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)
+  #
+  # with rspec then this controls what yarn command is run
+  # to automatically refresh your webpack assets on every test run.
+  #
+  config.build_test_command = "RAILS_ENV=test bin/webpack"
+
+  # 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/javascript # if using recommended /client directory
+  #
+  # 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: 
+  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. 
+end
 ```
 
 Example of a RenderingExtension for custom values in the `rails_context`:

diff --git a/docs/basics/webpack-configuration.md b/docs/basics/webpack-configuration.md
@@ -23,7 +23,21 @@ The [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for pr
 
 The two best examples of this pattern are the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and the integration test example in [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy).
 
-In this case, you don't need to understand the nuances of customization of your Wepback config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
+In this case, you don't need to understand the nuances of customization of your Webpack config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
+
+You can access values in the `config/webpacker.yml`
+
+```js
+const { config, devServer } = require('@rails/webpacker');
+```
+
+You will want consider using some of the same values set in these files:
+
+* https://github.com/rails/webpacker/blob/master/package/environments/base.js
+* https://github.com/rails/webpacker/blob/master/package/environments/development.js
+
+**Note**, 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).
 
 ## Option 2: Default Generator Setup: rails/webpacker app/javascript
 

diff --git a/docs/tutorial.md b/docs/tutorial.md
@@ -1,3 +1,10 @@
+
+
+Start work here and work through the tutorial and maybe add a simple configuration for having a different server
+rendering file.
+
+
+
 # React on Rails Basic Tutorial
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 11.2.1.
@@ -17,9 +24,9 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 
 _Note: some of the screen images below show the "npm" command. react_on_rails 6.6.0 and greater uses `yarn`._
 
-## Setting up the environment
+## Setting up your environment
 
-Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 5.x and node version 6+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
+Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 13+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
 
 ```
 nvm install node                # download and install latest stable Node
@@ -28,8 +35,8 @@ nvm list                        # check
 
 brew install yarn               # you can use other installer if desired
 11\.\d+\.\d+
-rvm install 2.5.0               # download and install latest stable Ruby (update to exact version)
-rvm use 2.5.0 --default         # use it and make it default
+rvm install 2.6                 # download and install latest stable Ruby (update to exact version)
+rvm use 2.6 --default           # use it and make it default
 rvm list                        # check
 
 gem install rails               # download and install latest stable Rails
@@ -44,13 +51,13 @@ First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If
 cd <directory where you want to create your new Rails app>
 
 # any name you like for the rails app
-rails new test-react-on-rails --webpack=react 
+rails new test-react-on-rails --webpack=react --skip-sprockets 
 
 cd test-react-on-rails
 bundle
 ```
 
-Note: if you are installing React On Rails in an existing app or an app that uses **Rails pre 5.1.3** (*not for Rails > 5.2*), you will need to run these two commands as well:
+Note: if you are adding React On Rails to an existing app you will instead to run these two commands as well:
 
 ```
 bundle exec rails webpacker:install
@@ -60,7 +67,7 @@ bundle exec rails webpacker:install:react
 Add the **React On Rails** gem to your `Gemfile`:
 
 ```
-gem 'react_on_rails', '11.2.2'         # prefer exact gem version to match npm version
+gem 'react_on_rails', '12.0.0'         # prefer exact gem version to match npm version
 ```
 
 Note: Latest released React On Rails version is considered stable. Please use the latest version to ensure you get all the security patches and the best support.
@@ -81,7 +88,6 @@ Install React on Rails: `rails generate react_on_rails:install` or `rails genera
 
 ```
 rails generate react_on_rails:install
-bundle && yarn
 ```
 
 Then run server with static client side files:
@@ -96,27 +102,34 @@ foreman start -f Procfile.dev-server
 ```
 
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
-Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.
 
-## Using a pre-release of rails/webpacker
-Until `rails/webpacker` v4 ships, or if you ever want to try out the master branch, you can modify the React on Rails tutorial instructions slightly. You can see the sequence of commits here. To summarize:
+*Note, foreman may default to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.*
+
+# HMR vs. React Hot Reloading
+
+First, check that the `hmr` option is `true` in your `config/webpacker.yml` file.
+
+The basic setup will have HMR working with the default webpacker setup. However, the basic will cause a full page refresh each time you save a file.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-**Don't run `rails new` with the `--webpack=react` option**. Instead, add the webpacker gem to the Gemfile such that it points to master, like this if `11.2.1` is the version you want.
 
-```ruby
-gem 'webpacker', github: "rails/webpacker"
-gem 'react_on_rails', '11.2.1' # always use exact version
-```
 
-Then run these commands:
 
-```sh
-bundle exec rails webpacker:install
-yarn add "rails/webpacker" # because the installer has a bug that puts in an invalid version in your package.json.
-bundle exec rails webpacker:install:react
-yarn add --dev webpack-dev-server
-run rails generate react_on_rails:install && bundle && yarn
-```
 
 ### Custom IP & PORT setup (Cloud9 example)
 
@@ -265,6 +278,16 @@ You can turn on server rendering by simply changing the `prerender` option to `t
 <%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>
 ```
 
+If you want to test this out with HMR, then you also need to add this line to your
+`config/intializers/react_on_rails.rb`
+
+```ruby
+  config.same_bundle_for_client_and_server = true
+```
+
+More likely, you will create a different build file for server rendering. However, if you want to
+use the same file from the webpack-dev-server, you'll need to add that line.
+
 Then push to Heroku:
 
 ```