shakacode · justin808 · Sep 29, 2025
diff --git a/Gemfile b/Gemfile
@@ -6,7 +6,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 ruby "3.3.4"
 
 gem "react_on_rails", "16.1.1"
-gem "shakapacker", "8.2.0"
+gem "shakapacker", "8.4.0"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
 gem "listen"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -390,7 +390,7 @@ GEM
       websocket (~> 1.0)
     semantic_range (3.1.0)
     sexp_processor (4.17.1)
-    shakapacker (8.2.0)
+    shakapacker (8.4.0)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -499,7 +499,7 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver (~> 4)
-  shakapacker (= 8.2.0)
+  shakapacker (= 8.4.0)
   spring
   spring-commands-rspec
   stimulus-rails (~> 1.3)

diff --git a/Procfile.dev b/Procfile.dev
@@ -1,7 +1,5 @@
 # Procfile for development using HMR
 # You can run these commands in separate shells
-rescript: yarn res:dev
-redis: redis-server
 rails: bundle exec rails s -p 3000
-wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
-wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
+wp-client: WEBPACK_SERVE=true bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
diff --git a/Procfile.dev-prod-assets b/Procfile.dev-prod-assets
@@ -1,10 +1,8 @@
-# You can run these commands in separate shells
-web: bin/rails s -p 3001
-redis: redis-server
+# Procfile for development with production assets 
+# Uses production-optimized, precompiled assets with development environment
+# Uncomment additional processes as needed for your app
 
-# Next line runs a watch process with webpack to compile the changed files.
-# When making frequent changes to client side assets, you will prefer building webpack assets
-# upon saving rather than when you refresh your browser page.
-# Note, if using React on Rails localization you will need to run
-# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
-webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
+rails: bundle exec rails s -p 3001
+# sidekiq: bundle exec sidekiq -C config/sidekiq.yml
+# redis: redis-server
+# mailcatcher: mailcatcher --foreground
diff --git a/Procfile.dev-static-assets b/Procfile.dev-static-assets
@@ -1,10 +1,2 @@
-# You can run these commands in separate shells
-web: bin/rails s -p 3000
-redis: redis-server
-
-# Next line runs a watch process with webpack to compile the changed files.
-# When making frequent changes to client side assets, you will prefer building webpack assets
-# upon saving rather than when you refresh your browser page.
-# Note, if using React on Rails localization you will need to run
-# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
-webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/shakapacker -w'
+web: bin/rails server -p 3000
+js: bin/shakapacker --watch
diff --git a/app/controllers/hello_world_controller.rb b/app/controllers/hello_world_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class HelloWorldController < ApplicationController
+  layout "hello_world"
+
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end
diff --git a/app/javascript/generated b/app/javascript/generated
@@ -0,0 +1 @@
+../../client/app/generated
diff --git a/app/javascript/packs/generated b/app/javascript/packs/generated
@@ -0,0 +1 @@
+../../../client/app/packs/generated
diff --git a/app/javascript/packs/server-bundle.js b/app/javascript/packs/server-bundle.js
@@ -0,0 +1,3 @@
+// import statement added by react_on_rails:generate_packs rake task
+import "./../generated/server-bundle-generated.js"
+// Placeholder comment - auto-generated imports will be prepended here by react_on_rails:generate_packs
diff --git a/app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css b/app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css
@@ -0,0 +1,4 @@
+.bright {
+  color: green;
+  font-weight: bold;
+}
diff --git a/app/views/layouts/hello_world.html.erb b/app/views/layouts/hello_world.html.erb
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ReactOnRailsWithShakapacker</title>
+    <%= csrf_meta_tags %>
+
+    <!-- Empty pack tags - React on Rails injects component CSS/JS here -->
+    <%= stylesheet_pack_tag %>
+    <%= javascript_pack_tag %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>
diff --git a/babel.config.js b/babel.config.js
@@ -1,32 +1,36 @@
+// The source code including full typescript support is available at: 
+// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/babel.config.js
+
 module.exports = function (api) {
-  const defaultConfigFunc = require('shakapacker/package/babel/preset.js');
-  const resultConfig = defaultConfigFunc(api);
-  const isProductionEnv = api.env('production');
+  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isProductionEnv = api.env('production')
 
   const changesOnDefault = {
     presets: [
       [
         '@babel/preset-react',
         {
-          runtime: 'automatic',
           development: !isProductionEnv,
           useBuiltIns: true,
-        },
-      ],
+          runtime: 'automatic'
+        }
+      ]
     ].filter(Boolean),
     plugins: [
-      process.env.WEBPACK_SERVE && 'react-refresh/babel',
-      isProductionEnv && [
-        'babel-plugin-transform-react-remove-prop-types',
+      // Enable React Refresh (Fast Refresh) only when webpack-dev-server is running (HMR mode)
+      // This prevents React Refresh from trying to connect when using static compilation
+      !isProductionEnv && process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
         {
-          removeImport: true,
-        },
-      ],
+          removeImport: true
+        }
+      ]
     ].filter(Boolean),
-  };
+  }
 
-  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets];
-  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins];
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
 
-  return resultConfig;
-};
+  return resultConfig
+}
diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb
@@ -1,90 +1,67 @@
 # frozen_string_literal: true
 
-# Shown below are the defaults for configuration
-ReactOnRails.configure do |config|
-  # Auto-registration configuration for v16
-  config.components_subdirectory = "ror_components"
-  config.auto_load_bundle = true
-
-  config.build_test_command = "RAILS_ENV=test bin/shakapacker"
-  config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker"
+# See https://github.com/shakacode/react_on_rails/blob/master/docs/guides/configuration.md
+# for many more options.
 
