Apply React on Rails 16.1.1 generator updates with proper SSR configuration

- Run `bin/rails generate react_on_rails:install` to get proper v16 configuration
- Server bundles now output to `ssr-generated` directory (private, not public)
- Use new configuration options:
  - `server_bundle_output_path = "ssr-generated"`
  - `enforce_private_server_bundles = true`
- Update webpack config to output server bundles to private directory
- Enable auto component registration with `components_subdirectory`
- Fix RSpec configuration syntax error from generator

This properly implements the React on Rails 16 pattern where server bundles
are kept in a private directory separate from public client assets for security.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: justin808

.gitignore

@@ -53,3 +53,7 @@ lib/bs
 /lib/ocaml
 
 client/app/bundles/comments/rescript/**/*.bs.js
+
+# Generated React on Rails packs
+**/generated/**
+ssr-generated

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: bin/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
+rails: bundle exec rails s -p 3000
+wp-client: WEBPACK_SERVE=true bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

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

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

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

app/javascript/packs/client-bundle.js

@@ -0,0 +1,35 @@
+import ReactOnRails from 'react-on-rails';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import 'expose-loader?exposes=$,jQuery!jquery';
+import 'jquery-ujs';
+
+import App from '../bundles/comments/startup/App';
+import RouterApp from '../bundles/comments/startup/ClientRouterApp';
+import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen';
+import routerCommentsStore from '../bundles/comments/store/routerCommentsStore';
+import commentsStore from '../bundles/comments/store/commentsStore';
+import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
+import Footer from '../bundles/comments/components/Footer/Footer';
+import RescriptShow from '../bundles/comments/rescript/ReScriptShow.bs.js';
+
+import '../assets/styles/application';
+
+ReactOnRails.setOptions({
+  // traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef
+  // process.env.TRACE_TURBOLINKS -> error: development is not defined
+  traceTurbolinks: true,
+});
+
+ReactOnRails.register({
+  App,
+  RouterApp,
+  NavigationBarApp,
+  SimpleCommentScreen,
+  Footer,
+  RescriptShow,
+});
+
+ReactOnRails.registerStore({
+  routerCommentsStore,
+  commentsStore,
+});

app/javascript/packs/server-bundle.js

@@ -0,0 +1 @@
+// Placeholder comment - auto-generated imports will be prepended here by react_on_rails:generate_packs

app/javascript/packs/stimulus-bundle.js

@@ -0,0 +1,24 @@
+import ReactOnRails from 'react-on-rails';
+import 'jquery-ujs';
+import { Turbo } from '@hotwired/turbo-rails';
+
+// eslint-disable-next-line no-unused-vars
+import controllers from '../controllers';
+
+import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
+import Footer from '../bundles/comments/components/Footer/Footer';
+
+import '../assets/styles/application';
+
+Turbo.session.drive = false;
+
+ReactOnRails.setOptions({
+  // traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef
+  // process.env.TRACE_TURBOLINKS -> error: development is not defined
+  traceTurbolinks: true,
+});
+
+ReactOnRails.register({
+  NavigationBarApp,
+  Footer,
+});

app/javascript/src/HelloWorld/ror_components/HelloWorld.client.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import * as style from './HelloWorld.module.css';
+
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
+
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label className={style.bright} htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
+
+export default HelloWorld;

app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css

@@ -0,0 +1,4 @@
+.bright {
+  color: green;
+  font-weight: bold;
+}