In this section we will look at how to set up the development environment for developing Web applications.

We were living in a nice little bubble where we could basically use online editor/runner. and avoid a local install.

But once you need to start writing real web applications you will need a local install of Elm as well as other packages to support web development.

Installing Elm

Essentially I found the Elm install instructions to be fairly complete and adequate. So I will just point you to that. I am using Atom currently and find the setup for Elm quite ok. I will add some instruction of how to customize atom so you can interact with the repl.

Hosting your Web Applications

We will look at two hosting scenarios for your app :

Elm live

You will find all the documentation you need for the setup of Elm live at the node package site for elm-live or on the elm-live GitHub site.

As you run through the install process you will find that Elm has a remarkably polite and communicative package manager.

$ mkdir TestApp && cd TestApp

-- you need this only if want to install elm locally
$ elm package install

-- This will install the html libraries and its dependencies.
$ elm package install evancz/elm-html

-- for some projects we will use the start-app package you can get it by
$ elm package install evancz/start-app

Now if you create a file main.elm

import Html
main =
   Html.text "Hello, World!"

You can now run your file through elm-live by:

$ elm-live main.elm --open
<!doctype html>
<link rel="stylesheet" href="/style.css" />
<script src="/elm.js"></script>
$ elm-live Main.elm --output=elm.js --open

You should be good to go.

The output to the console will tell you where you can point the browser to see your page. If you use the defaults I found that it points to: http://192.168.1.113:8000/

Now fire up you editor you should see your webpage. Make a change to main.elm to see the page update as soon as you save it.

Elm Reactor

Reactor comes with the Elm platform. So you can pretty much use it as soon as you have elm installed. You will find more information on the [Elm Reactor GitHub site]:Elm-Reactor.

Just navigate to your project folder and on the command line run: $ elm-reactor. You should see the elm reactor running at http://0.0.0.0:8000/ which is the default. If for some reason this does not work you might want to try two things to trouble shoot this:

  • Ensure that any firewall you are running is not blocking access to this port.
  • Also you can just try changing the port using the -post and -address options as described on the Elm Reactor GitHub site.

The Elm reactor also has a built in Debugger that we will discuss in a later post on Debugging.