Go to http://elm-lang.org/install and download the appropriate installer for your system.
Our first Elm application
Let's write our first Elm application. Create a folder for your application. In this folder run the following command in the terminal:
elm package install elm-lang/html
This will inform you that additional packages are needed, show you the proposed upgrade plan, and ask you to confirm the upgrade plan. If you are running elm 0.18.0, the upgrade plan will include elm-lang/core, elm-/lang/html, and elm-lang/virtual-dom packages.
This will create an elm-package.json file and elm-stuff directory in the same project directory, and then install the specified modules. Your modules themselves are saved in the elm-stuff directory, while their specifications are saved in the elm-package.json file.
Hello.elm file, with the following code:
module Hello exposing (..) import Html exposing (text) main = text "Hello"
Go to this folder on the terminal and type:
This should show you:
elm reactor 0.18.0 Listening on http://0.0.0.0:8000/
http://0.0.0.0:8000/ on a browser. And click on
Hello.elm. You should see
Hello on your browser.
Note to you might see a warning about a missing type annotation for
main. Ignore this for now, we will get to type annotations later.
Let's review what is happening here:
module Hello exposing (..)
Every module in Elm must start with a module declaration, in this case the module name is called
Hello. It is a convention to name the file and the module the same e.g.
exposing (..) part of the declaration specifies what function and types this module exposes to the other modules importing this. In this case we expose everything
import Html exposing (text)
In Elm you need to import the modules you want to use explicitly. In this case we want to use the Html module.
This module has many functions to work with html. We will be using
.text so we import this function into the current namespace by using
main = text "Hello"
Front end applications in Elm start on a function called
main is a function that returns an element to draw into the page. In this case it returns an Html element (created by using
Elm reactor creates a server that compiles Elm code on the fly. reactor is useful for developing applications without worrying too much about setting up a build process. However reactor has limitations, so we will need to switch to a build process later on.