Setup

Welcome! 👋

Before we jump into coding, let's set up your development environment so you can run all the code and work the exercises.

1. Download the Code Bundle

The code bundle contains all the source code shown in the videos.

After unzipping the downloaded file, you'll end up with a directory named pragstudio-liveview-starter-code. Inside that directory you'll find a live_view_studio directory that contains a Phoenix application. That directory has a local Git repository with branches for each LiveView we build in the videos.

To get a lay of the land, change into the live_view_studio directory and list the current branches:

cd live_view_studio

git branch

You'll see two branches for each example, like so:

1-button-clicks-begin
1-button-clicks-end
2-dynamic-form-begin
2-dynamic-form-end
3-sales-dashboard-begin
3-sales-dashboard-end
4-search-begin
4-search-end
5-autocomplete-begin
5-autocomplete-end
...

The naming convention isn't too hard to figure out. 😉 The branches with begin are the starting points for each example. The branches with end are the corresponding example's final code.

For instance, we start the next video ("Button Clicks") in the 1-button-clicks-begin branch. Then at the end of that video we committed all the changes to the 1-button-clicks-end branch. The 2-dynamic-form-begin branch has all the code from the previous video plus any prepared files required to begin the second example ("Dynamic Form").

Organizing the code this way allows us to include all the examples in a single Phoenix app while not cluttering things up too much. Some of the more involved examples have supporting files such as a Phoenix context module, an Ecto schema, a database migration file, and so on. Rather than wading through all these files from the beginning, the relevant files are introduced when we switch into the corresponding begin branch.

Using branches this way also makes it easy for you to get a diff of all the changes for a specific example, like so:

git diff 4-search-begin 4-search-end

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.13, 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 Node.js

Why do you need Node if LiveView doesn't require any custom JavaScript? Well, Phoenix uses webpack to process static assets such as CSS, images, and (yes) JavaScript. Our application has all three. We provided the CSS and images, and LiveView provides a JavaScript library that is integrated into the Phoenix app.

So we need webpack, and it in turn uses the node package manager (npm) to install its dependencies, and npm requires Node. Whew! Anyway, this application requires Node.js version 14 or greater to compile and process static assets.

To check which version you have installed, use

node --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 the node package manager (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 using

brew install node

4. Install PostgreSQL

We start using a database in the 6th example ("Filtering"). 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 and already using the Homebrew package manager, you can install PostgreSQL using

brew install postgresql

5. 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 switch into the 1-button-clicks-begin branch:

   git checkout 1-button-clicks-begin

3. Next, set up the application:

   mix setup

   This pulls down the Elixir package dependencies, installs the standard Phoenix JavaScript assets, and sets up the database. You may see some compilation warnings, but don't sweat it.

   If you see an 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.

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

   mix phx.server

5. Then if you then browse to http://localhost:4000 you should see the standard Phoenix welcome page.

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 snippets.json file of the code bundle, along with instructions for how to use the snippets

• Material Theme extension for the color theme

• ElixirLS extension for Elixir support, with the following (optional) VS Code settings:

  "elixirLS.suggestSpecs": false,
  "elixirLS.dialyzerEnabled": true,
  "elixirLS.signatureAfterComplete": false,
  "elixirLS.fetchDeps": false,
  

• Elixir Templates Formatter extension for formatting/beautifying LiveView templates

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

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

Enough with the setup, let's start coding! 🔥