How to migrate rails sprockets to propshaft

Propshaft has a smaller scope than sprockets and requires you to rely on the js-bundling and css-bundling gems to handle the building of CSS and JS assets. Read the docs for an extensive upgrade guide.

To migrate from webpacker to js-bundling, you can read this article.

1. Depreciate Sprockets
2. Install Propshaft
3. Migrate Asset Helpers
4. Display inline SVG

1. Depreciate Sprockets

1. Remove the gem "sprockets" from Gemfile
2. Delete the config/assets.rb file
3. Delete the assets/config/manifest.js file

2. Install Propshaft

Add to Gemfile

gem "propshaft"

3. Migrate asset helpers

Replace asset helpers like image_url and font_url in css files with standard URLs because Sprockets uses absolute paths while Propshaft uses relative paths. Make sure to prepend the asset path with / to link to the asset.

/* old */
image_url("home.png")

/* new */
url("/home.png")

4. Display inline svg

Before Propshaft loading inline SVG requires to dump a long SVG content inline or to leverage a gem like inline_svg. Propshaft offers the ability to render inline svg's.

Rails.application.assets.load_path.find('logo.svg').content