Setting up Elm with Phoenix

Brandon Richey
Dec 24, 2015 · 3 min read

Current Versions

Step 1: Creating our application

$> mix phoenix.new elm_base
Answer 'y' to fetch and install dependencies
$> cd elm_base
$> mix ecto.create
$> iex -S mix phoenix.server

Step 2: Setting up Brunch

npm install --save-dev elm-brunch
(root)/brunch-config.js
$> mkdir web/elm && touch web/elm/App.elm
$> cd web/elm
$> elm package install elm-lang/html
To install elm-lang/html I would like to add the following
dependency to elm-package.json:
"elm-lang/html": "1.0.0 <= v < 2.0.0"May I add that to elm-package.json for you? (y/n) ySome new packages are needed. Here is the upgrade plan.Install:
elm-lang/core 4.0.0
elm-lang/html 1.0.0
elm-lang/virtual-dom 1.0.0
Do you approve of this plan? (y/n) y
Downloading elm-lang/core
Downloading elm-lang/html
Downloading elm-lang/virtual-dom
Packages configured successfully!
(root)/web/elm/App.elm
(root)/web/templates/layout/app.html.eex
<div id="elm-container"></div>
// Set up our Elm App
const elmDiv = document.querySelector(‘#elm-container’);
const elmApp = Elm.App.embed(elmDiv);
main =
text "Hello from Elm!"

Step 3: Building more with Elm!

Brandon Richey

Written by

I am a software engineer, and now, published author! Check out my new book at https://www.packtpub.com/web-development/phoenix-web-development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade