Rails Frontend Assets

Propshaft

https://guides.rubyonrails.org/asset_pipeline.html

• Source files go in app/assets
  • Customize with config.assets.paths
• Copied to public/assets during precompilation
  • Saves public/assets/manifest.json to inform Rails what fingerprints to use
  • What about in dev server?
• Digesting
  • Skips if digest detected in the filename already (from a bundler), or you can explicitly add .digested.[ext]
  • Exclude from digestion a directory with config.assets.excluded_paths (eg Dart output)
  • Helpers
    • asset_path
    • image_tag
    • javascript_include_tag
    • stylesheet_link_tag
    • In CSS: url() (uses a CSS standard)
    • In JS: RAILS_ASSET_URL()
• Development mode
  • No caching (no digesting?)
  • Optional: more performant watching for large number of assets with listen gem and config.file_watcher = ActiveSupport::EventedFileUpdateChecker
  • If your assets stop updating in development mode, the solution is to remove the .manifest.json file located in public/assets/
• Production mode
  • Precompilation
    • By default just used to translate URLs in CSS
  • CDN
    • Configure it to source assets from your app server
    • config.asset_host
• Optional: asset bundler and processor
  • Examples
    • esbuild
    • Webpack
    • Sass
    • Tailwind

Evolution

• Past needs of Sprockets that aren’t as needed anymore
  • Transpilation
  • Bundling
  • Compression

importmap-rails

https://github.com/rails/importmap-rails

• Allows importing deps via importmap
  • So it’s mutually exclusive with bundlers
• bin/importmap pin [npm package]

tailwindcss-rails

https://github.com/rails/tailwindcss-rails

(Notes below are for v4)

• No Node
• tailwind.config.js - customizing Tailwind setup
• assets/stylesheets/tailwind/application.css file
• bin/rails tailwindcss:build - one time
• bin/rails tailwindcss:watch - live rebuilds