Import maps (Rails 7+) - Deep Dive

Overview - Import maps (Rails 7+)

What is it?

Import maps in Rails 7+ let you use JavaScript modules directly in the browser without needing a bundler like Webpack. They work by mapping module names to URLs, so the browser knows where to find each module. This means you can write modern JavaScript with imports, and Rails helps the browser load them correctly. It simplifies JavaScript management by avoiding complex build steps.

Why it matters

Before import maps, Rails developers had to use bundlers that added complexity and slowed down development. Import maps solve this by letting the browser handle module loading, making development faster and simpler. Without import maps, beginners face a steep learning curve with bundlers, and apps become harder to maintain. Import maps make modern JavaScript accessible and easier to manage in Rails apps.

Where it fits

Learners should know basic Rails app structure and how JavaScript modules work in browsers. Before import maps, understanding bundlers like Webpack is helpful but not required. After mastering import maps, learners can explore advanced JavaScript tooling, StimulusJS integration, or move to bundler-based setups for large apps.

Mental Model

Core Idea

Import maps tell the browser where to find JavaScript modules by mapping names to URLs, so you can use modern imports without bundling.

Think of it like...

It's like a city map that shows you exactly where each building is, so you don't have to guess or carry all buildings with you; you just go straight to the right place.

┌─────────────────────────────┐
│        Import Map File       │
│  module-name -> URL mapping  │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│       Browser Requests       │
│  module-name resolved to URL │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│      JavaScript Modules      │
│  Loaded directly by browser  │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

JavaScript Modules Basics

Concept: Understand what JavaScript modules are and how import/export works in modern browsers.

JavaScript modules let you split code into separate files. You use `export` to share code and `import` to use it elsewhere. Browsers can load modules with `