Elm v0.16 Installation

The Elm installation page provides installers for Mac and Windows and sources to build on Linux systems. We will be using v0.16, so make sure you see 0-16 somewhere in the name of the installer you choose. Language versions are not compatible in general.

The Elm tools should also be available on linux.cs.uchicago.edu.

Online Editor

The live editor is a useful tool for trying out small bits of code on the go and for experiment with the Examples. But you certainly will not want to rely on it as part of your development workflow in this course.

REPL

The Elm Platform installation comes with a Read-Eval-Print-Loop (REPL) that will be very useful for developing and testing code that does not require HTML integration.

% elm-repl
---- elm repl 0.16.0 -----------------------------------------------------------
 :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------

> "Hello, world!"
"Hello, world!" : String

If you run into some weird behavior that you think may be a bug, try the age-old trick of quitting (:exit or Ctrl+D) and restarting. You can also take a look at the Elm mailing list to see if any related bug reports have been opened.

Building Standalone HTML

You will use elm-make to compile Elm programs into HTML and JavaScript. Before running elm-make in any project directory, you will be asked to download and install the core libraries. Give your blessings when asked.

% elm-make Foo.elm --output=Foo.html
Some new packages are needed. Here is the upgrade plan.

  Install:
    elm-lang/core 3.0.0

Do you approve of this plan? (y/n) y
Downloading elm-lang/core
...
Packages configured successfully!
Compiled 32 files
Successfully generated Foo.html

Subsequent builds:

% elm-make Foo.elm --output=Foo.html
Successfully generated Foo.html

Notice that 3.0.0 is the version of the core Elm libraries used in v0.16 of the Elm Platform. When you are browsing the documentation and source code for the core libraries, make sure you are viewing the correct version.

Take a look at the elm-package.json file and elm-stuff/ directory that are created in your working directory. The former declares the libraries required by your program and the latter contains snapshots of them all. If you ever need or want to install the libraries a particular project, you can simply delete the elm-stuff/ folder in that project directory.

Reactor

The installation also includes Elm Reactor, a nifty development and debugging tool. Check out this blog for info about it and a few video demos.

Run elm-reactor from a directory that contains *.elm files you are working on:

% elm-reactor
elm reactor 0.16.0
Listening on http://0.0.0.0:8000/

Launch a browser and navigate to http://localhost:8000. You will be able to click any Elm file in the directory where elm-reactor was run in order to run the Elm program. Edit your source file, save, and then refresh the browser page. To use the debugging features, open the page by clicking the wrench icon instead of the file name.

The Reactor will become useful as we start programming with user events.


Homework Submission System

We will use the cs223-win-16 Subversion repository on PhoenixForge. If you are enrolled in the course, a subproject should have been created for you called USER-cs223-win-16, where USER is your CNet ID. To check, visit:

https://phoenixforge.cs.uchicago.edu/projects/USER-cs223-win-16

If you are enrolled in the course and this subproject does not exist, ask for help.

Sample Submission

Try doing a test run submission well before the Homework 1 deadline. (This test run will not be graded.)

To get started, create a directory where you want to do your work:

% mkdir cs223
% chmod 700 cs223

Make sure you use chmod to set permissions so that only you have access to your work. Then go into this directory and check out your repository:

% cd cs223
% svn checkout https://phoenixforge.cs.uchicago.edu/svn/USER-cs223-win-16 --username=USER

Next, create a subfolder for this assignment and populate it with the skeleton code:

% cd USER-cs223-win-16
% svn mkdir hw0
% cd hw0

Create some dummy file Test.elm and then add it to your repo:

% svn add Test.elm

Make sure you choose the same exact names for directories and files that you create. Once you are ready to submit:

% svn commit -m "hw0: test submission"

You can resubmit as many times as you wish, and we will grade the most recent versions submitted. Late days, if any, will be computed based on your submission times.

As a sanity check, you can visit the Web-based frontend for your repository to make sure that you have submitted your files as intended:

https://phoenixforge.cs.uchicago.edu/projects/USER-cs223-win-16/repository

These directions are based on this, which contains more details and links to additional resources, if needed.