Elm Friday: Hello World (Part III)

About This Series

This is the third post in a series of short and sweet blog posts about Elm . The stated goal of this series is to take you from “completely clueless about Elm” to “chief Elm guru”, step by step. If you have missed the previous episodes, you might want to check out the table of contents .

Preparations

Create a new directory, let’s say elm-playground, in a convenient location, open a shell and navigate to this directory. Before we can start with the actual Elm code we need to do one little preparation step. Type the following command in your shell:

elm-package install --yes evancz/elm-html

This will install the library to render HTML elements with all its dependencies. If you are familiar with npm install, the elm-package install command works in a similar fashion. We will get to Elm’s package system later in this series.

Elm Hello World

Now that this is out of the way, we can write our first app. Honouring the tradition of our craft since the dawn of time (which was 1970-01-01, I think) we start with a Hello World Elm app:

Open your favourite editor and save the following content to a file called HelloWorld.elm in the elm-playground directory:

import Html

main = Html.text "Hello, World!"

Now start elm-reactor in the same directory. This starts a web server which will compile your Elm code on the fly every time it changes.

Open http://localhost:8000/ in a browser. This shows the directory content. Click on the file HelloWorld.elm to see the result of your very first Elm app.

Understanding the Code

Let’s dissect this piece of code and start with the bottom line. Every Elm app needs a main function that serves as the entry point. This function needs to produce some HTML. Our particular main function takes no arguments and produces a constant Html.text element with the given string as its content.

Html.text itself is a function from the module Html, which we imported in the first line. This is a module from the package evancz/elm-html, the one we installed via elm-package install earlier. When calling any function from the Html module (like div, span or text) we need to prefix it with the module name, that is, Html.div, Html.span or, as in this case Html.text. There are ways around this restriction if you prefer brevity over verbosity in your code — we’ll get to that later when we talk about the import statement in detail.

Live Reload

Now change the string “Hello, World!” in your editor to something else, say “Elm rocks!” and save the file. If you reload the page in the browser, elm-reactor will automatically recompile the file and show the new result.

That’s already pretty nice, but elm-reactor can do better. Head to http://localhost:8000/ again. This time, instead of clicking on HelloWorld.elm, click the little wrench icon next to it. This opens our app in the debugger. The same can be achieved by appending ?debug to the URL, that is, opening http://localhost:8000/HelloWorld.elm?debug .

Let’s ignore the debug panel on the right for now. Change the text “Elm Rocks!” again and save the file. The Elm debugger will notice the change, recompile and automatically reload the browser without any further action on your side. Pretty neat, huh?

Remark: If you the live reload is not working for you and you have installed version 0.16.0 via npm, you can try the last pre-0.16 version instead with npm install -g elm@0.15.1-beta4.

This concludes the third episode of this blog post series on Elm. Make sure to check out the next episode , where we will move past the simple Hello World example and dive a bit deeper into the Elm language.