Setup

Howdy, and welcome! 👋

Before we jump into coding, let's setup everything you need to run the Phoenix LiveView application. 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-liveview-2ed-starter-code. Inside that top-level directory you'll find the following subdirectories:

• live_view_studio is a Phoenix app with the LiveViews we'll build out in the videos. We'll create the first LiveView from scratch. Others have initial files already prepared as starting points so we can focus on learning something new in each module. So feel free to code along with us in this directory. This directory also contains supporting files for the exercises, to save you from creating everything from scratch.

• video-code has snapshots of the code as it stands at the end of every video. For example, the 07-search subdirectory has all the changes we made in the "Search" module, plus all the changes we made in previous videos. This is helpful if you're following along and want to compare your code to what you see in the video.

• exercise-solutions has snapshots of the code that include all the exercise solutions for the matching module. For example, the 07-search subdirectory has the full exercise solutions for the "Search" module. This is helpful if you want to check your work when doing the exercises.

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

2. Install Elixir

The source code is based on Elixir 1.14, 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, you'll be asked if you want to upgrade Hex to the latest version.

3. Install PostgreSQL

Phoenix configures applications to use a PostgreSQL database by default, and our Phoenix application follows suit. Version 9.4 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

4. Fire Up the Phoenix App

To start the Phoenix app and get ready for the next video...

1. First, change into the live_view_studio directory:

   cd live_view_studio

2. Then setup the application by running:

   mix setup

   This pulls down the Elixir package dependencies, compiles everything, builds static assets, and sets up the database. You may see some compilation warnings, but don't sweat it.

   If you see a database-related error, it's likely a PostgreSQL connection issue. Typically, installing PostgreSQL creates an "initial" database and starts the PostgreSQL server daemon running. However, depending on your operating system, you may need to start the server daemon manually. To do that, you may find the first steps or Archlinux wikis helpful. To see the PostgreSQL configuration that's being used, look at the top of the live_view_studio/config/dev.exs file for the database configuration details.

   If you're on Windows and you see an error related to a "cc" command not being found, then you'll need to install a C compiler.

3. Now you're ready to fire up the Phoenix server:

   mix phx.server

4. Then if you then browse to http://localhost:4000 you should see a list of the LiveView projects we'll build. They won't do anything interesting just yet. 😉

Editor

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

• Custom code snippets which you'll find in the vscode/snippets.json file of the code bundle. To install these custom snippets, select "Configure User Snippets" under "Code > Settings" (on Windows, select "User Snippets" under "File > Preferences"), and then select "elixir.json". Paste the contents of vscode/snippets.json into that file.

• Material Theme extension for the color theme.

• 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 opening your user settings in VS Code using the Command Palette (⇧⌘P) and searching for the Preferences: Open Settings (JSON) command.

• 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,
  

• 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.

OK, let's start coding! 🔥