Rails 8 + Bun: The New Default Stack?
#webdev#programming#javascript#rails
Alex Aslam

Alex Aslam @alex_aslam

About: Seasoned Software Engineer with 10+ years of experience in software development involving the project management, Team lead, Feature development and happy to collaborate.

Joined:
Dec 23, 2024

Rails 8 + Bun: The New Default Stack?

Publish Date: Jul 27
1 0

"We ditched Node, Webpack, and 12,000 files from node_modules—here’s why you should too."

For over a decade, Rails developers begrudgingly accepted JavaScript tooling chaos as the price of modern frontends. But with Rails 8’s upcoming release and Bun’s meteoric rise, we’re witnessing something radical: a return to simplicity without sacrifice.

After rebuilding a production app with Rails 8 (alpha) + Bun, we discovered a stack so fast and clean, it feels like Rails 3.0 excitement all over again. Here’s what’s changing—and when to make the jump.

1. Why This Combo Changes Everything

The Speed Revolution

Task Rails 7 (Webpack) Rails 8 (Bun)
bundle install 28s 28s
javascript:install 42s 0.9s
assets:precompile 1.2min 8.4s
Dev Server HMR 2.3s 0.3s 
# The magic command
rails javascript:install:bun
Enter fullscreen mode Exit fullscreen mode

What You Gain

✅ No more node_modules (Bun uses a single cache)
✅ Zero-config JSX, TypeScript, and Sass
✅ Built-in WebSocket server for Hotwire

2. Rails 8’s Secret Sauce

1. Import Maps Meet Bun 

# config/importmap.rb
pin "react", to: "https://esm.sh/react@18"
pin "application", preload: true
Enter fullscreen mode Exit fullscreen mode

How it works:

  • Development: Uses ESM directly (zero build)
  • Production: Bun optimizes into lean bundles

2. The New javascript:build Hook 

# Automatically runs during assets:precompile
Rails.application.config.javascript.build_command = "bun build"
Enter fullscreen mode Exit fullscreen mode

Killer feature:

  • No more fighting Webpack in CI
  • Cache-friendly output

3. Unified Errors 

Bun + Rails backtrace:
  app/javascript/controllers/index.js (Line 12)
  app/models/user.rb (Line 8)
Enter fullscreen mode Exit fullscreen mode

Finally: JS and Ruby errors in one trace.

3. Real-World Migration

Case 1: Converting a Webpacker App

  1. Delete: 
   rm -rf node_modules package.json webpack.config.js
Enter fullscreen mode Exit fullscreen mode
  1. Install: 
   bundle add jsbundling-rails
   rails javascript:install:bun
Enter fullscreen mode Exit fullscreen mode
  1. Celebrate 18,000 fewer files.

Case 2: Hybrid Architecture 

// Use Bun for React components
import Chart from "./react/Chart"

// Keep Stimulus for progressive enhancement
application.register("chart", ChartController)
Enter fullscreen mode Exit fullscreen mode

Best of both worlds:

  • Complex screens: React + Bun
  • Traditional views: Turbo + Import Maps

4. When to Think Twice

❌ Legacy apps with jQuery plugins
❌ Teams married to npm/yarn workflows
❌ Projects needing WebAssembly builds

Golden Rule:

Use this stack when you want modern JS without the tooling circus.

5. Getting Started Today

  1. Install Bun: 
   curl -fsSL https://bun.sh/install | bash
Enter fullscreen mode Exit fullscreen mode
  1. Try Rails 8 alpha: 
   gem install rails --pre
   rails new my-app -j bun
Enter fullscreen mode Exit fullscreen mode
  1. Convert existing apps: 
   bundle add jsbundling-rails
   rails javascript:install:bun
Enter fullscreen mode Exit fullscreen mode

“But We Just Migrated to Vite!”
Try this:

  1. Keep Vite for one complex route
  2. Use Bun everywhere else
  3. Compare dev experience

Made the switch? Share your war stories below!

Comments 0 total

    Add comment