Add Elm

Setup Elm

This page explain how Elm Programming language has been setup inside the Phoenix Application.

Elm is a frontend functional programming language which compiles to javascript,html and css.

Navigate inside the web/ directory and create a new directory called elm for our Elm project folder

$ mkdir web/elm
$ cd web/elm
$ touch web/elm/Main.elm

The following instruction installs the core and html Elm Package (leave off the -y if you want to see what is happening).

$ elm package install -y
$ elm package install elm-lang/html -y

The, the main.elm file is opened in the editor and the following code is added to the file.

module Main where

import Html exposing (..)

hello = 
 text "Hello World"

main = 
 hello

The Main.elm file creates a module called Main and then it imports the Html library to use its functions. The Elm application must have a main function that acts a its starting point.

Change the page layout

This page contents have been compiled from the following sources:

• Phoenix Elm Part 2
• Walkthrough introducing elm to a js web app
• Articles about Phoenix and Elm