Intro
Recently I migrated my personal application from Rails Hotwire to Vite and React. This wasn’t a decision I made lightly — Hotwire provides an elegant, Rails-native approach to building modern web interfaces. However, specific requirements and preferences ultimately led me to make this transition. In this post, I’ll share my reasoning and experiences.
Why I Moved from Hotwire to Vite and React
Rich Component Ecosystem
The primary catalyst for my switch was straightforward: I’m not particularly strong with CSS. React’s ecosystem offers an abundance of polished UI libraries that significantly reduce the need for custom styling work.
Shadcn UI has emerged as my library of choice. It provides beautifully designed, accessible components built with Radix UI and Tailwind CSS. The components are not only visually appealing but highly customizable and well-documented.
The React ecosystem gives you plenty of options beyond Shadcn as well:
- Material UI - A comprehensive implementation of Google’s Material Design
- Chakra UI - Known for its accessibility and ease of use
- Mantine - Feature-rich with excellent documentation and theming
I know there are some Rails-based component libraries, like Rails UI and NitroKit. Because I don’t particularly like Phlex or ViewComponent, I’m not using them currently. Maybe I’ll change my mind someday, but for now, React’s component ecosystem better suits my needs and workflow.
This rich selection makes React especially valuable for developers who want to focus on application logic rather than spending hours perfecting CSS.
AI-Powered Development
Modern AI assistants like ChatGPT and Claude have become remarkably proficient at generating React components that can be previewed directly in the conversation interface. This capability has transformed my development workflow.
With my previous Hotwire and ERB setup, the development cycle looked like this:
- Generate code with an AI assistant
- Copy the code into my project files
- Refresh the browser to see the results
- Iterate based on what I saw
Now with React components, the process is much more streamlined:
- Describe what I need to the AI
- See a live preview directly in the chat
- Refine the component in real-time
- Copy the finalized code only when I’m satisfied
This tighter feedback loop eliminates numerous context switches and significantly accelerates UI development.
Modern Development Experience
Vite provides an exceptionally responsive development experience with features that feel magical after using traditional Rails asset handling:
- Hot module replacement that updates components in milliseconds
- On-demand compilation that only processes what’s needed
- Nearly instant server start times, even as the project grows
The developer experience feels noticeably snappier compared to both the Rails asset pipeline and Webpacker, which enhances productivity during active development sessions.
Downsides
Being honest about the trade-offs is important. The transition wasn’t without challenges:
More Complex Deployment Process
With Hotwire and importmaps, JavaScript management integrates naturally into the Rails ecosystem. The simplicity of this approach shouldn’t be underestimated.
Moving to Vite + React introduces additional complexity:
- Managing a separate Node.js dependency ecosystem
- Building assets as part of the deployment pipeline
- Configuring proper caching and delivery of JavaScript assets
If you decide to implement server-side rendering with React, complexity increases further with the need to coordinate server rendering and client hydration.
Steeper Learning Curve
For developers primarily familiar with Rails conventions, React introduces substantially different patterns:
- Component-based thinking versus template-based views
- React’s hooks system and component lifecycle
- Managing state effectively
- Understanding props and component composition
This learning curve requires investment before reaching full productivity. For teams considering this transition, accounting for this adjustment period in planning is crucial.
Implementation Approach
I found Inertia.js particularly valuable for my transition. It acts as an elegant bridge between Rails and React by:
- Leveraging existing Rails routing and controllers
- Eliminating the need for a separate API layer
- Enabling server-driven SPA navigation
- Allowing for incremental, page-by-page migration
This approach meant I could convert pages gradually rather than rewriting the entire application at once, which significantly reduced the migration risk.
Conclusion
After completing this transition, I’m pleased with the results. The combination of Rails’ powerful backend with React’s flexible frontend provides:
- A familiar and productive backend development experience
- Access to high-quality, pre-built UI components
- Better integration with AI-powered development tools
- A more responsive development cycle with Vite
This stack isn’t the universal answer for every project.Teams with strong CSS skills or those heavily invested in Hotwire might find less benefit in making the switch. However, for my specific needs—particularly access to robust UI libraries and improved AI tooling integration—the change has been worthwhile despite the added