The Elm installation page provides installers for Mac and Windows and sources to build on Linux systems. We will be using v0.19.1; some language features have been added or removed compared to previous versions.
The Elm tools are also available on linux.cs.uchicago.edu.
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.1 ----------------------------------------------------------------
Say :help for help and :exit to exit! More at <https://elm-lang.org/0.19.1/repl>
--------------------------------------------------------------------------------
> "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.1/repl>
> :exit
%You can also CTRL+D to escape.
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.1/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!Take a look at the elm.json file, which declares the libraries required by your program.
% ls
elm.json src
% elm make
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.Try generating an HTML page.
% elm make src/Main.elm --output=hello.html
Success!
-- NO MAIN ---------------------------------------------------------------------
When producing an HTML file, I require that the given file has a `main` value.
That way I have something to show on screen!
Try adding a `main` value to your file? Or if you just want to verify that this
module compiles, switch to --output=/dev/null to skip the code gen phase
altogether.
Note: Adding a `main` value can be as brief as adding something like this:
import Html
main =
Html.text "Hello!"
From there I can create an HTML file that says "Hello!" on screen. I recommend
looking through https://guide.elm-lang.org for more guidance on how to fill in
the `main` value.Edit src/Main.elm, and try again.
% elm make src/Main.elm --output=hello.html
Success! Compiled 1 module.
Main ───> hello.htmlThe file hello.html is the compiled HTML and JavaScript.
Take a look at the elm-stuff/. It has snapshots of all required libraries. To build your project from scratch, rm -rf elm-stuff and then elm make again.
elm-format is a code formatting tool you may choose to use, so that you don't have to think about whitespace and layout decisions. You can integrate it into your text editor so that it runs upon every save.
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.
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.
And a Chicago Elm meetup.
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.
We will use the cs223-spr-20 Subversion repository on PhoenixForge. If you are enrolled in the course, a subproject should have been created for you called USER-cs223-spr-20, where USER is your CNet ID. To check, visit:
https://phoenixforge.cs.uchicago.edu/projects/USER-cs223-spr-20If you are enrolled in the course and this subproject does not exist, ask techstaff for help.
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 cs223Make 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-20 --username=USERNext, create a subfolder for this assignment and populate it with the skeleton code:
% cd USER-cs223-spr-20
% svn mkdir hw0
% cd hw0Create some dummy file Test.elm and then add it to your repo:
% svn add Test.elmMake 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-20/repositoryThese directions are based on this, which contains more details and links to additional resources, if needed.