Asset Pipeline in Rails is a framework that helps you manage and deliver static assets â like JavaScript, CSS, and image files â in an organized, efficient, and performant way.
Earlier versions of Rails used a gem called Sprockets for the asset pipeline. However, there has been a lot of evolution of Asset Management Techniques within the last few years, leading to significant changes that have influenced how assets are managed in web applications. These include −
- Browser Support − Modern browsers have improved support for new features and syntax, reducing the need for transpilation.
- HTTP/2 − The introduction of HTTP/2 has made it easier to serve multiple files in parallel, reducing the need for bundling.
- ES6+ − Modern JavaScript syntax (ES6+) is supported by most modern browsers, reducing the need for transpilation.
Therefore, the asset pipeline powered by Propshaft, no longer includes transpilation, bundling, or compression by default.
The purpose of the Asset Pipeline is to −
- Organize your frontend assets
- Preprocess assets (e.g., compile SCSS to CSS, ES6 to JS)
- Concatenate multiple files into a single file to reduce HTTP requests
- Minify or compress assets for faster loading.
- Cache-bust assets using fingerprinting
Propshaft Features
Propshaft assumes that your assets are in a browser-ready formatâlike plain CSS, JavaScript, or preprocessed images (like JPEGs or PNGs). Its job is to organize, version, and serve those assets efficiently. This is done by adopting the following strategies −
Asset Load Order
With Propshaft, the loading order of dependent files can be controlled by specifying each file explicitly and organizing them manually or ensuring they are included in the correct sequence within your HTML or layout files.
Here is an example of how you can specify the exact order for loading CSS and JavaScript files by including each file individually in a specific order −
<!-- application.html.erb --><head><%= stylesheet_link_tag "reset" %> <%= stylesheet_link_tag "base"%> <%= stylesheet_link_tag "main" %></head><body><%= javascript_include_tag "utilities" %> <%= javascript_include_tag "main"%> </body>
Use Modules in JavaScript (ES6)
ES6 modules are helpful if you have dependencies within JavaScript files. Use import statements to explicitly control dependencies within JavaScript code. Just make sure your JavaScript files are set up as modules using <script type=”module”> instead of script type=”text/javascript” in your HTML −
// main.js
import { initUtilities } from "./utilities.js";
import { setupFeature } from "./feature.js";
Combine Files when necessary
If you have several JavaScript or CSS files that must always load together, you can combine them into a single file. For example, you could create a combined.js file that imports or copies code from other scripts.
Fingerprinting
Fingerprinting is a technique that makes the name of a file dependent on its content. In Rails, asset versioning uses fingerprinting to add unique identifiers to asset filenames. Fingerprinting still remains an integral part in spite of the evolution mentioned above.
Propshaft: The Default Asset Pipeline in Rails 8
In Rails 8, Propshaft is the default asset pipeline replacing Sprockets for new apps. With Propshaft, the asset management becomes Simple, modern, minimalistic.
Propshaft uses a direct folder structure to map assets. For example, your assets are placed here −
app/assets/ stylesheets/ javascripts/ images/
When a Rails application is created with Propshaft as its asset management tool,
rails new myapp
The projectâs Gemfile includes “propshaft” gem in addition to the other important gems such as −
# For asset pipeline gem "propshaft"# For managing JavaScript imports gem "importmap-rails"# Turbo and Stimulus (Hotwire) gem "turbo-rails" gem "stimulus-rails"
The projectâs assets live inside the designated folders as −
As you can see, Assets are directly served based on folder structure. Also, the fingerprinting is automatic. When you run rails assets:precompile, files get digested with a unique hash.
For example −
application-0d23fcd3245.css logo-3f9d7ab8c3.png
Rails also uses ImportMap as the default for serving JavaScript. Hence, Propshaft uses the ImportMap configuration to pin various JavaScript modules −
pin "application" pin "@hotwired/turbo-rails", to:"turbo.min.js", preload:true pin "@hotwired/stimulus", to:"stimulus.min.js", preload:true pin "@hotwired/stimulus-loading", to:"stimulus-loading.js", preload:true pin_all_from "app/javascript/controllers", under:"controllers"
The applicationâs CSS files are loaded via Propshaft and JavaScript via ImportMap. This is reflected in the master layout of the application (app/views/layouts/application.html.erb)
<head><%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> </head>
Leave a Reply