Artwork . Games

Write Yourself a Scheme in Elm: First Steps

November 7, 2016

Install Tools

First, you need to install the “Elm Platform” which contains most of the tools necessary for writing Elm programs.

The easiest way is to use the npm installer:

$ npm install -g elm

You will also make use of a tool called elm-live, which is a flexible development server for Elm that includes compiling your code, serving the output, and live reloading changes in the browser.

$ npm install -g elm-live

Finally, you are going to be writing unit tests to make sure all of the code keeps working correctly, so install elm-test, which is a tool that runs Elm test suites.

$ npm install -g elm-test

There are Elm plugins for just about any editor you might want to use like Vim, Emacs, and Atom. Feel free to set up that up before getting started.

Create a Project

Create your project directory. Inside that, create a new directory named “src” where you will put all your Elm code. Open a new file “src/Main.elm” and add the following text:

module Main exposing (..)

import Html exposing (text)

main =
    text "Hello Elm Scheme!"

You can see that we import the Html module which is a part of the elm-lang/html package. Let’s add it as a dependency to our project:

$ elm package install elm-lang/html

The “elm-package” tool has generated an “elm-package.json” file that keeps track of your project’s dependencies, among other things. You will need to edit this file, changing the “source-directories” array from [ "." ] to [ "src" ] to tell the compiler where to find the “Main.elm” file you just created.

Finally, you can use “elm-live” to compile and host the program:

$ elm live src/Main.elm --open

Exercises

  1. The function toString converts any Elm value into a string, and the ++ operator concatenates two strings. Use these to append a number to the end of the text displayed.

Up Next: Parsing