Asset pipeline: Importmaps
This course explains how a Rails 8 app loads JavaScript with importmaps, without Node.js or a build step. It covers the pin API in config/importmap.rb, Propshaft as the asset server that fingerprints and serves files, and how Stimulus controllers are registered from file names. It also shows the bin/importmap workflow for adding vendored or CDN packages, and the production side: module preloading, long-lived caching, and Content Security Policy. The last lesson traces the full path from a pin to code running in the browser.
What you'll learn
- ✓How the browser resolves modules through an importmap without a bundler
- ✓Mapping modules to files with pin, pin_all_from, to: and under:
- ✓How Propshaft serves assets, adds fingerprints and searches load paths
- ✓How file paths become Stimulus controller identifiers and get registered
- ✓Adding, updating, auditing and removing packages with bin/importmap
- ✓Module preloading, asset caching and Content Security Policy in production
What is an importmap: no bundler needed
Most JavaScript frameworks require a build step: a bundler like Webpack, esbuild, or Vite that transforms, concatenates, and minifies your JavaScript before the browser can use it. Rails 8 takes a different approach: importmaps. No Node.js. No node_modules. No build step for JavaScript at all.
Read the full lesson free →Curriculum
7 lessonsWhat is an importmap: no bundler needed
Explains how importmaps let the browser resolve JavaScript modules natively, with no bundler, Node.js or node_modules.
The pin API: mapping modules to files
Covers pin, pin_all_from, CDN and vendored pins, the resolved JSON and the order Propshaft searches load paths.
Propshaft: the modern asset server
Describes how Propshaft serves and fingerprints assets, how it differs from Sprockets, and where Tailwind CSS fits.
Stimulus controller loading with importmaps
Traces how eagerLoadControllersFrom registers controllers and how file paths map to identifiers like ui--flash.
Adding a JavaScript dependency
Walks through bin/importmap commands for pinning, unpinning, updating and auditing packages, plus choosing vendor or CDN.
Production: preloading, caching, and CSP
Covers modulepreload tags, the preload: false option, asset precompilation, one-year caching and Content Security Policy rules.
Asset pipeline: putting it together
Follows the full path from config/importmap.rb to Stimulus connecting controllers, with checklists for new libraries and controllers.