Au Revoir Sprockets, Hello Propshaft!
What is the Asset pipeline?
In short, the asset pipeline in Rails helps us deliver JavaScript, CSS and images in the most performant and reliable way we can without being too onerous for developers to maintain. The “pipeline” in this context being the set of tools and processes applied to our asset source files during the build process to prepare them for optimized delivery.
There have been many ways to do this over the years, usually combining and compressing files, minifying and obfuscating them in order to deliver as much as we could in the most efficient and cacheable ways possible. Browsers often could only handle 2 or 4 concurrent HTTP connections, so this strategy really helped performance - albeit with a bit of an up front hit where we loaded all the CSS and JavaScript on first load, and a heavier complexity and pre-processing overhead.
Auto generating a fingerprint for the file name of each asset (CSS file, image etc) based on when the contents were updated was a really clever way to ensure we could aggressively cache these files in our CDN’s or browsers to avoid reloading them unless anything had changed.
Example Assets via Sprockets
Progress
While the above strategy works incredibly well and has been implemented with frameworks like Sprockets in Rails for many years, times have changed!
With HTTP/2 and the increases in bandwidth and performance, browsers are no longer restricted on number of concurrent connections or need compressed and minified files. Propshaft leans in to this new status quo heavily and not only makes the build and deploy process simpler, it makes development a lot more fun too, since we’re just dealing with plain old JavaScript and CSS again!
Propshaft
Propshaft is the new default asset pipeline for Rails 8, born out of yet more contextual compression and simplification, that builds on the advances in web browsers and HTTP servers over the last few years.
Migrating from Sprockets to Propshaft
I have a couple of side projects I like to work on, and keep running on the latest Ruby and Rails versions. In what feels like a bit of a premonition, I decided to try out Propshaft today of all days. Today happens to be the very day that Propshaft was updated to be the default for Rails 8 in this commit.
Here are the steps I needed to follow:
a). Replace Sprockets with Propshaft in the Gemfile
-gem "sprockets-rails"
-# gem "propshaft", github: "rails/propshaft"
+gem "propshaft", github: "rails/propshaft"
b). Update the stylesheet_link tag in layouts/application.html.erb
- <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
- <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+ <%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
Restart the server and that was it!!
Example Assets with Propshaft
Admittedly my app is relatively simple, and most importantly I’m using importmaps and plain old JavaScript, so no complicated transpilation needed. If you’re using Sass, CoffeeScript or anything that does rely on a transpilation step, you’ll need to handle that with something like jsbundling-rails and cssbundling-rails
Despite this, I was stuck for a while not being able to get the Trix editor styles working in ActionText.
As it turned out, if I’d have noticed the commit to Rails before I started I may have seen the critical nugget of info in the new generators:
Use :all for stylesheets when propshaft is active
With that tiny change, shown in step b) above, Propshaft knows to add all the
files in the assets/stylesheets and hey presto, Trix was back in business.
Would love to hear how you get on if you try this and what issues arise if any. Don’t hesitate to drop me a note via twitter or any other channels listed here if you have questions, improvements or corrections!