Rails - Migrating from Sprockets to Propshaft

rubyonrails-talk
1

Hello,

for one of the projects I am working, we are migrating from sprockets to propshaft. I’ve been following the guides and documentation I could find in the online repositories regarding this, but I must say that the documentation feels inadequate.

Right now, I’m stuck mid-way the migration because I keep running into issues left and right, and honestly none of the open issues anywhere even remotely hint at what the problem could be, or how to even properly set up things.

To illustrate the setting:

  • Project is originally a Rails 2 application with sprockets that has been upgraded to Rails 7.1
  • We relied on sprockets to handle all assets which worked just fine for us.
  • Our frontend sadly relies on a lot of vendor stuff, dead/outdated libraries and jQuery/BackboneJS

So I took the task to switch to propshaft, combined with jsbunding-rails and cssbundling-rails. Replacing the required gems is honestly straightforward, and I more or less got the pipeline working on a Windows system, in that I can spin up the app, and it compiles the majority of CSS and JS files, not throwing errors.

I still have the following issues:

  • Images are not loaded at all. The paths in the CSS files point for example to /assets/new_box-1958sf.png, so the changes worked, the asset is fingerprinted and doesn’t throw a 404 not found. But the image is always 0kb and the browser says “Cannot be displayed because it contains errors”
  • There’s a lack of documentation honestly on converting files likes something.sass.scss and how to properly use this with propshaft. It needs to be something.scss or it just doesn’t work in the new pipeline.
  • Not Rails fault, but a lot of the tooling is horrendous on a Windows laptop…

Right now, I’m just trying to figure out how to get images working, and what might be missing/wrong. But it has struck me as of late that the documentation for Ruby on Rails just…assumes too much? What I am missing is more verbose, or detailed steps on many things, but the documentation just assumes you’ve either been keeping track of every little change or just know everything.

1 Like
2

As the person who wrote the Sprockets-to-Propshaft migration guide, I can say that writing this type of documentation, unlike Rails guides, requires having a production system and performing the migration yourself. This allows you to verify that the steps are correct and to identify any points where issues arise.

After I published the guide, others contributed to it when they migrated their own systems and noticed gaps in my version—either because I didn’t encounter those specific issues or assumed certain details were obvious. It seems you’re facing a similar challenge: you have a use case that no one before you encountered, and therefore, it hasn’t been documented yet.

For the issues you’ve already resolved, we’d greatly appreciate it if you could contribute to the migration guide. Your input would help others who face the same challenges in the future.

Regarding the image problem, could you try the following steps?

  1. Run rails assets:precompile.
  2. Check the full path of the file.
  3. Look for the image in your CSS and compare the URL to your path.
  4. If they don’t match, post both here.
  5. If they do match, boot the server (without running rails assets:clobber) and try accessing the image directly by pasting the URL from the CSS file into your browser.
  6. Post here the result.
1 Like
3

Hello Breno,

I’d be more than happy to contribute, and I’ll try to make a PR to the repository once I have things up and running so I can compare the changes from our pull request to the guide and amend it.

In the meanwhile, the information you asked about:

  1. The full path of the file is : <project root>/app/assets/images/box_new.png
  2. The login.css inside the builds folder has this: background-image: url('/box_new.png');

This looks correct to me according to the documentation. Now I ran bundle exec rails assets:precompile, which ran without error (warnings about invalid style, but needs to be fixed later), and this generated a bunch of files in my public/assets folder:

  1. login.css go fingerprinted into public/assets/login-db5befc5.css
  2. The background was set to background: url("/assets/box_new-19aae428.png");
  3. The file public/assets/box_new-19aae428.png exists.
  4. booted the server since URL matches the image name (we use Thin, foreman, and some side projects but it should be irrelevant)
  5. Verified the fingerprinted asset on disc to open like a normal image
  6. Image is not loaded when opening the page.
  7. Opening the image url directly just lets the browser (Firefox) tell me: The image "HTTP://localhost:5000/assets/box_new-19aae428.png" cannot be displayed, because it contains errors

So from I can tell, the asset generation itself seems to work just fine. It’s the serving of the file through Thin that does not seem to be working.

  • Request the image does not show an entry in the development.log
  • Request to the login page shows a proper HTTP 200 in the log with no errors
  • Rest of the CSS and SVG/background does seem to load
1 Like
4

Are you using windows? I’ve recently merged a PR that fixed this very error.

5

I am actually!

Also found out that some of our dependencies need to be removed because they don’t work with the setup we have in mind, so they could be related as well to the underlying cause.

Will revisit the PR with the updated propshaft version when it’s available and see where that brings us.