Elm – Your First Elm Program

In this lesson, you will write and run your first Elm program! I’ll be using IntelliJ for this demo but you can feel free to use any other IDE.

We would cover the following

1. Your First Elm Program – Hello World
2. Your Second Elm Program – Init, View, Update
3. Generating the JavaScript File

1. Your First Elm Program – Hello World

Follow the steps below:

Step 1 – Open IntelliJ and create a new  Elm Project. Make sure to choose Elm from the list as shown below:

You will notice that a new project is created and the Main.elm file opens up with the following content:

module Main exposing (main)

import Html exposing (text)

main = text "hi"

Step 2 – Replace the “hi” text with “Hello World from Elm!”

Step 3 – Open the terminal window and navigate into the src directory (use the command cd src). Then enter the following command to compile the project

elm make Main.elm

This command will yield the following output:

Dependencies ready!         
Success! Compiled 1 module.

    Main ───> index.html

At this point, you will notice the an index.html file is created in  the same directory as the Main.elm file.

Step 4 – Open the file location in your file system and open the index.html page on a browser. You will see the text “Hello World from Elm!”

Congrats! You have successfully written and compiled your first Elm program

Elm Reactor

This is an interactive development tool available in Elm that help you see the output of your program in a browser. To start Elm reactor, just enter the command:

elm reactor

This command would give the following output:

Go to http://localhost:8000 to see your project dashboard.

You can now visit the link and browse through the file and the html page.

2. Your Second Program – Init, View, Update

Now I would like you to write the following code replacing the existing content of the Main program.

module Main exposing (..)

import Browser
import Html exposing (div, text)

add a b = a + b
init =
    { value = 0}

view model =
    div [] [text "Your Second Elm Program"]

update model =
    model

main =
    Browser.sandbox
        {
            init = init,
            view = view,
            update = update
        }

As before, you can use make command to compile the program. You can also use the elm reactor command to start the web server

3. Generating the JavaScript Code

Actually, your Elm program compiles to generate a JavaScript code. To view this code, you can specify an output parameter with the make command using the command below:

elm make Main.elm --output output.js

If this command executes successfully, you will see the file output.js in the same directory as the Main.elm file.

In the next part, you would understand how model, view and update works in Elm.