Sprockets asset pipeline in Ruby on Rails - Mini Project: Build & Apply

Sprockets Asset Pipeline Setup in Rails

📖 Scenario: You are building a simple Rails web app that needs to manage CSS and JavaScript files efficiently. To do this, you will set up the Sprockets asset pipeline, which helps combine and compress assets for faster loading.

🎯 Goal: Set up the Sprockets asset pipeline by creating the necessary asset files, configuring the asset manifest, and including the compiled assets in the application layout.

📋 What You'll Learn

Create a CSS file with basic styles in app/assets/stylesheets

Create a JavaScript file with a simple script in app/assets/javascripts

Add a manifest file to require these assets using Sprockets directives

Include the compiled CSS and JavaScript in the application layout using Rails helpers

💡 Why This Matters

🌍 Real World

Web developers use the Sprockets asset pipeline in Rails apps to organize, combine, and compress CSS and JavaScript files. This improves page load speed and maintainability.

💼 Career

Understanding the asset pipeline is essential for Rails developers to efficiently manage front-end assets and optimize web app performance.

1

Create CSS and JavaScript asset files

Create a CSS file named custom.css inside app/assets/stylesheets with the content body { background-color: #f0f0f0; }. Also create a JavaScript file named custom.js inside app/assets/javascripts with the content console.log('Custom JS loaded');.

Ruby on Rails

# Create app/assets/stylesheets/custom.css with body background color style
# Create app/assets/javascripts/custom.js with console.log script

Hint

Remember to create two separate files with the exact names and content inside the correct folders.

2

Add manifest files to require assets

Create a manifest file named application.css inside app/assets/stylesheets that uses the Sprockets directive *= require custom. Also create a manifest file named application.js inside app/assets/javascripts that uses the Sprockets directive //= require custom.

Ruby on Rails

/* app/assets/stylesheets/custom.css */
body { background-color: #f0f0f0; }

// app/assets/javascripts/custom.js
console.log('Custom JS loaded');

/* Create application.css manifest with require directive */
/* Your code here */

// Create application.js manifest with require directive
// Your code here

Hint

Use the Sprockets directives *= require for CSS and //= require for JavaScript in the manifest files.

3

Include compiled assets in application layout

Open the file app/views/layouts/application.html.erb and add the Rails helper <%= stylesheet_link_tag 'application', media: 'all' %> inside the <head> tag. Also add <%= javascript_include_tag 'application' %> just before the closing </body> tag.

Ruby on Rails

  MyApp
  


  
  

Hint

Use the Rails helpers stylesheet_link_tag and javascript_include_tag with the asset manifest name 'application'.

4

Enable asset pipeline in configuration

Open the file config/application.rb and ensure the line config.assets.enabled = true is present inside the class Application < Rails::Application block to enable the Sprockets asset pipeline.

Ruby on Rails

module MyApp
  class Application < Rails::Application
    # Add asset pipeline enabled config here
    # Your code here
  end
end

Hint

Inside the Application class, add config.assets.enabled = true to turn on the asset pipeline.

Practice

1. What is the main purpose of the Sprockets asset pipeline in a Rails application?

easy

A. To combine and prepare CSS, JavaScript, and images for faster loading

B. To manage database migrations automatically

C. To handle user authentication and sessions

D. To generate HTML templates dynamically

Solution

1. Step 1: Understand Sprockets role

   Sprockets is designed to manage assets like CSS, JavaScript, and images.

2. Step 2: Identify its main benefit

   It combines and prepares these assets to improve loading speed and organization.

3. Final Answer:

   To combine and prepare CSS, JavaScript, and images for faster loading -> Option A

4. Quick Check:

   Sprockets purpose = combine and prepare assets [OK]

Hint: Remember: Sprockets handles assets, not databases or HTML [OK]

Common Mistakes:

• Confusing asset pipeline with database management
• Thinking it handles user sessions
• Assuming it generates HTML templates

2. Which directive is used in a JavaScript manifest file to include another JavaScript file using Sprockets?

easy

A. //= include file.js

B. //= require file.js

C. /*= require file.js */

D. #= require file.js

Solution

1. Step 1: Identify correct directive syntax for JS files

   In JavaScript manifests, Sprockets uses //= require to include files.

2. Step 2: Compare options

   //= require file.js matches the correct syntax; others use wrong comment styles or keywords.

3. Final Answer:

   //= require file.js -> Option B

4. Quick Check:

   JS include directive = //= require [OK]

Hint: JS uses //= require, CSS uses *= require [OK]

Common Mistakes:

• Using /*= require */ in JS files instead of //= require
• Using #= require which is invalid
• Writing //= include instead of require

3. Given the following application.js manifest file content:

//= require jquery
//= require_tree .
console.log('Loaded');

What will happen when the page loads?

medium

A. Syntax error stops JavaScript from running

B. Only jQuery loads, 'Loaded' logs, other files are ignored

C. jQuery and all JavaScript files in the directory load, then 'Loaded' logs to console

D. 'Loaded' logs before jQuery loads

Solution

1. Step 1: Understand directives order

   //= require jquery loads jQuery first, then //= require_tree . loads all JS files in the directory.

2. Step 2: Execution order of console.log

   After loading scripts, the console.log runs, so 'Loaded' appears after scripts load.

3. Final Answer:

   jQuery and all JavaScript files in the directory load, then 'Loaded' logs to console -> Option C

4. Quick Check:

   require order respected, console.log last [OK]

Hint: require directives load files in order before code runs [OK]

Common Mistakes:

• Assuming require_tree loads before require jquery
• Thinking console.log runs before scripts load
• Confusing syntax causing errors

4. You added a new JavaScript file custom.js in your assets folder but it is not loading in your Rails app. Which of the following is the most likely cause?

medium

A. You placed custom.js outside the assets folder

B. You used *= require custom in a JavaScript manifest file

C. You named the file custom.css by mistake

D. You forgot to add //= require custom in the manifest file

Solution

1. Step 1: Check manifest inclusion

   JavaScript files must be included with //= require custom in the manifest to load.

2. Step 2: Eliminate distractors

   Placing outside assets contradicts the question. Using *= require custom is CSS syntax ignored in JS manifest. Naming as custom.css mismatches. Most likely: forgetting the directive.

3. Final Answer:

   You forgot to add //= require custom in the manifest file -> Option D

4. Quick Check:

   JS files need //= require to load [OK]

Hint: JS files must be required with //= require, not *= require [OK]

Common Mistakes:

• Using CSS require syntax in JS manifest
• Placing files outside assets folder without updating paths
• Misnaming JS files as CSS

5. You want to include all CSS files in your stylesheets folder except admin.css using Sprockets directives. Which approach correctly achieves this?

hard

A. Manually require each CSS file except admin.css in the manifest

B. Rename admin.css to admin.scss and it will be excluded automatically

C. Use *= require_directory . which excludes admin.css automatically

D. Use *= require_tree . and then override admin styles manually

Solution

1. Step 1: Understand require_tree behavior

   *= require_tree . includes all files in the directory, no exclusions.

2. Step 2: Exclude specific files

   To exclude admin.css, you must list each file manually except admin.css in the manifest.

3. Step 3: Evaluate other options

   Require_directory includes all files too; renaming does not exclude files automatically.

4. Final Answer:

   Manually require each CSS file except admin.css in the manifest -> Option A

5. Quick Check:

   Exclude files by manual require, require_tree includes all [OK]

Hint: require_tree includes all files; exclude by manual listing [OK]

Common Mistakes:

• Assuming require_tree can exclude files
• Thinking require_directory excludes files automatically
• Believing renaming changes inclusion behavior