Elm v0.19 Installation

The Elm installation page provides installers for Mac and Windows and sources to build on Linux systems. We will be using v0.19; some language features have been added or removed compared to previous versions.

The Elm tools are also available on linux.cs.uchicago.edu.

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 0.19.0 ----------------------------------------------------------------
Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
--------------------------------------------------------------------------------

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

> :help
Valid commands include:

  :exit    Exit the REPL
  :help    Show this information
  :reset   Clear all previous imports and definitions

More info at <https://elm-lang.org/0.19.0/repl>

> :exit

%

You can also CTRL+D to escape.

Building Standalone HTML

You will use elm make to compile Elm programs into HTML and JavaScript. But first, in every project directory where you work, you will need to init a new project and also install the core libraries.

% elm init
Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out <https://elm-lang.org/0.19.0/init> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]:

Give your blessings.

Okay, I created it. Now read that link!

% ls
elm.json  src

% elm make
Starting downloads...

  ● elm/url 1.0.0
  ● elm/browser 1.0.1
  ● elm/time 1.0.0
  ● elm/virtual-dom 1.0.2
  ● elm/json 1.1.3
  ● elm/html 1.0.0

Dependencies ready!
-- NO INPUT --------------------------------------------------------------------

What should I make though? I need more information, like:

    elm make src/Main.elm
    elm make src/This.elm src/That.elm

However many files you give, I will create one JS file out of them.

Create the file src/Main.elm, and then build.

% elm make src/Main.elm
Dependencies loaded from local cache.
Dependencies ready!
Success! Compiled 1 module.

The file index.html is the compiled HTML and JavaScript.

Take a look at the elm.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. To build your project from scratch, rm -rf elm-stuff and then elm make again.

Reactor

The installation also includes Elm Reactor, an interactive development environment. Run elm reactor from your project directory:

% elm reactor
Go to <http://localhost:8000> to see your project dashboard.

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.

This old blog post describes and demonstrates some nifty debugging features from a previous version of the language.

Discussion

If you'd like to hear what the community is talking about, check out Elm Discourse and Elm Slack.

There are also a bunch of Elm conferences: elm-conf, elm Europe, and Elm in the Spring.

Online Editor

Ellie is a live web editor you may find interesting to play with. For this course, it is recommended that you develop and test your code locally; you will need to submit your files as described below.

Homework Submission System

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

https://phoenixforge.cs.uchicago.edu/projects/USER-cs223-spr-19

If you are enrolled in the course and this subproject does not exist, ask techstaff 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-spr-19 --username=USER

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

% cd USER-cs223-spr-19
% 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 (hw0/, hw1/, etc.) and files (as specified in the instructions for each homework assignment) 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-spr-19/repository

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