Ruby on Railsframework~30 mins

Asset pipeline basics in Ruby on Rails - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Asset pipeline basics

📖 Scenario: You are building a simple Rails web page that needs to include CSS and JavaScript files efficiently.The asset pipeline helps combine, minify, and serve these files in a way that speeds up page loading.

🎯 Goal: Create a basic Rails asset pipeline setup by adding CSS and JavaScript files, configuring the manifest files, and including them in the application layout.

📋 What You'll Learn

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

Create a JavaScript file in app/assets/javascripts

Add the CSS and JavaScript files to the manifest files application.css and application.js

Include the stylesheet and JavaScript tags in the application layout app/views/layouts/application.html.erb

💡 Why This Matters

🌍 Real World

Web developers use the Rails asset pipeline to organize and optimize CSS, JavaScript, and images for faster page loads and easier maintenance.

💼 Career

Understanding the asset pipeline is essential for Rails developers to build performant and maintainable web applications.

Progress0 / 4 steps

Create a CSS file with styles

Create a file named custom.css inside app/assets/stylesheets with the following CSS rule: body { background-color: #f0f0f0; }

Ruby on Rails

# Create app/assets/stylesheets/custom.css
/* Add CSS rule for body background color */

Need a hint?

Use standard CSS syntax to set the background color of the body element.

Create a JavaScript file with a simple script

Create a file named custom.js inside app/assets/javascripts with this JavaScript code: console.log('Custom JS loaded');

Ruby on Rails

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

// Create app/assets/javascripts/custom.js
// Add console.log statement

Need a hint?

Use console.log to print a message when the script loads.

Add custom files to the manifest files

Edit app/assets/stylesheets/application.css to include custom.css using *= require custom. Also edit app/assets/javascripts/application.js to include custom.js using //= require custom.

Ruby on Rails

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

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

/* Edit application.css and application.js to require custom files */

Need a hint?

Use the require directive in the manifest files to include your custom files.

Include asset tags in the application layout

Edit app/views/layouts/application.html.erb to include the stylesheet and JavaScript tags by adding <%= stylesheet_link_tag 'application', media: 'all' %> inside the <head> and <%= javascript_include_tag 'application' %> before the closing </body> tag.

Ruby on Rails





  MyApp

Need a hint?

Use Rails helper tags to include the compiled CSS and JS files in the layout.