Rails + React (via Vite) icon

Rails + React (via Vite)

Stack

Ruby on Rails as the API backbone, React + Vite for the frontend. The pragmatic middle ground, keep Rails' productivity for data and auth, drop in React only where the UX needs it.

Stack

What this is

DHH-approved structure with a React escape hatch. Rails handles the data, auth, jobs, and most of the HTML (Hotwire keeps the simpler pages JS-free) but you reach for React + Vite when a page needs real interactivity (a kanban board, a markdown editor, a multi-step builder).

When to pick this stack

  • You like Rails’ productivity but parts of the product genuinely need SPA-like UX.
  • You’re comfortable with the team owning a JS toolchain alongside Ruby.
  • You want the option to dial React up (full SPA) or down (sprinkles only) per route.

What we’d swap

  • React + Vite → Hotwire only: if you don’t actually need React, see the Rails + Hotwire + SQLite stack, same productivity, fewer moving parts, better SEO.
  • Postgres → SQLite: with Rails 8’s Solid Cable / Solid Cache / Solid Queue, SQLite is now a credible production DB.

Common gotchas

  • Two CSS pipelines if you’re not careful: Rails ships its own (Propshaft / Sprockets) and Vite ships its own. Pick one (usually Vite) and route everything through it.
  • Dev mode runs two servers (Rails + Vite). The vite_ruby gem handles the orchestration but expect a slightly heavier dev loop than pure Rails.

Tags

In this stack

8 tools
Ruby on Rails

The original opinionated full-stack framework: Active Record ORM, conventions, generators, and Hotwire for HTML-over-the-wire interactivity.

Used here for: Backbone: Active Record, sessions, mailers, jobs (Solid Queue / Sidekiq). Hotwire ships by default; this stack opts out of it on the rich pages and keeps it on the simpler ones.

React

Component-based UI library, the de facto standard for SPA front-ends, also rendered server-side via Next.js, Remix, and friends.

Used here for: Frontend on the routes that benefit from SPA UX (dashboards, editors).

Vite

Lightning-fast frontend tooling: native ESM dev server, Rollup-based production build. Default for non-Next.js React/Vue/Svelte apps.

Used here for: Bundler, the vite_rails / vite_ruby gem makes integration ~one-line.

PostgreSQL

Battle-tested open-source relational database with rich types, full-text search, JSON support, and an extension ecosystem (pgvector, PostGIS, partman).

Used here for: Production database. Rails' default migration story is unmatched.

GitHub

Industry-standard Git hosting with Copilot, Actions CI/CD, and the largest dev community. GitHub handles version control and team collaboration, branches, pull requests, code review, CI/CD, and project knowledge.

Used here for: Source control + Actions.

Fly.io

Deploy applications globally at the edge with native multi-region Postgres. Fly.io handles deployment and hosting, often with a global edge network and zero-config CI/CD.

Used here for: Deploy. Fly's Rails launchers take 5 minutes to a deploy URL; pairs nicely with Postgres on the same provider.

Stripe

Developer-first payments with Billing, Connect, and Radar. Stripe handles online payments, checkout, subscriptions, billing, and compliance.

Used here for: Payments via stripe-ruby + Pay (the gem).

Sentry

Application error tracking and performance monitoring.

Used here for: Error monitoring.

Related