In this post, I will walk you through the step from 0 to display “Hello, Elm” in your browser. We will also discover some tools in Elm ecosystem which make our development with Elm becomes easy and fun.
Note: The easiest way to try out elm is through the online repl – http://elm-lang.org/try. This is a good place to paste examples from official documentation and play with it.
Setting up Elm
First of all you can download an installer based on your OS from the official installation guide. Or easier, we can install by using npm.
After finished installing, you should be able to type the elm command.
1 2 3 4 5 6 7 8 9
Congrats, now Elm is successfully installed. We will go through each command carefully.
Let’s kickstart of an Elm project. Our first project will be getting some HTML display on browser.
1 2 3 4 5 6
Let’s see what it gives us:
So the important thing here is the
elm-package.json. Here is where we declare all our dependencies. We can ignore
elm-stuff right now.
To display something on browser using Elm we will need to add
Elm will ask you politely whether to add dependency to elm-package.json and upgrade plan. We just need to answer yes by typing y.
1 2 3 4 5 6 7 8
So if you open
elm-package.json you will notice our new package is added to the dependencies field.
Create your Main.elm
Let’s create a new
Main.elm file in our project directory.
1 2 3 4 5 6
Let’s go through line by line. Firstly, we define our module name – Main and the keyword where is to tell Elm that this is a module.
In the next line, we import the module from
elm-html dependency which we just installed.
To be more explicit what we want to expose from a specific module, we can use the keyword exposing. The following code produce the same result.
1 2 3 4 5
Finally we have our
main function. This is the place where elm program starts from. Currently we just tell it to print out “Hello, Elm”.
Let’s try to display this on browser.
Because we want to display it on the browser and browser can’t talk to Elm directly so we need to compile Elm into the language which browser can understand. Here is where the command
elm make comes into play. Let’s compile our module into a file name
1 2 3 4
If you are using window
open might not work for you. In this case just drag the
index.html into browser to see the result.
Congrats, now you’re an Elm programmer.
Embedding into HTML
We can generate a new html page by using
elm make Main.elm --output index.html but in real life, we probably want to include a lot of thing in our index.html. For eg: bootstrap(duh) and google analytics script. So it’s a good idea to generate a js file and embed it into HTML.
1 2 3
We need a html !!! Let’s create a new html file name
main.html. We will also include the generate
main.js file using the script tag.
1 2 3 4 5 6 7 8 9 10
However if you open this in browser you will see nothing. This is because we haven’t tell Elm where to render our module. To do that let’s add another script under the
1 2 3 4
Because we named our module as Main so when we render our view using “Elm.Main”. Our final html looks like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
We now know how to embed Elm application into html template but it’s quite troublesome to type the command
elm make everytime we make a change during development.
As you realize, the compilation time was quite long. In development we need faster cycle. Let’s meet the Elm reactor.
1 2 3
Point your browser to
localhost:8000 and you will see a list contains all our files.
Main.elm under Elm Files directory, and you will see our app. Now all the changes we made will be recompiled automatically. Make a change, refresh the browser and mind blown.
To stop the elm-reactor, press
ctrl + c.
By default elm-reactor run on
localhost:8000. We can also specify address and port by running:
Finally we can play with repl by typing
elm-repl. This is particurly useful when you want to try out some core function or in offline mode. Let’s try out a few function:
1 2 3 4 5
:exit to stop the repl.
Let’s see what we had learned
* install Elm in our own machine, install packages using
elm-package install command
* by utilizing
elm-reactor let you see changes quickly. It is very handy in development
* to test our elm quickly, we just need to