Let’s get a little taste of Elm before we get properly introduced to it. We will be building a simple web page using just HTML and CSS first. Later we will rebuild the same page with Elm to see the difference between two approaches.
Building a Simple Page with HTML
Create a new directory called
beginning-elm. It doesn’t matter where you create it. Inside that directory, create a file named
homepage.html and add the following code to it.
Note: Don’t worry if you aren’t familiar with Bootstrap. We are using it here to make the page look slightly better. Later it will serve as an example for how to load an external CSS framework in Elm.
homepage.html file in a browser. It should look something like this:
Next, we will rebuild the home page for Dunder Mifflin with Elm.
Building a Simple Page with Elm
Create a new Elm project by running the following command from the
beginning-elm directory in terminal.
We are greeted with the following message.
The creators of Elm have gone to great lengths to make it a very friendly language. Consequently, Elm often tries to gently nudge us in the right direction with just the amount of information we need at the moment. Go ahead and press
elm init does is create the
elm.json file and an empty directory called
elm.json - Elm uses this file to determine which packages our project depends on. More on this later.
src - This directory is where all of our Elm files will be stored. Create a new file called
HomePage.elm inside the
src directory and add the following code to it.
Don’t worry about understanding the code above for now. We will cover how an Elm application works in detail later. All this code does is implement the exact same home page we built with plain HTML and CSS above. Run the following command from
beginning-elm directory in terminal to compile
Note: The output file doesn’t have to be
elm.js. You can call it anything you want. If you do name it something else, make sure to change the name in the HTML code below too.
If you look inside the
beginning-elm directory, you should see the
elm.js file and a new directory called
elm-stuff which contains the build artifacts. Create one more file called
beginning-elm and add the following code to it.
The code inside
<head> is exactly the same as before. The
<body>, however, looks different. We created a
div and gave it an
id. We then loaded the
elm.js file that was generated as an output when we ran this command earlier:
elm make src/HomePage.elm --output elm.js. That command compiles our Elm code and puts it in the
elm.js file. Finally, we used the
Elm.HomePage.init function to load our Elm app inside the
Note: Don’t worry if some of this doesn’t make sense yet. We will cover the mechanics of creating and embedding an Elm app in detail later.
index.html file in a browser. It should look exactly like the one we built with just HTML and CSS.
Building a simple web page with Elm took a bit more effort than doing it with just HTML and CSS. If all you are building is a bunch of static pages, Elm is probably not the right tool for that. But if you need to build a highly interactive web application that will continue to grow in size and complexity over time then Elm is a fantastic tool for that.
The rest of this book is dedicated to getting ourselves familiarized with Elm and understanding how its architecture helps us build incredibly robust front-end web applications.