Skip to content

Commit adb172a

Browse files
justin808claude
andcommitted
feat: upgrade to React on Rails v16 with enhanced development tools
### Major Changes - Upgrade react_on_rails from local path to official v16.0.0 gem - Update react-on-rails npm package to v16.0.0 - Fix component conflict by using client/server specific files only ### Enhanced Development Experience - Modernize bin/dev script with ReactOnRails::Dev classes - Add support for --verbose/-v flags for detailed pack generation output - Improve Procfile configurations for better HMR support - Add WEBPACK_SERVE environment variable for proper React Refresh setup ### Configuration Updates - Update shakapacker.yml to latest v8.3 format with comprehensive options - Fix webpack development config for proper React Refresh integration - Improve babel.config.js with conditional React Refresh loading - Add upgrade guidance comments to react_on_rails initializer ### Documentation & Troubleshooting - Add comprehensive upgrade guide (docs/UPGRADE_GUIDE.md) - Add upgrade section to README with generator instructions - Add troubleshooting section for socket path issues with overmind - Create .overmind.env to fix 'File name too long' tmux socket errors - Update quick start instructions to remove manual pack generation step ### Technical Fixes - Remove conflicting HelloWorld.jsx (keeping client/server specific files) - Fix CSS class reference error in HelloWorld.client.jsx - Fix Procfile line endings and WEBPACK_SERVE environment setup - Update package-lock.json to use official npm registry instead of .yalc 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 746b984 commit adb172a

File tree

13 files changed

+402
-221
lines changed

13 files changed

+402
-221
lines changed

.overmind.env

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
OVERMIND_SOCKET=/tmp/ror-demo.sock
2+
OVERMIND_TITLE=ror-demo

Procfile.dev

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Procfile for development using HMR
22
# You can run these commands in separate shells
33
rails: bundle exec rails s -p 3000
4-
wp-client: bin/shakapacker-dev-server
4+
wp-client: WEBPACK_SERVE=true bin/shakapacker-dev-server
55
wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

Procfile.dev-prod-assets

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
rails: bundle exec rails s -p 3001
66
# sidekiq: bundle exec sidekiq -C config/sidekiq.yml
77
# redis: redis-server
8-
# mailcatcher: mailcatcher --foreground
8+
# mailcatcher: mailcatcher --foreground

Procfile.dev-static-assets

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
web: bin/rails server -p 3000
2-
js: bin/shakapacker --watch
2+
js: bin/shakapacker --watch

README.md

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,6 @@ cd react_on_rails-demo-v15-ssr-auto-registration-bundle-splitting
8686
# Install dependencies
8787
bundle install && npm install
8888

89-
# Generate component webpack entries
90-
bundle exec rake react_on_rails:generate_packs
91-
9289
# Start development server
9390
./bin/dev
9491

@@ -105,11 +102,25 @@ open http://localhost:3000
105102

106103
- **`./bin/dev`** - Start development server (3 modes available)
107104
- `./bin/dev` - HMR mode (default, may have FOUC)
108-
- `./bin/dev static` - Static mode (no FOUC, no HMR)
105+
- `./bin/dev static` - Static mode (no FOUC, no HMR)
109106
- `./bin/dev prod` - Production-optimized mode (port 3001)
110-
- **`bundle exec rake react_on_rails:generate_packs`** - Regenerate webpack entries
107+
- **`bundle exec rake react_on_rails:generate_packs`** - Regenerate webpack entries (now with enhanced error display)
111108
- **`./bin/dev help`** - Show all available modes
112109

110+
## 🔄 Upgrading React on Rails
111+
112+
After upgrading to a new major version, run the generator to get latest defaults:
113+
114+
```bash
115+
rails generate react_on_rails:install
116+
```
117+
118+
**Important**: Review changes carefully before applying to avoid overwriting custom configurations. The generator updates:
119+
- `bin/dev` (improved development workflow)
120+
- webpack configurations
121+
- shakapacker.yml settings
122+
- other configuration files
123+
113124
## 🎯 Key Architectural Concepts
114125

115126
This demo showcases React on Rails v15's **file-system-based auto-registration**:
@@ -146,6 +157,21 @@ This sample application **fixes a critical bug** in the official React on Rails
146157

147158
**Perfect for**: Learning React on Rails v15, understanding bundle splitting, or using as a reference implementation.
148159

160+
## 🔧 Troubleshooting
161+
162+
### Socket Path Too Long Error
163+
164+
If you see this error:
165+
```
166+
error connecting to /private/tmp/tmux-501/overmind-react-on-rails-demo-v15... (File name too long)
167+
```
168+
169+
**Solution**: The project directory name is too long for tmux socket paths. We've included a `.overmind.env` file with shorter paths, but if you still encounter issues:
170+
171+
1. The `.overmind.env` file sets: `OVERMIND_SOCKET=/tmp/ror-demo.sock` and `OVERMIND_TITLE=ror-demo`
172+
2. Alternative: Set environment variables manually: `export OVERMIND_SOCKET=/tmp/ror.sock`
173+
3. Or use foreman instead: `gem install foreman && foreman start -f Procfile.dev`
174+
149175
---
150176

151-
**⭐ Star this project if it helped you fix the React on Rails installation issue!**
177+
**⭐ Star this project if it helped you!**

babel.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ module.exports = function (api) {
1818
]
1919
].filter(Boolean),
2020
plugins: [
21-
process.env.WEBPACK_SERVE && 'react-refresh/babel',
21+
// Enable React Refresh (Fast Refresh) only when webpack-dev-server is running (HMR mode)
22+
// This prevents React Refresh from trying to connect when using static compilation
23+
!isProductionEnv && process.env.WEBPACK_SERVE && 'react-refresh/babel',
2224
isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
2325
{
2426
removeImport: true

bin/dev

Lines changed: 46 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -1,191 +1,57 @@
11
#!/usr/bin/env ruby
22
# frozen_string_literal: true
33

4-
def installed?(process)
5-
IO.popen "#{process} -v"
6-
rescue Errno::ENOENT
7-
false
8-
end
4+
# ReactOnRails Development Server
5+
#
6+
# This script provides a simple interface to the ReactOnRails development
7+
# server management. The core logic is implemented in ReactOnRails::Dev
8+
# classes for better maintainability and testing.
9+
#
10+
# Each command uses a specific Procfile for process management:
11+
# - bin/dev (default/hmr): Uses Procfile.dev
12+
# - bin/dev static: Uses Procfile.dev-static-assets
13+
# - bin/dev prod: Uses Procfile.dev-prod-assets
14+
#
15+
# To customize development environment:
16+
# 1. Edit the appropriate Procfile to modify which processes run
17+
# 2. Modify this script for project-specific command-line behavior
18+
# 3. Extend ReactOnRails::Dev classes in your Rails app for advanced customization
19+
# 4. Use classes directly: ReactOnRails::Dev::ServerManager.start(:development, "Custom.procfile")
920

10-
def generate_packs
11-
puts "📦 Generating React on Rails packs..."
12-
system "bundle exec rake react_on_rails:generate_packs"
13-
14-
unless $?.success?
15-
puts "❌ Pack generation failed"
16-
exit 1
17-
end
21+
begin
22+
require "bundler/setup"
23+
require "react_on_rails/dev"
24+
rescue LoadError
25+
# Fallback for when gem is not yet installed
26+
puts "Loading ReactOnRails development tools..."
27+
require_relative "../../lib/react_on_rails/dev"
1828
end
1929

20-
def clean_assets
21-
puts "🧹 Cleaning old Shakapacker assets..."
22-
system "bundle exec rake shakapacker:clobber"
23-
24-
unless $?.success?
25-
puts "⚠️ Asset cleanup failed, continuing anyway..."
26-
else
27-
puts "✅ Old assets cleaned successfully"
28-
end
29-
end
30+
# Parse verbose flag
31+
verbose = ARGV.include?("--verbose") || ARGV.include?("-v")
32+
args = ARGV.reject { |arg| arg == "--verbose" || arg == "-v" }
3033

31-
def run_production_assets
32-
puts "🏭 Starting development server with production assets..."
33-
puts " - Cleaning old assets with Shakapacker"
34-
puts " - Generating React on Rails packs"
35-
puts " - Precompiling assets with production optimizations"
36-
puts " - Running Rails server on port 3001 (development environment)"
37-
puts " - SSL automatically disabled (development environment)"
38-
puts " - No HMR (Hot Module Replacement)"
39-
puts " - CSS extracted to separate files (no FOUC)"
40-
puts " - Using overmind/foreman for process management"
41-
puts ""
42-
puts "💡 Access at: http://localhost:3001"
43-
puts ""
44-
45-
# Clean old assets first
46-
clean_assets
47-
48-
# Generate React on Rails packs first
49-
generate_packs
50-
51-
# Precompile assets in production mode for optimization
52-
puts "🔨 Precompiling assets with production optimizations..."
53-
system "RAILS_ENV=production NODE_ENV=production bundle exec rails assets:precompile"
54-
55-
if $?.success?
56-
puts "✅ Assets precompiled successfully"
57-
puts "🚀 Starting processes with development environment..."
58-
puts " (Using production-optimized assets but development Rails config)"
59-
puts ""
60-
puts "🔒 SSL automatically disabled (development environment)"
61-
puts ""
62-
63-
if installed? "overmind"
64-
system "RAILS_ENV=development overmind start -f Procfile.dev-prod-assets"
65-
elsif installed? "foreman"
66-
system "RAILS_ENV=development foreman start -f Procfile.dev-prod-assets"
67-
else
68-
puts "⚠️ overmind/foreman not found, falling back to direct Rails server..."
69-
puts " For production apps with background jobs, install overmind or foreman"
70-
puts ""
71-
puts "Press Ctrl+C to stop the server"
72-
puts ""
73-
system "RAILS_ENV=development bundle exec rails server -p 3001"
74-
end
75-
else
76-
puts "❌ Asset precompilation failed"
77-
exit 1
78-
end
79-
rescue Errno::ENOENT
80-
warn <<~MSG
81-
ERROR:
82-
Please ensure `Procfile.dev-prod-assets` exists in your project!
83-
MSG
84-
exit!
85-
end
34+
# Set environment variable for verbose mode
35+
ENV["VERBOSE"] = "true" if verbose
8636

87-
def run_dev_assets
88-
puts "⚡ Starting development server with development assets..."
89-
puts " - Generating React on Rails packs"
90-
puts " - Using shakapacker --watch (no HMR)"
91-
puts " - CSS extracted to separate files (no FOUC)"
92-
puts " - Development environment (source maps, faster builds)"
93-
puts " - Auto-recompiles on file changes"
94-
puts ""
95-
puts "💡 Access at: http://localhost:3000"
96-
puts ""
97-
98-
# Generate React on Rails packs first
99-
generate_packs
100-
101-
if installed? "overmind"
102-
system "overmind start -f Procfile.dev-static-assets"
103-
elsif installed? "foreman"
104-
system "foreman start -f Procfile.dev-static-assets"
105-
else
106-
warn <<~MSG
107-
NOTICE:
108-
For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
109-
MSG
110-
exit!
111-
end
112-
rescue Errno::ENOENT
113-
warn <<~MSG
114-
ERROR:
115-
Please ensure `Procfile.dev-static-assets` exists in your project!
116-
MSG
117-
exit!
118-
end
119-
120-
def run_development(process)
121-
generate_packs
122-
123-
system "#{process} start -f Procfile.dev"
124-
rescue Errno::ENOENT
125-
warn <<~MSG
126-
ERROR:
127-
Please ensure `Procfile.dev` exists in your project!
128-
MSG
129-
exit!
130-
end
131-
132-
# Check for arguments
133-
if ARGV[0] == "prod-assets"
134-
run_production_assets
135-
elsif ARGV[0] == "dev-assets"
136-
run_dev_assets
137-
elsif ARGV[0] == "help" || ARGV[0] == "--help" || ARGV[0] == "-h"
138-
puts <<~HELP
139-
Usage: bin/dev [command]
140-
141-
Commands:
142-
(none) / hmr Start development server with HMR (default)
143-
dev-assets Start development server with development assets (no HMR, no FOUC)
144-
prod-assets Start development server with production assets (optimized)
145-
help Show this help message
146-
147-
HMR Development mode (default):
148-
• Hot Module Replacement (HMR) enabled
149-
• Automatic React on Rails pack generation
150-
• Source maps for debugging
151-
• May have Flash of Unstyled Content (FOUC)
152-
• Fast recompilation
153-
• Access at: http://localhost:3000
154-
155-
Development assets mode:
156-
• No HMR (development assets with auto-recompilation)
157-
• Automatic React on Rails pack generation
158-
• CSS extracted to separate files (no FOUC)
159-
• Development environment (faster builds, source maps)
160-
• Auto-recompiles on file changes
161-
• Access at: http://localhost:3000
162-
163-
Production assets mode:
164-
• Automatic Shakapacker asset cleaning (rake shakapacker:clobber)
165-
• Automatic React on Rails pack generation
166-
• Production-optimized, minified bundles
167-
• Extracted CSS files (no FOUC)
168-
• Development Rails environment (SSL disabled, no config issues)
169-
• Uses overmind/foreman for process management (supports Sidekiq, Redis, etc.)
170-
• Optimized for performance testing
171-
• Access at: http://localhost:3001
172-
HELP
173-
elsif ARGV[0] == "hmr" || ARGV[0].nil?
174-
# Default development mode (HMR)
175-
if installed? "overmind"
176-
run_development "overmind"
177-
elsif installed? "foreman"
178-
run_development "foreman"
37+
# Main execution
38+
case args[0]
39+
when "production-assets", "prod"
40+
ReactOnRails::Dev::ServerManager.start(:production_like)
41+
when "static"
42+
ReactOnRails::Dev::ServerManager.start(:static, "Procfile.dev-static-assets")
43+
when "kill"
44+
ReactOnRails::Dev::ServerManager.kill_processes
45+
when "help", "--help", "-h"
46+
ReactOnRails::Dev::ServerManager.show_help
47+
when "hmr", nil
48+
ReactOnRails::Dev::ServerManager.start(:development, "Procfile.dev")
49+
else
50+
if args[0]
51+
puts "Unknown argument: #{args[0]}"
52+
puts "Run 'bin/dev help' for usage information"
53+
exit 1
17954
else
180-
warn <<~MSG
181-
NOTICE:
182-
For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
183-
MSG
184-
exit!
55+
ReactOnRails::Dev::ServerManager.start(:development, "Procfile.dev")
18556
end
186-
else
187-
# Unknown argument
188-
puts "Unknown argument: #{ARGV[0]}"
189-
puts "Run 'bin/dev help' for usage information"
190-
exit 1
19157
end

config/initializers/react_on_rails.rb

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
# See https://github.com/shakacode/react_on_rails/blob/master/docs/guides/configuration.md
44
# for many more options.
55

6+
# UPGRADE NOTE: After upgrading react_on_rails, consider running the generator again
7+
# to get the latest configuration options and files (like bin/dev):
8+
# rails generate react_on_rails:install
9+
# Carefully review any changes and apply them selectively to avoid overwriting
10+
# your custom configurations.
11+
612
ReactOnRails.configure do |config|
713
# This configures the script to run to build the production assets by webpack. Set this to nil
814
# if you don't want react_on_rails building this file for you.
@@ -20,7 +26,7 @@
2026
#
2127
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
2228
#
23-
# with rspec then this controls what yarn command is run
29+
# with rspec then this controls what npm command is run
2430
# to automatically refresh your webpack assets on every test run.
2531
#
2632
# Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`

0 commit comments

Comments
 (0)