Software Dev Shenanigans

10 sequential steps to use Elm with a Phoenix app

28 Jan 2018

At the time of this writing the following steps are straight to the point to create a new Phoenix application and configuring Elm on top of it.

I’ll assume that you have Phoenix, Elm and NodeJS ready to rock. Ah, and you would probably like to use your application name where you read mr_wednesday:

1. $ mix phx.new mr_wednesday
2. $ cd mr_wednesday/assets
3. $ npm install --save-dev elm-brunch
4. $ mkdir elm
5. $ cd elm
6. $ elm package install elm-lang/html
7. edit mr_wednesday/assets/brunch-config.js
   • add the elm dir to the watched paths section:

   paths: {
     watched: ["static", "css", "js", "vendor", "elm"],
     // ...
   }
   

   • add the a new section called elmBrunch to the config under plugins:

   elmBrunch: {
     elmFolder: "elm",
     mainModules: ["Main.elm"],
     outputFolder: "../js"
   }
   

8. create mr_wednesday/assets/elm/Main.elm

   module Main exposing (..)
   
   import Html exposing (text, Html)
   
   
   main : Html a
   main =
       text "Hello World"
   

9. edit mr_wednesday/assets/js/app.js and add:

   import Elm from "./main"
   const elmDiv = document.querySelector("div#elm-app")
   Elm.Main.embed(elmDiv)
   

10. edit mr_wednesday/lib/mr_wednesday_web/templates/page/index.html.eex:

     <div id="elm-app"></div>
    

Run the app.

Why not, right? Some more steps for you:

1. $ cd mr_wednesday
2. $ mix ecto.create
3. $ mix phx.server
4. visit http://localhost:4000

And you should see a unsurprisingly boring hello world directly from Elm.