What to do with your new Elm install

In this post we'll get syntax highlighting working and meet all the elm binaries.

• elm-make
• elm-package
• elm-reactor

We start this article from where we left in How to setup your local development environment for Elm from source, with a newly installed Elm environment we want to take for a spin.

Elm support in Sublime Text####

There are some editors that have plugins for Elm, namely the usual suspects, Vim, Emacs, Atom and Sublime Text.
When I started out with Elm the Emacs support was buggy, so I ended up buying Sublime Text, and as it works quite well for me I haven't looked back.

Install Package Control, following the instructions here, then Tools-> Command Palette -> type "Install" and chose "Package Control: Install package".
Search for "Elm Language Support" on the installable packages list and confirm.
Assuming that worked, you're now ready to edit Elm source code.

Compiling Elm code with elm-make###

This is an Hello World, we'll compile it and run it:

import Html exposing (span, text)
import Html.Attributes exposing (class)

main =
    span [class "welcome-message"] [text "Hello, World!"]

use elm-make to compile it to an js file page you can add to an html page and execute in a browser:

$ elm-make hello.elm 

Likely you'll see elm-package in action, while it automatically finds that you are missing a dependency:

Some new packages are needed. Here is the upgrade plan.

  Install:

    elm-lang/core 2.1.0

Do you approve of this plan? (y/n) y

Downloading elm-lang/core

Packages configured successfully!

Error when searching for modules imported by module 'Main':

    Could not find module 'Html'


Potential problems could be:

  * Misspelled the module name

  * Need to add a source directory or new dependency to elm-package.json

Elm-make has created a template elm-package.json for you, it holds the data needed by elm-make to compile your project. Dependencies, versions, and much more.

{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/USER/PROJECT.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "2.1.0 <= v < 3.0.0"
},
"elm-version": "0.15.1 <= v < 0.16.0"
}

It only filled in elm-core as a dependency, but we also need the Html library. You can look libraries up at the elm-package repository.
The package you need is evancz/elm-html.
By attempting to install it with elm-package you'll find that it will ask you nicely if you want it to update your elm-package.json for you as well:

elm-package install evancz/elm-html
To install evancz/elm-html I would like to add the following

dependency to elm-package.json:

    "evancz/elm-html": "4.0.1 <= v < 5.0.0"

May I add that to elm-package.json for you? (y/n)

After it completes the installation of the dependencies, you can try to compile again, and this time there is no more yak shaving awaiting you:

$ elm-make hello.elm 

Success! Compiled 37 modules.                                       

Successfully generated elm.js

This generates a .js file that you can include in a web page.

To generate a convenient html file that you can directly execute in your browser use:

$ elm-make hello.elm --output=hello.html

Success! Compiled 1 modules.                                        

Successfully generated hello.html

Debugging workflow with Elm Reactor####

This guide wouldn't be complete without showing you how to use Elm's debugger workflow, elm-reactor.
It's unlikely you have seen anything like this before, as I hadn't. It's a time travelling debugger.

For more about how a Time Travelling Debugger works take a look at my video overview of elm-reactor.

import Graphics.Element exposing (..)
import Mouse


main : Signal Element
main =
Signal.map show Mouse.position

Elm Reactor 0.3.2 (Elm Platform 0.15.1)

Listening on http://0.0.0.0:8000/

import Graphics.Element exposing (..)
import Mouse
import Debug

main : Signal Element
main =
  Signal.map show (Signal.map (Debug.watch "mouse") Mouse.position)