At the last ElixirConf, there were a ton of great talks about Elm. I've been
doing Elm a ton this year and I just helped
some people get Brunch compiling their Elm projects for a Phoenix app, so I
thought it would be useful to show how to do that.
Project Setup (off-video)
We'll just make a new Phoenix application:
mix phoenix.new phoenix_elm
So we have an empty Phoenix application. Let's make a quick Elm application
that we'll show on our home page.
This isn't an episode about Elm, so I'll just paste the application in and
briefly discuss it:
import Graphics.Element exposing (..)
main : Signal Element
Signal.map show Keyboard.arrows
This Elm application will just show the current state of the Keyboard arrows on
the screen. Nothing fancy.
How do we get it to be built as part of our Phoenix build pipeline? Phoenix
uses brunch, and a nice person built elm-brunch
for managing Elm applications in brunch. We can pull it in as an npm package:
npm install --save-dev elm-brunch
And now we just need to configure it in our brunch config:
// Configure your plugins
// Do not use ES6 compiler in vendor code
// Set to path where elm-package.json is located, defaults to project root (optional)
// if your elm files are not in /app then make sure to configure paths.watched in main brunch config
// Set to the elm file(s) containing your "main" function
// `elm make` handles all elm dependencies (required)
// relative to `elmFolder`
If we start phoenix now, we can see it compile our Elm application:
OK, so now we just need to wire it into our template:
<!-- We load the elm file -->
<!-- Add a container for it -->
<!-- And embed it into its container -->
And that's it. Short and sweet, but now you have a nice build pipeline for
integrating your Elm and Phoenix applications. If you're interested in Elm,
I've got 8 weeks of content on it at http://dailydrip.com, and once the next
version of Elm comes out I'll show how to integrate it with Phoenix Channels.
See you soon!