Sprockets asset pipeline in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary role of the Sprockets asset pipeline in Rails?

Choose the best description of what the Sprockets asset pipeline does in a Rails application.

A It handles user authentication and session management.

B It manages database migrations and schema changes automatically.

C It generates HTML views from controller data.

D It compiles, concatenates, and minifies CSS, JavaScript, and image assets for efficient delivery.

💡 Hint

Think about how Rails prepares files like CSS and JavaScript before sending them to the browser.

The Sprockets asset pipeline processes and optimizes static assets like CSS and JavaScript by compiling, concatenating, and minifying them. This helps the browser load pages faster.

❓ component_behavior

intermediate

What happens when you add a new JavaScript file in app/assets/javascripts and reference it in application.js manifest?

Given a new file named custom.js added to app/assets/javascripts and included via //= require custom in application.js, what is the expected behavior when the Rails app runs in production mode?

A custom.js causes a runtime error because it is not precompiled separately.

B custom.js is ignored because only files in vendor/assets are compiled.

C custom.js is compiled and included in the application.js bundle served to the browser.

D custom.js is served as a separate file without being bundled.

💡 Hint

Consider how Sprockets bundles JavaScript files listed in the manifest.

Files required in the application.js manifest are concatenated and compiled into one bundle for efficient delivery in production.

📝 Syntax

advanced

Identify the correct Sprockets directive syntax to include all JavaScript files in a folder

Which option correctly uses a Sprockets directive to include all JavaScript files in the current directory inside application.js?

Ruby on Rails

// application.js manifest file

A //= require_tree .

B //= include_all .

C //= require_directory .

D //= import * from '.'

💡 Hint

Look for the directive that recursively includes files in the directory.

The directive //= require_tree . tells Sprockets to include all files in the current directory and its subdirectories.

🔧 Debug

advanced

Why does a CSS change not appear in production after precompilation?

You updated styles in app/assets/stylesheets/custom.css but after running rails assets:precompile and deploying, the changes do not show in production. What is the most likely cause?

A The custom.css file was not included in the application.css manifest or precompile list.

B The CSS syntax is invalid causing the file to be skipped during precompilation.

C The browser cache is disabled, so changes are not reflected.

D Sprockets does not support CSS files in app/assets/stylesheets.

💡 Hint

Check if the file is referenced in the manifest or precompile configuration.

If a CSS file is not referenced in application.css or listed in config.assets.precompile, it won't be compiled and served in production.

❓ state_output

expert

What is the fingerprinted filename generated by Sprockets for app.js after precompilation?

If you have a file app/assets/javascripts/app.js and run rails assets:precompile, what will the compiled filename look like in public/assets?

A app_bundle.js

B app-3a1b2c4d5e6f7g8h9i0j.js

C app.min.js

D app.js

💡 Hint

Sprockets adds a hash fingerprint to filenames for cache busting.

Sprockets appends a unique hash fingerprint to asset filenames during precompilation to help browsers cache assets effectively.