Phoenix + Elm setup

instructions.md

Phoenix + Elm Setup

Important

0. This was tested on Phoenix 1.2.0;
1. Make sure you have npm 3.x or above - older versions will spit out tons of Babel-related errors.

Instructions

0. Create a Phoenix project: mix phoenix.new my_awesome_project
1. Install dependencies when prompted, then navigate to your project folder
2. Install the elm-brunch package: npm install elm-brunch --save-dev
3. Edit brunch-config.js adding the elmBrunch configuration in the plugins key:

plugins: {
  // ...
  elmBrunch: {
    elmFolder: "web/static/elm",
    mainModules: ["Main.elm"],
    outputFolder: "../vendor"
  }
}

0. Create the folder web/static/elm and navigate to it
1. Install Elm's Html package: elm package install elm-lang/html
2. 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!"

0. Create a container for your Elm application in the layout (usually web/templates/layout/app.html.eex):

<div id="main"></div>

0. 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);

0. From your project's root folder, start the Phoenix server: mix phoenix.server
1. Done!