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