Skip to content

Commit cdbea2c

Browse files
justin808claude
andcommitted
Update README to follow demo repo standards and document packs generation bug
- Change title to standard format: "React on Rails Demo: SSR, Auto-Registration & Bundle Splitting with v15 and Rails 8" - Add standardized ✅ Includes section with key features - Add repo name and demo series links per CONTRIBUTING.md standards - Document packs generation bug (#1768) with detailed problem description and workaround - Update repository name references to react_on_rails-demo-v15-ssr-auto-registration-bundle-splitting - Add prominent warning about CSS modules issue in auto-generated files 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 81c66fa commit cdbea2c

File tree

1 file changed

+41
-5
lines changed

1 file changed

+41
-5
lines changed

README.md

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,49 @@
1-
# React on Rails v15 Auto-Registration Demo 🚀
1+
# React on Rails Demo: SSR, Auto-Registration & Bundle Splitting with v15 and Rails 8
22

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.
44

55
![React on Rails](https://img.shields.io/badge/React%20on%20Rails-15.0-blue)
66
![Rails](https://img.shields.io/badge/Rails-8.0.1-red)
77
![React](https://img.shields.io/badge/React-19.1.1-61DAFB)
88
![Shakapacker](https://img.shields.io/badge/Shakapacker-8.3.0-green)
99
![Auto-Registration](https://img.shields.io/badge/Auto--Registration-✅-brightgreen)
1010

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+
1147
## 🎯 What This Demo Solves
1248

1349
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
4581

4682
```bash
4783
# 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
5086

5187
# Install dependencies
5288
bundle install && npm install
@@ -89,7 +125,7 @@ This demo showcases React on Rails v15's **file-system-based auto-registration**
89125
- **[React on Rails Documentation](https://shakacode.gitbook.io/react-on-rails/)** - Official docs
90126
- **[Shakapacker Documentation](https://github.com/shakacode/shakapacker)** - Webpack integration
91127
- **[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
93129

94130
## 📊 Performance Metrics
95131

0 commit comments

Comments
 (0)