Replacing the Rails 5.1 asset pipeline with webpacker 3

My last post was about using webpacker v3 on Rails 5.1.

This time I want to explore how to replace the traditional sprockets-based asset pipeline completely.

Our goal will be to add Bootstrap v4 and jQuery v3 to an app, handled entirely through webpacker. We won’t even install the sprockets related gems.

We’ll also enable rails-ujs, turbolinks, and even images using webpacker.



Using Webpacker 3 on Rails 5.1

I recently started a new Rails 5.1 project. I wanted to try out webpacker, which is now at version 3. Turns out, the webpacker team has been working hard to simplify things and they’ve accomplished quite a bit. Most posts online talk about v1 or v2, and they include a lot more steps than are now necessary.

My goal here is to show how to use webpacker alongside the traditional asset pipeline (sprockets). The next post will show how to completely replace the asset pipeline with webpacker.

For reference, I’m working with ruby 2.4.2, rails 5.1.4, webpacker 3.0.2, node 8.7.0, and yarn 1.2.1.

Let’s dive into the now-simplified webpacker world.



Using Mongoid with Rails 4

Mongoid 3 is only compatible with Rails 3.x. Rails 4 requires Mongoid 4.

However, as of this writing, Mongoid 4 is still in development. I’ve had success using the master branch though.

In your Gemfile:

1gem 'mongoid', github: 'mongoid/mongoid'
3# and if you use Sidekiq + Kiqstand:
4gem 'kiqstand', github: 'mongoid/kiqstand'

Upgrading to Rails 4.0

I’m busy upgrading several apps to Rails 4.0. As is to be expected, there are a few gotchas here and there. Most are documented somewhere… deep in a changelog… mixed in with dozens of other things that probably won’t bite you.

I’ve been posting some of my notes along the journey. This particular post will serve as a central reference point, a table of contents of sorts, and will just contain links to other posts. I’ll try to keep it updated as I add new posts.


See the official Ruby on Rails article to start.

Models and datastores




Missing assets in Rails 4.0 (part 2)

In addition to the asset path changes covered in part 1, there are some changes in how processed asset files are exposed to web clients.

In this case, the problem shows up with asset files that are referenced by name without the md5 fingerprint. Previously, plain-named asset files were also exposed to the webserver. Now they don’t seem to be.

The most likely culprit here are files referenced from within a CSS file, such as:

1src: font-url('custom-webfont.eot');
3background: url('background.png');

In this case, you’ll need to use the asset_path helper like so:

1src: url('<%= asset_path('custom-webfont.eot') %>');
3background: url('<%= asset_path('background.png') %>');

You may need to rename your css file to enable ERB parsing, eg: design.css becomes design.css.erb.

Another possibility are hard-coded asset references in your view templates somewhere. Once again, change such references to use the asset_path helper.