Asset Pipeline & Vite
Frontend asset management for JavaScript, CSS, images
Rails frontend asset management has evolved several times.
Sprockets (Asset Pipeline) — Rails 3.1+
Ruby-based asset compiler
Concatenates + minifies JavaScript, CSS, images
Fingerprinting (hash in filename) for cache optimization
stylesheet_link_tag,javascript_include_tag
Webpacker — Rails 5.1-6.1 (deprecated)
Webpack-based, requires Node.js
Supported modern JS frameworks (React/Vue)
Vite — Rails 7+ (currently recommended)
Fast dev server (HMR — Hot Module Replacement)
Modern build tool (Rollup)
vite_javascript_tag,vite_stylesheet_tag
Import Maps — Rails 7 default
Use browser ES Modules directly without a bundler
Suitable for simple apps, no build step
This project uses Vite. Per-app entrypoints are defined in app/javascript/entrypoints/.
Key Points
Create entrypoint file in app/javascript/entrypoints/ (e.g., app51.js)
vite_javascript_tag "app51" — load JS in layout
vite_stylesheet_tag "app51" — load CSS in layout
Tailwind CSS: @tailwind base; @tailwind components; @tailwind utilities;
Instant changes with HMR during development
Production: optimized bundle with vite:build
Pros
- ✓ Vite: very fast dev server (HMR)
- ✓ Cache optimization with asset fingerprinting
- ✓ Prevent unnecessary code loading with per-app bundles
- ✓ Natural integration with Tailwind CSS
Cons
- ✗ Node.js dependency (Vite)
- ✗ Build tool configuration can be complex
- ✗ Confusion when mixing Sprockets/Import Maps/Vite
- ✗ HMR may occasionally not work