Posted almost 5 years ago. Visible to the public.

The asset pipeline [2d]

The asset pipeline is Rails' mechanism how stylesheets, javascripts and images from your /assets folder are processed and delivered to the browser.

You have certainly already used it, but maybe do not know what happens behind the scenes.


  • 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?

Exercise: Precompile your assets

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

    config.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.

Owner of this card:

Tobias Kraze
Last edit:
4 months ago
by Henning Koch
Posted by Tobias Kraze to makandra Curriculum
This website uses short-lived cookies to improve usability.
Accept or learn more