-  # This is the file used for server rendering of React when using `(prerender: true)`
-  # If you are never using server rendering, you may set this to "".
-  # If you are using the same file for client and server rendering, having this set probably does
-  # not affect performance.
-  config.server_bundle_js_file = "server-bundle.js"
+ReactOnRails.configure do |config|
+  # 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.
+  # If nil, then the standard shakacode/shakapacker assets:precompile will run
+  # config.build_production_command = nil
 
-  # Server bundle output path for private SSR bundles (React on Rails 16+)
-  # This keeps server bundles separate from public assets for security
-  # Using the default from React on Rails docs
-  config.server_bundle_output_path = "ssr-generated"
+  ################################################################################
+  ################################################################################
+  # TEST CONFIGURATION OPTIONS
+  # Below options are used with the use of this test helper:
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  ################################################################################
 
-  # React on Rails 16 compatibility: Workaround for removed error handling
+  # If you are using this in your spec_helper.rb (or rails_helper.rb):
   #
-  # BREAKING CHANGE in v16: React on Rails 14.2.1 had robust error handling that would
-  # fallback to the Shakapacker output path when bundle lookup failed. This was removed
-  # in v16.0.1.rc.2, causing it to look in the wrong directory during tests.
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
   #
-  # This configuration tells React on Rails where to find bundles in test environment.
-  # Without this, it defaults to public/webpack/test/ instead of public/packs/
-  config.generated_assets_dir = Rails.public_path.join("packs").to_s if Rails.env.test?
+  # with rspec then this controls what npm command is run
+  # to automatically refresh your webpack assets on every test run.
+  #
+  # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
+  # and set the config/shakapacker.yml option for test to true.
+  config.build_test_command = "RAILS_ENV=test bin/shakapacker"
 
   ################################################################################
-  # CLIENT RENDERING OPTIONS
-  # Below options can be overriden by passing options to the react_on_rails
-  # `render_component` view helper method.
-  ################################################################################
-
-  # Default is false. Can be overriden at the component level.
-  # Set to false for debugging issues before turning on to true.
-  config.prerender = true
-
-  # default is true for development, off otherwise
-  config.trace = Rails.env.development?
-
   ################################################################################
   # SERVER RENDERING OPTIONS
-  # Applicable options can be overriden by passing options to the react_on_rails
-  # `render_component` view helper method.
   ################################################################################
+  # This is the file used for server rendering of React when using `(prerender: true)`
+  # If you are never using server rendering, you should set this to "".
+  # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
+  # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
+  # JavaScript execution instances which should handle any component requested.
+  #
+  # While you may configure this to be the same as your client bundle file, this file is typically
+  # different. You should have ONE server bundle which can create all of your server rendered
+  # React components.
+  #
+  config.server_bundle_js_file = "server-bundle.js"
 
-  # If set to true, this forces Rails to reload the server bundle if it is modified
-  config.development_mode = Rails.env.development?
-
-  # For server rendering. This can be set to false so that server side messages are discarded.
-  # Default is true. Be cautious about turning this off.
-  config.replay_console = true
-
-  # Default is true. Logs server rendering messages to Rails.logger.info
-  config.logging_on_server = true
-
-  # Change to true to raise exception on server if the JS code throws. Let's do this only if not
-  # in production, as the JS code might still work on the client and we don't want to blow up the
-  # whole Rails page.
-  config.raise_on_prerender_error = !Rails.env.production?
+  # Configure where server bundles are output. Defaults to "ssr-generated".
+  # This should match your webpack configuration for server bundles.
+  config.server_bundle_output_path = "ssr-generated"
 
-  # Server rendering only (not for render_component helper)
-  # You can configure your pool of JS virtual machines and specify where it should load code:
-  # On MRI, use `therubyracer` for the best performance
-  # (see [discussion](https://github.com/reactjs/react-rails/pull/290))
-  # On MRI, you'll get a deadlock with `pool_size` > 1
-  # If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
-  config.server_renderer_pool_size = 1 # increase if you're on JRuby
-  config.server_renderer_timeout = 20 # seconds
+  # Enforce that server bundles are only loaded from private (non-public) directories.
+  # When true, server bundles will only be loaded from the configured server_bundle_output_path.
+  # This is recommended for production to prevent server-side code from being exposed.
+  config.enforce_private_server_bundles = true
 
   ################################################################################
-  # I18N OPTIONS
-  ################################################################################
-  # Replace the following line to the location where you keep translation.js & default.js.
-  config.i18n_dir = Rails.root.join("client/app/libs/i18n")
-
   ################################################################################
-  # MISCELLANEOUS OPTIONS
+  # FILE SYSTEM BASED COMPONENT REGISTRY
   ################################################################################
-
-  # This allows you to add additional values to the Rails Context. Implement one static method
-  # called `custom_context(view_context)` and return a Hash.
-  config.rendering_extension = nil
-  config.i18n_output_format = "js"
+  # `components_subdirectory`  is the name of the matching directories that contain automatically registered components
+  # for use in the Rails views. The default is nil, you can enable the feature by updating it in the next line.
+  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
+  config.auto_load_bundle = true
 end
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 Rails.application.routes.draw do
+  get 'hello_world', to: 'hello_world#index'
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 
   # Serve websocket cable requests in-process