Before we get started, please follow the steps below to get everything installed and configured so you can follow along with the videos.
1. Install Node.js and NPM
We'll use NPM to install the Elm Platform and other related tools as
Start by installing Node.js 6.0 or higher. The pre-built installers also automatically install NPM, so there's no separate step.
Alternatively, if you're on a Mac and already using the Homebrew package manager, you can install Node.js and NPM using
brew install node.
Once installed, confirm that you have Node.js 6.0 or higher and NPM 2.0 or higher installed by running the following commands:
node --version npm --version
2. Install the Elm Platform
The videos in this course were filmed using Elm 0.18. The differences between Elm 0.18 and 0.19 are fairly inconsequential in terms of the topics taught in this course. Most of what's new in Elm 0.19 revolves around housekeeping (e.g. moving modules) and internal compiler performance.
We recommend going through the course using Elm 0.18 just so everything matches up with the videos. Then after you're comfortable with Elm, you can upgrade the final application to Elm 0.19 if you'd like.
The Elm Platform is a bundle of all the core development tools you'll use to create Elm applications. Since you already have NPM installed, you can install the Elm Platform as an NPM package.
To install a compatible version of Elm, run:
npm install -g firstname.lastname@example.org
npminstalls packages to the local (current) directory. Using the
-gflag installs the
elmpackage globally so the command-line tools can be accessed from any directory on your system.
Once you've installed the Elm Platform, confirm that you have Elm 0.18 installed by running:
3. Download the Course Code Bundle
Before starting the course, make sure to
download the course code bundle.
After unzipping it you'll end up with a directory called
pragstudio-elm-code. Inside that directory you'll find the following subdirectories:
starter-project: a skeleton Elm project that includes an HTML file and a CSS file, so you can focus on writing Elm code.
video-code: snapshots of the application code as it stands after each course video, so you can review and compare to your own code
server: contains a server.js file that uses json-server as a simple REST API and a db.json file that json-server uses as its database.
finished-project: the final version of the application we build throughout this course (no peeking yet!)
finished-project-elm-0.19: the final version of the application upgraded from Elm 0.18 to 0.19
Once you've downloaded the code bundle, from a command-line session change into the
Then open that directory in your favorite editor.
We'll take it from here in the videos!
4. Install Required Libraries for the API Server
We'll use the simple json-server as the backend REST API server.
To install it, first change into the server directory:
Then install json-server and the dependent libraries locally in that server directory using
5. Install Optional Tools
We'll use elm-live to recompile our Elm files whenever they change and automatically reload our application in the browser. To install it, run:
npm install -g email@example.com
Note: Tab characters are syntax errors in Elm, so make sure your editor is configured to convert tabs to spaces!
Finally, we highly recommend installing elm-format. It automatically formats Elm code to the community standards. In the videos, we configured the Sublime Text editor to automatically run
elm-formatevery time we save an Elm file. Check out the
elm-formatdocumentation for instructions on how to enable the
format-on-saveoption. You want the version that's compatible with Elm 0.18.
When you hit the big green button below, you'll go directly to the next video in the course where we'll start building our Elm application. Feel free to code along with us in the video if you like, and don't be shy about pausing or rewinding to watch something again. After each video you'll find any relevant notes in the aptly-named "Notes" section.
Let's get started!