Setup

Welcome!

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

1. Download the Code Bundle

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:

video-code contains the version of the application as shown in the videos that uses Phoenix 1.3, Elm 0.18, and Vue 2.5.16.
updated-code contains an updated version of the application that uses Phoenix 1.5.9, Elm 0.19, and Vue 2.6.14.

Inside both the video-code and updated-code directories, you'll find the following subdirectories:

apps-elm contains 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 contains the version of the application that uses Vue.js on the frontend. We switch to this version of the app starting in Module 18.

And then 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? You'll want to work out of the updated-code directory as the code in video-code isn't compatible with the latest version of Elixir and OTP.

🤔 Should you run the Elm or Vue app? 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 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

Phoenix is distributed as a Mix archive which you install using

mix archive.install hex phx_new 1.5.9

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. Start the Phoenix App

To start the bingo_hall Phoenix app:

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.
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 are also installed.
As a quick sanity check, change back up to the bingo_hall/assets directory, and make sure everything builds:
```
cd ..

node node_modules/webpack/bin/webpack.js --mode development
```
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
```
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! 🚀

Go To Next Video →