2.3

Building a Simple Web Page

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 file called homepage.html inside the beginning-elm directory we created on the Installation section and add the following code to it.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
      .jumbotron {
        background-color: #e6ffe6;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="jumbotron">
      <h1>Welcome to Dunder Mifflin!</h1>
      <p>
        Dunder Mifflin Inc. (stock symbol <strong>DMI</strong>) is
        a micro-cap regional paper and office supply distributor with
        an emphasis on servicing small-business clients.
      </p>
    </div>
  </body>
</html>

It’s a simple web page with a welcome message and a short description of one of our beloved companies. The page is styled with Bootstrap, a CSS framework. It also contains some inline style.

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 with Elm.

Open the 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 file called HomePage.elm in the beginning-elm directory and add the following code to it.

module BeginningElm exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)


view model =
    div [ class "jumbotron" ]
        [ h1 [] [ text "Welcome to Dunder Mifflin!" ]
        , p []
            [ text "Dunder Mifflin Inc. (stock symbol "
            , strong [] [ text "DMI" ]
            , text ") is a micro-cap regional paper and office supply distributor with an emphasis on servicing small-business clients."
            ]
        ]


main =
    view "dummy model"

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 the terminal to compile HomePage.elm to JavaScript.

elm-make HomePage.elm --output elm.js

The output file doesn’t have to be named 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.

Elm will ask for your permission to install some packages. Answer y. Once Elm is done installing packages and compiling the code, it will create a couple of new files and a directory inside the beginning-elm directory.

elm-package.json - Elm uses this file to store metadata about the project and its dependencies.

elm-stuff - This is where Elm stores the artifacts produced after elm-make compiles our code including the packages our project depends on.

elm.js - A JavaScript file that contains the compiled code.

Create one more file called index.html inside the beginning-elm directory and add the following code to it.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
      .jumbotron {
        background-color: #e6ffe6;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="elm-code-is-loaded-here"></div>

    <script src="elm.js"></script>
    <script>
      Elm.BeginningElm.embed(document.getElementById("elm-code-is-loaded-here"));
    </script>
  </body>
</html>

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 HomePage.elm --output elm.js. That command compiles our Elm code and puts it in the elm.js file. Finally, we used the Elm.BeginningElm.embed function to load our Elm app inside the elm-code-is-loaded-here div.

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.

Open the 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 the Elm programming language and understanding how the architecture it provides helps us build incredibly robust front-end web applications.

Back to top

New chapters are coming soon!

Sign up for the Elm Programming newsletter to get notified!

* indicates required
Close