javascript-in-rails

bastos's avatarfrom bastos

Guidance for integrating JavaScript in Rails: import maps, jsbundling-rails (Bun/esbuild/Rollup/Webpack), Turbo helpers, request.js, and UJS replacements. Use when the user asks about JavaScript setup, bundlers, or client-side behavior in Rails.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides expert guidance on integrating JavaScript within Ruby on Rails applications, specifically optimized for Rails 7+ conventions. It helps developers navigate modern frontend workflows by offering implementation details for Import maps, jsbundling-rails (including Bun, esbuild, and Webpack), and Turbo. By bridging the gap between legacy Rails UJS and modern standards like Request.js, it ensures efficient client-side development and robust asset management.

Use Cases

  • Architectural Decision: Choosing between Import maps for no-build setups or Node-based bundlers (esbuild, Bun, Rollup) for complex frontend dependencies.
  • Modernization: Migrating legacy Rails UJS features, such as 'data-confirm' and 'data-remote', to modern Turbo helpers and data attributes.
  • Package Management: Pinning and managing JavaScript libraries within a Rails environment using Import maps or configuring jsbundling-rails for custom build pipelines.
  • Secure Networking: Implementing CSRF-safe AJAX requests and handling non-GET actions using the Rails Request.JS library.
namejavascript-in-rails
descriptionGuidance for integrating JavaScript in Rails: import maps, jsbundling-rails (Bun/esbuild/Rollup/Webpack), Turbo helpers, request.js, and UJS replacements. Use when the user asks about JavaScript setup, bundlers, or client-side behavior in Rails.
version1.0.0

JavaScript in Rails

Guide Rails applications through JavaScript setup, bundling choices, and Turbo/UJS replacements using Rails 7+ conventions.

Choose a JavaScript strategy

Import maps (default for Rails 7+)

  • No Node.js or Yarn required.
  • No build step; run bin/rails server.
  • Use for most Hotwire-first apps and smaller JS needs.

JavaScript bundlers

  • Use Bun, esbuild, Rollup, or Webpack.
  • Bundlers integrate via jsbundling-rails.
  • Run bin/dev during development.
  • Node.js + Yarn required for esbuild/Rollup/Webpack.
  • Bun is both runtime and bundler.

Import maps

Install (existing apps):

bundle add importmap-rails
bin/rails importmap:install

Pin packages:

bin/importmap pin react react-dom

Import in app/javascript/application.js:

import React from "react"
import ReactDOM from "react-dom"

Common files:

  • config/importmap.rb
  • app/javascript/application.js

Bundlers

Create a new app with a bundler:

rails new my_app --javascript=bun

Available options:

  • bun
  • esbuild
  • rollup
  • webpack

Turbo and UJS replacements

Use Turbo helpers and data attributes instead of Rails UJS:

Method override:

<%= link_to "Delete", post_path(@post), data: { turbo_method: "delete" } %>

Confirmations:

<%= link_to "Delete", post_path(@post), data: { turbo_confirm: "Are you sure?" } %>

Prefer button_to for non-GET actions when possible.

Ajax and request.js

Non-GET requests require X-CSRF-Token. Rails Request.JS handles this:

import { FetchRequest } from "@rails/request.js"

const request = new FetchRequest("post", "/posts", {
  body: JSON.stringify({ post: { title: "Hello" } })
})

await request.perform()

When to use this skill

  • Choosing between import maps and bundlers
  • Setting up or migrating JavaScript tooling
  • Turbo helpers and UJS replacements
  • request.js and CSRF-safe Ajax