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
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
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
Rendering a React component
Now let’s create a controller that will render the default react component.
1rails g controller home index
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
Let’s do that now by adding the following line inside the
<head> section of our primary layout at
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.
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