Building elm with stack

Building elm is a slightly invasive procedure if your distro doesn’t have any pre-built packages for it and has a non-ancient version of ghc. Removing all haskell packages and installing HaskellPlatform didn’t really appeal to me. Then it occured to me that stack ought to be perfectly suited for this task. It took me a while to sort it out, but here’s how I got a working build of the elm tools installed on Archlinux.

Installing stack and cabal

Add the ArchHaskell repo by following the instructions on the wiki. Then install the haskell-stack-bin package. For stack to work fully one also needs the libtinfo package from AUR.

If you aren’t using Archlinux there are instructions on the stack page.

Now build cabal-install using stack:

% stack --install-ghc install cabal-install

After this make sure ~/.local/bin is in your $PATH.

Cloning the elm tool repos

The elm developers have decided to not use Hackage so to get the tools one has to clone the repos from GitHub. I used the following shell script to get them all cloned in one go:

#! /usr/bin/zsh

repos=("git clone -b 0.15.1"
       "git clone -b 0.5.1"
       "git clone -b 0.2"
       "git clone -b 0.3.2"
       "git clone -b 0.4.2"

for r in ${repos[@]}; do
    eval ${r}

Creating stack.yaml

To create the initial stack.yalm run

% stack init --resolver ghc-7.8.4

Now open it and make a couple of modifications. First add the line

system-ghc: false

This is to make sure stack won’t try to use any ghc version already installed on the system. Then add a flag for aeson:

    old-locale: true

Now use stack to create the full stack.yaml:

% stack --install-ghc solver --modify-stack-yaml

Patch elm-reactor

In order to build elm-reactor it first needs a tiny patch:

diff --git a/backend/Socket.hs b/backend/Socket.hs
index b80a98f..69fe488 100644
--- a/backend/Socket.hs
+++ b/backend/Socket.hs
@@ -18,7 +18,7 @@ fileChangeApp :: FilePath -> WS.ServerApp
 fileChangeApp watchedFile pendingConnection =
   do  connection <- WS.acceptRequest pendingConnection
       Notify.withManager $ \notifyManager ->
-        do  _ <- NDevel.treeExtExists notifyManager "." "elm" (sendHotSwap watchedFile connection)
+        do  _ <- NDevel.treeExtExists notifyManager "." "elm" (sendHotSwap watchedFile connection . FP.decodeString)
             keepAlive connection

Building the tools

Now build the elm tools (it’s important that elm-reactor is built after elm-make):

% stack install elm-{compiler,make,package,repl}
% stack install elm-reactor

Now just sit back and wait for the building to finish.

Verify that it works

Follow the instructions for running example 1 of the elm architecture tutorial. I had to use the following two commands to get it running properly:

% elm make
% elm reactor

Then I can point my browser at http://localhost:8000/Main.elm?debug and play with the counter.

Leave a comment