Get started with Elm 0.19 and Phoenix 1.4

Riccardo Binetti

Published in

Ispirata

3 min readOct 12, 2018

Update 2018–11–19: updated links to use Phoenix 1.4 stable release.

Elm 0.19 was released not long ago and Phoenix 1.4 just came out, bringing with it the switch from Brunch to Webpack.

Since I like playing with new stuff, I set up a Phoenix 1.4 project capable of building Elm code. Given I bumped into several quirks, I decided to write a simple step-by-step guide detailing the process, and a couple tricks you might find handy.

1 - Install Phoenix 1.4

If you don’t have installed the new version of Phoenix yet, you can do so with the following commands

$ mix archive.uninstall phx_new
$ mix archive.install hex phx_new 1.4.0

2 - Create the project

Not much changed with the way project creation works. I will create the project with the --no-ecto flag so I can test it without having to install a database, but you can remove it if you need it

$ mix phx.new my_project --no-ecto

After creating the project, let Phoenix install the assets and move to the next step.

3 - Install and configure `elm-webpack-loader`

The next step involves installing elm-webpack-loader.

$ cd my_project/assets
$ npm install --save-dev elm-webpack-loader

This will also take care of installing the Elm compiler locally, which is something I prefer instead of having to install it globally since I’m a big fan of self-contained projects where I can say “Clone the repo, execute this commands and you’re good to go”.

To configure elm-webpack-loader add this in therules array of your webpack.config.js

...
  module: {
    rules: [
    ...    
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: {
          loader: 'elm-webpack-loader',
          options: {
            debug: options.mode === "development"
          }
        }
      }
...

This configuration will enable the useful Elm debugger while you’re compiling in development mode.

4 - Initialize the Elm project

If you’re in the assets directory, you can access the Elm binary (since 0.19 unified everything in a single executable) with ./node_modules/.bin/elm, but what I usually do is adding a script to my package.json that is simply

{
...
  "scripts": {
  ...
    "elm": "elm"
  }
}

That way I can use npm run elm as an equivalent to the elm command.

We will now initialize our Elm project. While still in the assets directory, just do

$ npm run elm init # (or ./node_modules/.bin/elm init)

This will create an elm.json file with basic dependencies and a src folder where you will put your Elm sources.

This is also a good moment to add the elm-stuff directory to your .gitignore if you’re using Git for your project, since it will contain compilation artifacts that shouldn’t be checked in to version control.

5 - Create basic Elm main

Create src/Main.elm and fill it with this basic Elm program that just prints “Hello” on the screen:

module Main exposing (main)import Html exposing (text)main =
    text "Hello Elm and Phoenix!"

6 - Embed Elm in your Phoenix app

Open the Phoenix template of your app (mine was located in lib/my_project_web/templates/layout/app.html.eex) and replace the body section with:

<body>
    <div id="elm-main"></div>
    <script type="text/javascript" src="<%= Routes.static_url(@conn, "/js/app.js") %>"></script>
</body>

Then open assets/js/app.js and add

import { Elm } from "../src/Main.elm";

var app = Elm.Main.init({
  node: document.getElementById('elm-main')
});

Those brackets around the Elm import are what almost drove me mad, but then again I’m not a Javascript tooling expert so I’m sure they have to be there for a reason.

At this point, you can start your Phoenix application with

$ mix phx.server

and visiting http://localhost:4000 should prompt you with a carefully crafted web greeting.

If you change the string in the Elm source file while keeping the server running, Phoenix’s autoreload will recompile the file and refresh the page for you.

7 - Build your awesome project!

From here you can continue to develop your Elm + Phoenix application. If you need to install some additional Elm dependency (for example mdgriffith/elm-ui) you just have to go in the assets directory and run:

$ npm run elm install mdgriffith/elm-ui

That’s enough for getting you started, and this should spare you from the pain of dealing with all the boilerplate. From here on, it’s up to you!

If you like stuff built with Elixir, Phoenix and also a sprinkle of Elm, check out Astarte, our open source IoT platform.