Image for post
Image for post

Introducing Webpacker

Official Rails gem for bundling JavaScript assets with Webpack

Gaurav Tiwari
Feb 19, 2017 · 5 min read

Prerequisites

Setup

Before starting out make sure ruby, node and yarn is installed on your machine. See prerequisites section for more details.

// 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
rails webpacker:install
rails webpacker:install:[react, angular or vue] (optional)
bundle exec rails webpacker
bundle exec rails -T

Configuration

As with all Rails things, webpacker also comes with certain conventions by default. Lets take a look at them one by one:

1. Folder structure

Take a look at the new app/*javascript folder. This is the folder that will contain all of the JavaScript app code and webpack entry points (a.k.a packs). By default it’s app/javascript/packs

File and folder convention

2. Webpack configuration

The generator adds webpack configurations for each environment into the *config/webpack. These configurations out of the box support many of the webpack features for various environments, like code-splitting, asset-fingerprinting, and linking static assets like image and stylesheets (including post-css).

Live reloading

Webpacker provides a binstub for running webpack-dev-server that supports live code reloading in the development environment. You will need to install additional plugins for Webpack if you want features like HMR [Hot module replacement]. *Note: Dev server options are customisable from config/webpack/development.server.yml

Putting it into action

Now, lets create a small JavaScript module and put it all together to see how it works.

1. Setup

First, lets add foreman gem for managing multiple processes in development group of your Gemfile and run bundle install. Then, create two files called Procfile and Procfile.dev(for dev) in the root folder.

web: bundle exec puma -p $PORT
web: bundle exec rails s
# watcher: ./bin/webpack-watcher
webpacker: ./bin/webpack-dev-server
#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

2. Code

Now, lets add our new example counter module, first create a module folder called counter in the app/javascript folder then inside this folder create two files: index.js and counter.js with following code.

3. View

Lastly, for adding this counter to our view lets generate a controller:

bundle exec rails g controller pages index
root ‘pages#index’
<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’ %>
<script src=”http://localhost:8080/counter.js"></script>

4. Running

Open up the current directory in Terminal and run:

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

5. Styling

Lets add some styling to our counter module using Sass. Create a new style.sass inside app/javascript/counter/style.sass with following code:

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

Deployment

Last but not least, lets take a look at deployment, particularly deploying this app to Heroku. Heroku installs yarn and node by default if you deploy a rails app with Webpacker. Also replace sqlite gem with pg gem in Gemfile, bundle, and commit the changes.

Resources

Statuscode

Keeping developers informed.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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