Setup

Howdy, and welcome! 👋

Before we jump into coding, let's set up everything you need to build Phoenix applications. That way you can follow along with the videos and do the exercises, if you like.

1. Download the Code Bundle

The code bundle contains all the source code shown in the videos, the solutions to the exercises, and other goodies.

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

• raffley is the Phoenix application we'll build out in the videos. The code is organized into directories matching the course modules. For example, the 02-create-app directory contains a snapshot of how the application code looks at the end of the "Create the App" video. This is helpful if you're following along and want to compare your code to what you see in the video.

• heads_up is the Phoenix application you'll build in the exercises. It's similar enough to the raffley application as to not be too challenging, but different enough to still tickle your brain and challenge you to apply what you've learned. The code is organized into directories matching the course modules. For example, after completing the exercise for the "Plugs and Pipelines" module, your code should roughly match the code in the 03-plugs-pipelines directory. This is helpful if you want to check your work when doing the exercises.

• prepared-files contains files we've prepared for you to copy into the applications as needed later on in the course to save tedious typing.

• vscode contains our VS Code settings, keybindings, and code snippets.

Now that you know your way around the code bundle, let's get things up and running!

2. Install Elixir

Phoenix is a web application framework written in Elixir, and we'll write our application code in Elixir as well. So the first thing you need to do is install Elixir version 1.15 or later.

To check which version you have installed, use

elixir -v

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—Elixir's package manager:

mix local.hex

If you already have Hex installed, you'll be asked if you want to upgrade Hex to the latest version.

Finally, with Elixir and Hex installed, you can install the Phoenix application generator using:

mix archive.install hex phx_new

Then check that version 1.7.14 or greater is installed:

mix phx.new -v

3. Install PostgreSQL

Phoenix applications are configured to use a PostgreSQL database by default. Version 9.5 or greater is required.

To check which version you have installed, use

psql --version

Up-to-date binary packages for a variety of operatings system are available at https://www.postgresql.org/download/.

For example, if you're on a Mac you can use Postgres.app. Or if you're already using the Homebrew package manager, you can install PostgreSQL using

brew install postgresql

Phoenix assumes that your PostgreSQL installation has a user named postgres with a password of postgres.

If you prefer to use Docker, it's easy to spin up a PostgreSQL container:

docker pull postgres

docker run -d -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres -p 5432:5432 --name my_postgres_container postgres

Editor

In the videos we use Visual Studio Code along with the following extensions and snippets:

• ElixirLS extension for Elixir support and Phoenix Framework extension for syntax highlighting of HEEx templates, with the following VS Code settings:

  "elixirLS.suggestSpecs": false,
  "elixirLS.dialyzerEnabled": true,
  "elixirLS.signatureAfterComplete": false,
  "elixirLS.fetchDeps": false,
  
  "files.associations": {
    "*.heex": "phoenix-heex"
  },
  
  "[elixir]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "JakeBecker.elixir-ls"
  },
  
  "[phoenix-heex]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "JakeBecker.elixir-ls"
  },
  

  You can add these settings by using the Preferences: Open Settings (JSON) command to open your user settings.

• Emmet abbreviation expansions enabled for Phoenix and LiveView template file types in the VS Code settings:

  "emmet.includeLanguages": {
    "elixir": "html",
    "phoenix-heex": "html"
  },
  "emmet.triggerExpansionOnTab": true,
  

• Elixir snippets extension for Elixir code snippets.

• Custom code snippets that you'll find in the vscode/snippets directory of the code bundle. See the README in that directory for installation steps.

• Simple Ruby ERB extension for toggling <%= %> EEx tags using the custom keybindings you'll find in the vscode/keybindings.json file of the code bundle. To add these keybindings, use the Preferences: Open Keyboard Shortcuts (JSON) command and paste the contents of keybindings.json into that file.

• Material Theme extension for the color theme.

OK, let's start coding! 🔥