Setup

Welcome!

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 npm packages.

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 elm@0.18.0
```
By default, npm installs packages to the local (current) directory. Using the -g flag installs the elm package 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:
```
elm-make --version
```
For reference during the course, go ahead and bookmark the documentation pages for the Elm Core Libraries and the html package.

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 starter-project/bingo directory:

cd /path/to/pragstudio-elm-code/starter-project/bingo

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:
```
cd /path/to/pragstudio-elm-code/server
```
Then install json-server and the dependent libraries locally in that server directory using
```
npm install
```

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 elm-live@2.6.1
```
We also recommend configuring your editor of choice to use an Elm syntax highlighting plugin. We use Sublime Text in the videos.

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-format every time we save an Elm file. Check out the elm-format documentation for instructions on how to enable the format-on-save option. You want the version that's compatible with Elm 0.18.

Up Next...

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!

Go To Next Video →