Ruby on Railsframework~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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