Using Webpacker 3 on Rails 5.1

Wednesday, Nov 8, 2017 @ 16:27 MST

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.

Installing node and yarn

First things first. You’ll need a functioning copy of node and yarn.

On macOS, these are both easily installed using homebrew.

1brew install node yarn

Obviously you’ll need ruby and rails installed too. Since that’s well covered elsewhere, I won’t repeat it here.

Creating the app

Rails and webpacker provide automatic integration with a handful of popular javascript frameworks. Just for fun, we’ll choose react this time around.

1rails new webpacker3_example --skip-spring --webpack=react

If you had all the prerequisites in place, not only was bundle install run automatically, but so was yarn install.

(See app at this stage)

Rendering a React component

Now let’s create a controller that will render the default react component.

1rails g controller home index

In config/routes.rb, make the new route the default:

1Rails.application.routes.draw do
2  root 'home#index'
3end

By default, webpacker 3 is now integrated into the rails server process and will automatically compile all packs inside app/javascript/packs/. There is no longer any need to run an external webpack-dev-server process. All you need to do is reference one or more .js files inside packs/.

Let’s do that now by adding the following line inside the <head> section of our primary layout at app/views/layouts/application.html.erb:

1<head>
2  <!-- [existing html tags] -->
3  <%= javascript_pack_tag 'hello_react' %>
4</head>

Let’s test it by going to http://localhost:3000/ in our browser. You should see:

1Home#index
2
3Find me in app/views/home/index.html.erb
4
5Hello React!

If “Hello React!” is at the bottom, then everything’s working properly!

And that’s it. Nothing more is required any more. webpacker takes care of it all.

(See app at this stage)

Next steps

From here, if you need to install a new js package, use yarn add <package_name>.

If you (or a colleague) are pulling your code onto a fresh box, you may need to run yarn install to install all the node packages. Basically, anytime you need to run bundle install, plan to run yarn install next. This is true on your dev box and on production servers or containers.

When going into production, the webpack assets are now automatically compiled as part of the traditional rails assets:precompile hook.

So there you have it. Yes, it really is that straightforward now to get up and running with webpacker 3 and rails 5.1.

tags: rails, webpacker