Installing Elm and setting up a development environment
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.
Once you start writing real web applications you will need a local installation of Elm, as well as other packages to support Elm development.
Installing Elm
Essentially I found the Elm install instructions to be complete and adequate. So I will just point you to that. I am using Atom as my editor and find the setup for Elm quite good. The main plugin that I use is the [the language-elm plugin.][https://atom.io/packages/language-elm].
You can also customize atom so you can interact/send code to the Elm 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.
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
-postand-addressoptions 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.