Building a web page in Elm

Now you have a solid grounding in the Elm type system. With the ability to read any function's type signature, you now can look up any package in the package docs and get a good idea of how to use it.

For now, we're going to focus on the package that's most relevant to creating a web page--the Elm HTML package. This will let us build out what will become the skeleton of our first full-fledged web app.

elm-package

To use the Elm HTML package, we'll first have to install it. This is easy with the elm-package tool you got when you first installed Elm.

The specific command we're going to use is elm-package install. If you want some details on how to use it, you can run it with the -h flag.

$ elm package install -h
Usage: elm-package install [PACKAGE] [VERSION] [-y|--yes]
  Install packages to use locally

Available options:
  PACKAGE                  A specific package name (e.g. elm-lang/html)
  VERSION                  Specific version of a package (e.g. 1.2.0)
  -y,--yes                 Reply 'yes' to all automated prompts.
  -h,--help                Show this help text

Examples:
  elm-package install                      # everything needed by elm-package.json
  elm-package install elm-lang/html        # any version
  elm-package install elm-lang/html 1.0.0  # specific version

That last example command is just what we're looking for. Let's navigate to the directory you'd like to keep your project in and run it. We're going to use the latest version of the html package at the time of this writing, 1.1.0.

$ cd ~/your/project/directory
$ elm-package install elm-lang/html 1.1.0
Some new packages are needed. Here is the upgrade plan.

  Install:
    elm-lang/core 4.0.3
    elm-lang/html 1.1.0
    elm-lang/virtual-dom 1.1.0

Do you approve of this plan? [Y/n]

This list includes all the other packages that the html package needs to work. Enter y and you'll be ready to start writing HTML in Elm!

If you take a look at your project directory now, you'll see a new folder called elm-stuff, which contains all the code for the packages you just installed. But you don't need to worry about that, since elm-package will manage it automatically for you. You might be interested in the elm-package.json, though. This file contains information about your project, including a description you can edit, and a list of all the packages you've installed.