Elixir, Phoenix & Elm Setup

Want to set up Elm in an Elixir/Phoenix project with automatic compilation, live reloading, etc? This quick guide is for you.

Instructions

  • Create a Phoenix project: mix phoenix.new my_awesome_project
  • Install dependencies when prompted, then navigate to your project folder
  • Install the elm-brunch package: npm install elm-brunch --save-dev
  • Edit brunch-config.js adding the elmBrunch configuration in the plugins key:
plugins: {
  // ...
  elmBrunch: {
    elmFolder: "web/static/elm",
    mainModules: ["Main.elm"],
    outputFolder: "../vendor"
  }
}
  • Create the folder web/static/elm and navigate to it
  • Install Elm's Html package: elm package install elm-lang/html
  • In web/static/elm, create the Main.elm file (this will be your app's entry point):
module Main exposing (..)

import Html exposing (..)


main =
    text "Hello, World!"
  • Create a container for your Elm application in the layout (usually web/templates/layout/app.html.eex):
<div id="main"></div>
  • Embed the Elm application in that container by editing web/static/js/app.js:
const elmContainer = document.querySelector("#main");
const elmApp = Elm.Main.embed(elmContainer);
  • From your project's root folder, start the Phoenix server: mix phoenix.server

Notes

  • This was tested on Phoenix 1.2.0;
  • Make sure you have npm 3.x or above - older versions will spit out tons of Babel-related errors;
  • You may want to add /web/static/elm/elm-stuff to your .gitignore to avoid adding build artifacts to your commit!