Elm on Rails 5.1 with Webpacker

Elm, the new hotness in front-end programming, is now (almost) officially supported in Rails 5.1 via the webpacker gem. The Elm language provides strong type-checking in an immutable, functional programming language that compiles down to JavaScript for the browser. I like to characterize writing Elm as well-organized and fearless, which is something I've been forever wanting on the front-end. Let's see how to set it up!

Install Elm with Webpacker 1.2

The current release of the webpacker gem does not support Elm yet, so we'll have to use the master branch for now. The easiest way to do that is to create the Rails application first, then bundle and install webpacker.

First, be sure to install yarn. Then, perform the following:

gem install rails
rails new my_app --skip-turbolinks
cd my_app
echo 'gem "webpacker", github: "rails/webpacker"' >> Gemfile
bundle
./bin/rails webpacker:install
./bin/rails webpacker:install:elm

Install Elm with Post-1.2.0 Webpacker

As of this writing, there is no released version of webpacker that supports Elm. See the rubygems webpacker page to find the latest, released version. If it's past 1.2.0, then the shorter set of commands below should work.

First (as with the v1.2.0 instructions), be sure to install yarn. Then, perform the following:

gem install rails webpacker
rails new my_app --webpack=elm
cd my_app

Using Elm with Webpacker

The installation procedure gets the necessary bits installed, but you still need to change your layout to support webpacker and elm. Eventually, you may want to rename the app/javascript/packs/hello_elm.js file to something less hello-world-y, but this should do for now in app/views/layouts/application.html.erb:

<%= javascript_pack_tag 'hello_elm' %>

<%# remove/comment-out this line: %>
<%# javascript_include_tag 'application' %>

Seeing as you won't really need any views, we'll make a blank page in order to render the layout:

mkdir app/views/application
touch app/views/application/empty.html

# routes.rb
Rails.application.routes.draw do
  root to: "application#empty"
end

Finally, make sure to run the webpack dev server alongside your standard Rails server. So, in one terminal, run ./bin/rails s and in another, run ./bin/webpack-dev-server.

Start Writing Elm

That's it! Time to write some Elm in app/javascript/packs/Main.elm! If you're not quite familiar with the language, there's a wonderful guide to follow. And for some great Rails integration packages, check out elm-rails by NoRedInk and elm-action-cable by yours truly!

As you write, you'll learn to love how the compiler helps you write your code, much like TDD helps you write your Rails code. To see the compiler's errors and warnings, you can view your browser's console or the terminal in which you ran ./bin/webpack-dev-server. Better yet, you can add overlay: true, to the module.exports["devServer"] key in config/webpack/development.server.js, and you'll see your errors right in the browser!