Introducing Webpacker

Official Rails gem for bundling JavaScript assets with Webpack

Gaurav Tiwari
Feb 19, 2017 · 5 min read

With the ever-changing JavaScript world, one important thing that has been lacking in Rails was support for proper bundling system for JavaScript assets, but from Rails 5.1 this is going to change with the introduction of new Webpacker gem.

Rails 5.1 ships with webpack and yarn via the –webpack option and out of the box integration with React, Angular, vue, elm and more coming soon.

Prerequisites

Setup

Now, open up your terminal and install rails 5.1 gem and then create a new rails app like so,

// Latest version of rails 5.1+
gem install rails
rails new webpacker-example-app --webpack// or this to setup react or angular or vue
rails new webpacker-example-app --webpack=react
rails new webpacker-example-app --webpack=angular
rails new webpacker-example-app --webpack=vue

Notice the new nifty -webpack option, this will setup webpack with Yarn after creating a Rails 5.1 app. Once app is created and webpacker is installed we are all set to use webpack in our new Rails app. Voila! 🎉

If you have an existing Rails 4.2+ app you can install webpacker, by adding it to your Gemfile and install it like so,

rails webpacker:install
rails webpacker:install:[react, angular or vue] (optional)

Feel free to checkout the project readme for more details, https://github.com/rails/webpacker

Note: We can also setup React or Angular if we supply the relevant options.

You can see a list of commands webpacker ships with by typing any of the following from within your app directory,

bundle exec rails webpacker
bundle exec rails -T

Configuration

1. Folder structure

The convention here is that all webpack entry points should be placed in the app/*javascript/*packs folder and the modules can be placed inside app/*javascript folder in any way you like. So, lets say if we are building a new calendar app. We can structure it like so:

*Note: All options are customisable from config/webpack/paths.yml

File and folder convention

By default notice webpacker generates an application.js inside the packs directory file for demo purposes.

2. Webpack configuration

*Note: All options are customisable from config/webpack/paths.yml

Live reloading

You can checkout these links on this subject,

https://webpack.js.org/configuration/dev-server/#devserver-hothttps://webpack.js.org/guides/hmr-react/

Putting it into action

1. Setup

Procfile

web: bundle exec puma -p $PORT

Procfile.dev

web: bundle exec rails s
# watcher: ./bin/webpack-watcher
webpacker: ./bin/webpack-dev-server

Also, lets setup a small binstub that runs the Procfile.dev, create a file inside bin/* folder called server and paste following commands:

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

You might also need to do chmod 777 bin/server incase you get permission denied when running this binstub. So, now we can do ./bin/server and it will run the Procfile.dev and run webpack and puma as intended.

2. Code

counter.js

index.js

Then, inside packs directory create an entry file called counter.js and fill it up with following code.

Pretty simple!

3. View

bundle exec rails g controller pages index

Then inside the routes.rb file setup our root route to be this:

root ‘pages#index’

..and finally inside pages/index.html.erb paste the following HTML snippet:

<div class=”counter-wrapper”>
<h1>Counter</h1>
<form class=’counter’>
<button id=’increment’>Increment</button>
<input type=”number” name=”counter” id=’counter’ value=’0' />
<button id=’decrement’>Decrement</button>
</form>
</div>
<%= javascript_pack_tag ‘counter’ %>

Notice, the javascript_pack_tag helper, it will pull in the compiled counter module script and reference it in app like so:

<script src=”http://localhost:8080/counter.js"></script>

4. Running

./bin/server 
# or
bundle exec foreman start -f Procfile.dev

You will notice in Terminal that webpack compiles our counter module and displays relevant information like size, etc.

Now, go to http://localhost:5000/ in your browser and you will see the counter app running. Yay! 😄

5. Styling

..and then finally add it to our counter/index.js and view:

<%= stylesheet_pack_tag ‘counter’ %>

Now, go back to the browser and notice the new changes are live-reloaded because of webpack dev server live reloading. Amazing! 👍

<link rel="stylesheet" media="screen" href="http://localhost:8080/counter.css" />

Deployment

Now type git push heroku master from your app folder and it should be deployed to Heroku. Simple! 😀

You can find more examples on this repo: https://github.com/gauravtiwari/webpacker-example-app and https://github.com/gauravtiwari/webpacker-react-frontend

Resources

Statuscode

Keeping developers informed.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store