Prepare for the Elm Course

elm-course.md

Install Elm and IntelliJ

For the course we will use the programming language Elm.

It is possible to use an online Elm environment name Ellie: in that case there is nothing for you to install.

But you can also install Elm and a code editor (IntelliJ) with the Elm plugin. This has some advantages:

• You do not depend on the internet working
• IntelliJ+plugin comes with some nice features not available in Ellie

Installing

Download and install NodeJS: https://nodejs.org/en/download/

Download and install Elm: https://github.com/elm/compiler/releases/download/0.19.1/installer-for-mac.pkg

Download and install IntelliJ IDEA: https://www.jetbrains.com/idea/download/download-thanks.html?platform=mac&code=IIC

Install the Elm plugin from within IntelliJ IDEA. Go to Settings -> Plugins searching for "Elm" and install it. Now restart IntelliJ.

Test your setup by starting a project

First test if this command works: elm repl

If nor you may not have installed elm or nodejs correctly.

Open a terminal (iTerm), and type:

cd /tmp
mkdir myproject
cd myproject
elm init
elm reactor

The last command starts a local webserver, do not close the terminal as we need the web server later.

In IntelliJ go to File -> Open, browse to /tmp/myproject/, select it (the folder) and click OK.

Now you see on the left a folder icon with "myproject", open that, right click the "src" folder, click New -> File and name it Main.elm.

Copy the following code into your Main.elm file:

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

type alias Model = { count : Int }

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model = case msg of
    Increment -> { model | count = model.count + 1 }
    Decrement -> { model | count = model.count - 1 }

view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        ]

main : Program () Model Msg
main = Browser.sandbox { init = { count = 0 }, view = view, update = update }

Now open a web browser, browse to http://localhost:8000, go to the src/ folder and click Main.elm.

If all went well you see a plus and a minus button which you can use to manipulate the number.