Setup

Welcome!

Before we get started, let's set up your development environment so you can run the application.

1. Download the Code Bundle

Download the code bundle which contains all the source code shown in the videos, plus some bonus goodies!

After unzipping the downloaded file, you'll end up with a directory named pragstudio-unpacked-bingo-code. Inside that directory you'll find the following subdirectories:

  • apps_elm: the version of the application that uses Elm on the frontend. We use this version of the app in the videos for Modules 1-17.

  • apps_vue: the version of the application that uses Vue.js on the frontend. We switch to this version of the app starting in Module 18.

  • bonus: other versions of the app referenced in the notes, but not shown in the videos

Inside both the apps_elm and apps_vue directories, you'll find the following subdirectories:

  • bingo is an Elixir application that contains all the game-related code

  • bingo_hall is a Phoenix application that's the web interface to the bingo application

🤔 So, which version should you run—Elm or Vue.js? Initially, it doesn't matter. In Modules 1-11, we unpack just the Elixir and Phoenix apps which are the same regardless of which frontend you choose. For Modules 12-17 we run the Elm version of the app. And for Modules 18-20 we run the Vue.js version of the app. If you're only interested in the Vue.js frontend, you can safely skip the Elm modules. In other words, you can choose your own adventure starting after Module 11.

2. Install Elixir

The source code is based on Elixir 1.6, though any later version should also work.

To check which version you have installed, use

elixir --version

Up-to-date instructions for installing the latest version of Elixir on any operating system are available at http://elixir-lang.org/install.html.

Once you've installed Elixir, you also need to install the Hex package manager:

mix local.hex

If you already have Hex installed, this command will upgrade Hex to the latest version.

3. Install Phoenix

The videos in this course were filmed using Phoenix 1.3. The differences between Phoenix 1.3 and 1.4 are quite minimal in terms of the topics in this course.

Phoenix 1.3 is distributed as a Mix archive which you install using

mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez

If you'd like to upgrade the app, you'll find notes about Phoenix 1.4 in the relevant "Notes" sections throughout the course.

4. Install Node.js and NPM

Phoenix requires Node.js version 6.0 or later.

To check which versions you have installed, use

node --version
npm --version

Up-to-date instructions for installing the latest version of Node.js on any operating system are available at https://nodejs.org. 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

5. Install the Elm Platform

If you're planning to run the Elm version of the app, you'll need to install the Elm Platform.

Since you already have NPM installed, you can install the Elm Platform as an npm package. The example code included in this course is based on Elm 0.18. To install a compatible version of Elm, run:

npm install -g elm@0.18.0

You may see some warnings, but they're nothing to worry about.

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

6. Start the Phoenix App

To start the bingo_hall Phoenix app:

  1. First, change into the bingo_hall directory, install the Elixir package dependencies, and compile the app:

    cd bingo_hall
    
    mix deps.get
    
    mix compile

    You may see some compilation warnings, but it's nothing to worry about.

  2. Then change into the bingo_hall/assets directory and install the Node.js package dependencies:

    cd assets
    
    npm install

    If you're curious, depending on which version of the app you're running the package.json file in the assets directory lists either elm or vue as a dependency. So in addition to installing all the standard packages required by Phoenix, Elm or Vue.js are also installed.

  3. Next up, if you're running the Elm version of the app, change into the bingo_hall/assets/elm directory and install the Elm package dependencies:

    cd elm
    
    elm-package install -y
  4. As a quick sanity check, change back up to the bingo_hall/assets directory, and make sure everything builds:

    cd ..
    
    node node_modules/.bin/brunch build
  5. Now you're ready to start the Phoenix endpoint. Change to the top-level bingo_hall directory and fire it up:

    cd ..
    
    mix phx.server
  6. Now you can visit http://localhost:4000 from your browser and you should be able to play a game!

Up Next...

When you hit the big green button below, you'll go directly to the next video. Feel free to follow 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 start unpacking! 🚀