Setting up Elm with Phoenix

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
  1. To the “paths/watched” section, add an entry for “web/elm”
  2. To the “plugins” section, add a new block for elmBrunch:
(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!

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brandon Richey

Brandon Richey

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