| 
1 |  | -# React on Rails v15 Auto-Registration Demo 🚀  | 
 | 1 | +# React on Rails Demo: SSR, Auto-Registration & Bundle Splitting with v15 and Rails 8  | 
2 | 2 | 
 
  | 
3 |  | -A complete demonstration of **React on Rails v15 auto-registration** with Rails 8, showcasing file-system-based component detection, bundle splitting, and the **corrected installation sequence** that fixes the infamous "package.json not found" error.  | 
 | 3 | +A fully working demo of React on Rails v15 on Rails 8, showcasing server-side rendering, auto-registration, and bundle splitting capabilities. This demo also demonstrates the **corrected installation sequence** that fixes the infamous "package.json not found" error.  | 
4 | 4 | 
 
  | 
5 | 5 |   | 
6 | 6 |   | 
7 | 7 |   | 
8 | 8 |   | 
9 | 9 |   | 
10 | 10 | 
 
  | 
 | 11 | +✅ **Includes:**  | 
 | 12 | +- **Server-Side Rendering (SSR)** - React components render on the server for faster initial page loads  | 
 | 13 | +- **Auto-Registration** - Components in file system are automatically discovered and registered  | 
 | 14 | +- **Bundle Splitting** - Automatic code splitting for optimized loading performance (12.5KB vs 1.1MB+ bundles)  | 
 | 15 | +- **CSS Modules** - Scoped CSS with automatic class name generation  | 
 | 16 | +- **Multiple Dev Modes** - HMR, static, and production-like development servers  | 
 | 17 | +- **Rails 8 Integration** - Latest Rails version with modern asset pipeline  | 
 | 18 | +- **Installation Fix** - Corrected Shakapacker → React on Rails sequence  | 
 | 19 | + | 
 | 20 | +📂 **Repo name:** `react_on_rails-demo-v15-ssr-auto-registration-bundle-splitting`  | 
 | 21 | + | 
 | 22 | +📚 **Part of the** [React on Rails Demo Series](https://github.com/shakacode?tab=repositories&q=react_on_rails-demo)  | 
 | 23 | + | 
 | 24 | +## ⚠️ Important: Known Issue with Packs Generation  | 
 | 25 | + | 
 | 26 | +There's a bug in the `react_on_rails:generate_packs` task with CSS modules (see [#1768](https://github.com/shakacode/react_on_rails/issues/1768)).  | 
 | 27 | + | 
 | 28 | +**Problem**: The generator creates invalid JavaScript syntax when handling CSS modules:  | 
 | 29 | +```javascript  | 
 | 30 | +// ❌ Invalid (generated)  | 
 | 31 | +import HelloWorld.module from '../ror_components/HelloWorld.module.css';  | 
 | 32 | +ReactOnRails.register({HelloWorld, HelloWorld.module});  | 
 | 33 | +```  | 
 | 34 | + | 
 | 35 | +**Workaround**: After running the generator, manually fix the generated files by removing CSS module imports from the server bundle:  | 
 | 36 | + | 
 | 37 | +```javascript  | 
 | 38 | +// ✅ Fixed (manual)  | 
 | 39 | +import ReactOnRails from 'react-on-rails';  | 
 | 40 | +import HelloWorld from '../ror_components/HelloWorld.jsx';  | 
 | 41 | + | 
 | 42 | +ReactOnRails.register({HelloWorld});  | 
 | 43 | +```  | 
 | 44 | + | 
 | 45 | +This demo has been manually fixed to work correctly with SSR.  | 
 | 46 | + | 
11 | 47 | ## 🎯 What This Demo Solves  | 
12 | 48 | 
 
  | 
13 | 49 | This sample application demonstrates the **critical fix** for the React on Rails installation issue where generators would fail with:  | 
@@ -45,8 +81,8 @@ This demo includes comprehensive documentation for both developers and AI coding  | 
45 | 81 | 
 
  | 
46 | 82 | ```bash  | 
47 | 83 | # Clone the demo repository  | 
48 |  | -git clone https://github.com/shakacode/test-react-on-rails-v15-hello-world-on-rails-v8.git  | 
49 |  | -cd test-react-on-rails-v15-hello-world-on-rails-v8  | 
 | 84 | +git clone https://github.com/shakacode/react_on_rails-demo-v15-ssr-auto-registration-bundle-splitting.git  | 
 | 85 | +cd react_on_rails-demo-v15-ssr-auto-registration-bundle-splitting  | 
50 | 86 | 
 
  | 
51 | 87 | # Install dependencies  | 
52 | 88 | bundle install && npm install  | 
@@ -89,7 +125,7 @@ This demo showcases React on Rails v15's **file-system-based auto-registration**  | 
89 | 125 | - **[React on Rails Documentation](https://shakacode.gitbook.io/react-on-rails/)** - Official docs  | 
90 | 126 | - **[Shakapacker Documentation](https://github.com/shakacode/shakapacker)** - Webpack integration  | 
91 | 127 | - **[React on Rails Pro](https://www.shakacode.com/react-on-rails-pro)** - Advanced features  | 
92 |  | -- **[Demo Repository](https://github.com/shakacode/test-react-on-rails-v15-hello-world-on-rails-v8)** - This complete working example  | 
 | 128 | +- **[Demo Repository](https://github.com/shakacode/react_on_rails-demo-v15-ssr-auto-registration-bundle-splitting)** - This complete working example  | 
93 | 129 | 
 
  | 
94 | 130 | ## 📊 Performance Metrics  | 
95 | 131 | 
 
  | 
 | 
0 commit comments