When it comes to developing innovative apps, having the right setup and tools can make all the difference. As someone who's not a fan of CSS or front-end styling, I've always relied on frameworks to help me get started. Recently, I stumbled upon ShadcnUI and v0.dev, which have been game-changers for generating sleek UIs.

However, when I tried to integrate these tools with Rails, I hit a roadblock. The code generated by v0.dev is pure React and TypeScript, which doesn't mesh well with Rails' Hotwire-first philosophy. This realization pushed me down a different path: I set up a FastAPI back end and used Next.js plus v0.dev for the front end.

Development speed was insane – easily 10 times faster than hand-rolling UI. But, as exciting as this combo was, I missed the conveniences of Rails. Tasks that used to take hours in Rails now stretched into days.

The Epiphany: Inertia and SSR

I weighed my options:

  • Rails API + Next.js
  • Next.js front end proxy with a Rails app for some URLs (Flexile repo)

But something still felt off. Friends suggested trying Inertia.js with Rails, so I could reuse the ShadcnUI components generated by v0.dev. My project needs server-side rendering (SSR) for marketing pages and rich client-side interactions inside the app itself.

The Setup: Rails + Inertia

I realized that Inertia now supports SSR. Goodbye, Hotwire split-brain; hello single-stack Rails + Inertia! This setup allows me to reuse ShadcnUI components and enjoy the benefits of Inertia's server-side rendering capabilities.

The Challenges: Outdated Tutorials and Quirky Deployment Steps

But, as I dug deeper into the process, I hit a snag. Nearly every tutorial I found was three years old, the docs were confusing and incomplete, and most SSR examples were nothing more than abandoned placeholders. Add Kamal's quirky deployment steps on top, and I spent an entire week digging through repos just to get things working.

Sparing You the Pain: A Comprehensive Guide

To spare you that pain, I documented the whole process in this article. Check out the sample code repo here: [https://github.com/darkamenosa/inertia_rails_ssr_example](https://github.com/darkamenosa/inertia_rails_ssr_example)

Part 1 – Basic Setup and Getting the App Running

  • Create a new project: rails new inertia_rails -d postgresql --skip-javascript
  • Add Inertia Rails: bundle add inertia_rails
  • Install the front-end stack: bin/rails generate inertia:install --framework=react --typescript --vite --tailwind --no-interactive
  • Set up the databases and run the migrations: bin/rails db:setup && bin/rails db:migrate
  • Start the dev servers: bin/dev

Part 2 – Small Dev Tweaks, ShadcnUI, and Server-Side Rendering (SSR)

  • Visit http://localhost:3000/inertia-example to see the result
  • Fix the Vite dev server error by editing config/vite.json and adding "host": "127.0.0.1" inside the development block
  • Install ShadcnUI: follow the cookbook at [https://inertia-rails.dev/cookbook/integrating-shadcn-ui](https://inertia-rails.dev/cookbook/integrating-shadcn-ui)
  • Initialize ShadcnUI: npx shadcn@latest init and pick a theme (I chose Neutral)

By following this comprehensive guide, you'll be able to set up your Rails project with Inertia.js and enjoy the benefits of server-side rendering. Happy hacking!