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:
bingois an Elixir application that contains all the game-related code
bingo_hallis 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
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:
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
The example code included in this course is based on Elm 0.18. To install a compatible version of Elm, run:
npm install -g firstname.lastname@example.org
You may see some warnings, but they're nothing to worry about.
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:
6. Start the Phoenix App
To start the
bingo_hall Phoenix app:
First, change into the
bingo_halldirectory, 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.js are also installed.
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
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
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!
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! 🚀