287 The asset pipeline [1d]

The asset pipeline is one of Rails' two mechanisms how stylesheets, javascripts and images from your /assets folder are processed and delivered to the browser. Rails has a second pipeline called webpacker, which we will cover later.

Learn

• Read Everything You Should Know About the Rails Asset Pipeline
• Read How to make your application assets cachable in Rails
• Read Managing vendor libraries with the Rails asset pipeline
• Understand
  • What is "sprockets" and how does it relate to the asset pipeline?
  • What is a "manifest"? What does require, require_tree, require_self do?
  • What is "asset minification" and why is it necessary?
  • What is "asset concatenation" and why is it necessary?
  • What is "asset fingerprinting" and why is it necessary?
  • What is "precompiling"? How and when does it happen?
  • Why are the image-url and font-url necessary for sass urls?
  • What are "expiry" or "cache-control" headers? How do those work for our applications?
  • When importing variables or mixins into a .sass file, we need to use @import other_file.
    We cannot use //= require 'other_file'.
    Do you understand why?

Other resources

• The Asset Pipeline — Rails Guides Show archive.org snapshot

Exercise: Precompile your assets

• In your MovieDB, add the following line to your config/environments/development.rb:

  Copyconfig.assets.compile = false
  config.assets.debug = false
  

  Then restart your server. This mimicks how applications work in production.

• Now reload your page. It will probably show an exception or have broken stylesheets or Javascript. Try to get everything working again. You will need rake assets:precompile.

• If you have trouble understanding why stuff does not work, read our card Rails asset pipeline: Why things break in production and what precompilation does to your assets

• When you're done, remove the lines from your development.rb again and run rake assets:clobber. Keep other changes.

Exercise: Reorganize your JavaScript

In your MovieDB, take a look at your Javascript files. Are they organized like your ruby code, where every functional component lives in its own file in an appropriate directory?

If not, reorganize them using the asset pipeline.