Asset pipeline basics in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this asset pipeline manifest?

Given this application.js manifest file in a Rails app, what JavaScript files will be included in the compiled asset?

Ruby on Rails

//= require jquery
//= require_tree ./modules
//= require_self
console.log('App loaded');

A Includes only files in modules folder and application.js code, excludes jquery.js

B Includes only jquery.js and application.js code, ignores modules folder

C Includes jquery.js, all files in modules folder, then the code in application.js itself

D Includes jquery.js and application.js code, but modules folder files are loaded after application.js

💡 Hint

Remember that require_tree includes all files in the specified folder in alphabetical order.

The require jquery line includes jquery.js first. Then require_tree ./modules includes all JavaScript files inside the modules folder. Finally, require_self inserts the code inside application.js itself at that point.

📝 Syntax

intermediate

Which option correctly compiles SCSS with asset pipeline?

You want to import a partial SCSS file named _buttons.scss into application.scss. Which import statement is correct?

A @import 'buttons';

B @import 'buttons.scss';

C @import '_buttons.scss';

D @import '_buttons';

💡 Hint

Partial SCSS files start with underscore and are imported without underscore or extension.

In SCSS, partial files start with an underscore and are imported without the underscore or file extension. So @import 'buttons'; correctly imports _buttons.scss.

🔧 Debug

advanced

Why does this asset not load in production?

You have a JavaScript file custom.js included in your manifest, but it doesn't load in production. The manifest is:

//= require jquery
//= require custom
//= require_tree .

What is the most likely cause?

A The <code>jquery</code> file must be required after <code>custom</code> for it to load

B The <code>require_tree .</code> line overrides the <code>require custom</code> line, so custom.js is ignored

C The manifest file must end with <code>require_self</code> to include custom.js

D The file <code>custom.js</code> is missing from the assets precompile list in production config

💡 Hint

Check if the asset is included in the precompile list for production environment.

In production, Rails only precompiles assets listed in the precompile array or referenced by manifests. If custom.js is not included or referenced properly, it won't be compiled and served.

❓ state_output

advanced

What is the output of this ERB asset tag in production?

Given this ERB in a Rails view:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

What will be the rendered HTML output in production mode?

A <script src="/assets/application.js"></script>

B <script src="/assets/application-abc123.js" data-turbolinks-track="reload"></script>

C <script src="/javascripts/application.js" data-turbolinks-track="reload"></script>

D <script src="/assets/application.js" data-turbolinks-track="reload"></script>

💡 Hint

In production, Rails appends a digest hash to asset filenames for caching.

Rails appends a fingerprint hash to asset filenames in production for cache busting. The javascript_include_tag generates a script tag with the fingerprinted filename and includes the data attribute as given.

🧠 Conceptual

expert

How does the asset pipeline improve web app performance?

Which of the following best explains how the Rails asset pipeline helps improve performance for users?

A It combines, minifies, and fingerprints assets to reduce requests, file size, and enable caching

B It automatically converts all assets to WebP format for faster loading

C It loads assets asynchronously by default to prevent blocking page rendering

D It stores assets in the database to speed up retrieval

💡 Hint

Think about how fewer and smaller files help browsers load pages faster.

The asset pipeline combines multiple files into one, minifies them to reduce size, and adds fingerprint hashes to enable long-term caching. This reduces HTTP requests and speeds up page loads.