Install React on Rails with webpack configuration

[justin808]

Summary

Run the react_on_rails:install generator to set up React with server-side rendering support.

Changes

• Shakapacker webpack integration: Full webpack configuration for client and server bundles
• React components: HelloWorld example components (client and server versions)
• Webpack configs: Separate configurations for client/server, development/production
• Babel configuration: Set up for React and modern JavaScript
• Development tooling: Procfile.dev variants for different asset compilation modes
• React on Rails initializer: Configuration for the react_on_rails gem
• Example route: /hello_world route with controller and views
• NPM dependencies: All required packages for React and webpack

Test plan

• Run bin/dev to start the development server
• Visit /hello_world to verify the React component renders
• Verify hot module replacement works in development
• Test that the name input updates dynamically
• Verify server-side rendering is working (view page source)
• Run bundle exec rubocop to ensure code style compliance
• Run npm run build to verify production builds work

🤖 Generated with Claude Code

[coderabbitai]

Warning

Rate limit exceeded

@justin808 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 34 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between bb4ddd7 and dfe5bcc.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (32)

• .gitignore (1 hunks)
• Procfile.dev (1 hunks)
• Procfile.dev-prod-assets (1 hunks)
• Procfile.dev-static-assets (1 hunks)
• app/controllers/hello_world_controller.rb (1 hunks)
• app/javascript/packs/application.js (1 hunks)
• app/javascript/packs/server-bundle.js (1 hunks)
• app/javascript/src/HelloWorld/ror_components/HelloWorld.client.jsx (1 hunks)
• app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css (1 hunks)
• app/javascript/src/HelloWorld/ror_components/HelloWorld.server.jsx (1 hunks)
• app/views/hello_world/index.html.erb (1 hunks)
• app/views/layouts/application.html.erb (1 hunks)
• app/views/layouts/hello_world.html.erb (1 hunks)
• babel.config.js (1 hunks)
• bin/dev (1 hunks)
• bin/setup (1 hunks)
• bin/shakapacker (1 hunks)
• bin/shakapacker-dev-server (1 hunks)
• config/initializers/react_on_rails.rb (1 hunks)
• config/routes.rb (1 hunks)
• config/shakapacker.yml (3 hunks)
• config/webpack/clientWebpackConfig.js (1 hunks)
• config/webpack/commonWebpackConfig.js (1 hunks)
• config/webpack/development.js (1 hunks)
• config/webpack/generateWebpackConfigs.js (1 hunks)
• config/webpack/production.js (1 hunks)
• config/webpack/serverWebpackConfig.js (1 hunks)
• config/webpack/test.js (1 hunks)
• config/webpack/webpack.config.js (1 hunks)
• db/schema.rb (1 hunks)
• db/seeds.rb (1 hunks)
• package.json (1 hunks)

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch install-react-on-rails

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}