Modern JavaScript & Ruby on Rails with rails/webpacker

There’s no denying that JavaScript has evolved a lot in the past years, and for Rails, keeping up has been a challenge. The result is a large variety of approaches to use modern js, es6/7 and frameworks with Rails, including the ‘javascript in a gem’ approach and the use of bundlers like Browserify and Webpack.

From the various bundler options, it seems that Webpack has emerged as the most popular one. For Rails, Webpack seems to be the way forward as well, and support to use it will be integrated into Rails 5.1.

This integration is currently being developed as rails/webpacker. The gem includes installers and configuration files that will make it easier to get started with Webpack. It comes with defaults like Babel for es6/7 and a React installer. Setup is fast, and requires little Webpack experience to get started. Rails/webpacker is likely to ship with Rails 5.1, but you can already start using it today.

Getting started

Let’s start by creating an example app using the latest rails version, at the moment this is 5.0.1

rails new webpacker_test

rails g controller static_pages home

and in our routes root to: 'static_pages#home'

Another prerequisite is that we install Yarn, a JavaScript package manager. You can install Yarn with homebrew if you haven’t used it before.

brew install yarn

Install webpacker

We want the latest webpacker gem version from github, so add the following to your gemfile and run bundle install:

gem 'webpacker', github: 'rails/webpacker'

To install webpack, dependencies and to generate configuration files:

bin/rails webpacker:install

This generates the following:

  • binstubs for yarn, webpack and webpack watcher
  • app/javascript folder
  • config/webpack
  • node_modules, package.json and yarn.lock in /vendor

The default dependencies and configuration include Babel, this allows you to use the latest JavaScript syntax right away.

Usage

In the app/javascript directory you can add ‘packs’ with bundled JavaScript files. You can add the bundle to your desired layout with the javascript_pack_tag. To start using it, add <%= javascript_pack_tag 'application' %> to application.html.erb.

Let’s run our rails app with bin/rails server, and in a different terminal window run bin/webpack-watcher.

Let’s try it out by creating a new file in app/javascript/my_file.js, including an es6 class.

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
}

const user = new User('example_user', '[email protected]');

console.log(`name: ${user.name}, email: ${user.email}`);

Add the file to your application.js pack with require(my_file). View the source code in the browser to see the bundled Webpack file with the transpiled code.

Adding React

Rails webpacker comes with a React installer that you can use to install React and its dependencies with a single command. The command bin/rails webpacker:install:react updates vendor/package.json, yarn.lock, config/webpack and generates a new react pack in app/javascript/packs

Add the React pack to your desired layout file and restart bin/webpack-watcher to start using it.

Adding packages with yarn

To manually install new packages, make sure you use bin/yarn add new_package. Using bin/yarn will make sure that the right package.json and yarn lockfile in app/vendor are updated.

Deployment

To compile your js packs for deployment, add the rails webpacker:compile command to your deployment process. This will setup production configuration, including digests (similar to the asset pipeline).

Other resources