SourceMapsFixer

SourceMapsFixer is a set of Rake tasks for fixing sourceMappingURLs.
It is useful in Rails apps if you like to have your main front-end code separated in frontend directory, for example. But you also use Sprockets to process additional assets and compile them to public/assets. Fingerprints are added to asset filenames during compilation, by default. It is useful in conjunction with far-future headers.

Common setup looks like this:

Module bundler like webpack outputs bundles to app/assets/bundles, for example. By running bin/rails assets:precompile Sprockets compiles all assets to public/assets

Problem

When webpack produces bundles to app/assets/bundles, each contains sourceMappingURL at the bottom (if configured). This URL links to the corresponding source map.
But when Sprockets compile assets to public/assets, fingerprints are added to all asset filenames.
sourceMappingURLs are intact which makes them pointing to invalid files without fingerprints.

Solution

SourceMapsFixer fixes sourceMappingURLs inside bundles.

🎮 Usage

Instead of running

$ bin/rails assets:precompile

run

$ bin/rails assets:prepare

📥 Installation

Add this line to your application's Gemfile:

gem 'source_maps_fixer'

And then execute:

$ bundle

Or install it yourself as:

$ gem install source_maps_fixer

📜 License

The gem is available as open source under the terms of the MIT License.

👨‍🏭 Author

Zbigniew Humeniuk from Art of Code

👀 See also

If you want to make your life easier in other areas of web app development, I strongly recommend you to take a look at my other project called Loco framework 🙂. It is quite powerful and makes a front-end <-> back-end communication a breeze (among other things).