LiveView Basics

When I first started learning LiveView, the idea of creating a LiveView page as a mostly backend Elixir engineer felt very intimidating. It wasn't until I started building some small side projects that it really clicked how little code it takes for a LiveView. As you'll see, one route pointing to a module with a render/1 function is all you need.

These basics will be enough to get you up and running creating your first LiveViews while giving you a foundation to build more complex ones. If you want to learn LiveView more in-depth, Pragmatic Studios has two excellent courses, LiveView and Full-Stack Phoenix . If books are more your thing, Programming Phoenix LiveView is also excellent.

Versions Used

Elixir: 1.18.4-otp-28
Erlang: 28.0.2
Phoenix: 1.8.0
LiveView: 1.1.3

LiveView Documentation

GitHub: https://github.com/phoenixframework/phoenix_live_view

Hex: https://hexdocs.pm/phoenix_live_view/welcome.html

Adding LiveView to a Phoenix App

Since Phoenix v1.6, new Phoenix apps are generated with the LiveView dependency included. With Elixir and Erlang installed, you can install the latest version of Phoenix with:

mix archive.install hex phx_new

If you want to install a particular Phoenix version, like the one used here, you can do so passing in a version:

mix archive.install hex phx_new 1.8.0

If your current Phoenix app doesn't already have LiveView, this guide will walk you through adding it to your project: https://github.com/phoenixframework/phoenix_live_view/blob/v0.20.1/guides/introduction/installation.md#existing-projects

Phoenix App Generator

As noted above, a newly generated Phoenix app comes with LiveView. This command would generate a Phoenix app with LiveView:

mix phx.new app_name

Reference: https://hexdocs.pm/phoenix/Mix.Tasks.Phx.New.html

LiveView Generator

This command would generate a Context, Schema, Migration, and all necessary LiveViews:

mix phx.gen.live Animals Cat cats name:string color:string owner:string

Reference: https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Live.html

Setup

The code examples use LiveViewBasics as the app name. To generate a similarly named app:

mix phx.new live_view_basics

To generate the Schema and Context that will be used in the examples (we use phx.gen.context as we don't want any generated LiveViews since we will create them ourselves):

mix phx.gen.context Animals Cat cats name:string color:string owner:string category:string
mix ecto.migrate

Reference: https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Context.html

To add the cats that will be used in the examples, put this in your seeds.exs:

alias LiveViewBasics.Repo
alias LiveViewBasics.Animals.Cat

cats = [
  %Cat{name: "Mr. Business", color: "Gray", owner: "Gayle", category: "Fictional"},
  %Cat{name: "Garfield", color: "Orange", owner: "Jon", category: "Fictional"},
  %Cat{name: "Marley", color: "Black", owner: "Brian", category: "Real"},
  %Cat{name: "MJ", color: "Tortoiseshell", owner: "Brian", category: "Real"},
  %Cat{name: "Goose", color: "Orange", owner: "Wendy", category: "Fictional"}
]

Enum.each(cats, fn cat -> Repo.insert!(cat) end)

To run the seeds file and add the cats to the database:

mix run priv/repo/seeds.exs

Note

Each page is broken up into two sections. The top section is a preview of what the code will render. The bottom section contains the code used to render the preview.

Before Phoenix v1.8, the dynamic part of the app's layout, such as the menu, sidebar, and flash messages, were rendered by the app.html.heex layout by default. As of v1.8, it must be explicitly rendered by calling the Layouts.app component. You will see this in the LiveView examples where the code is wrapped in <Layouts.app flash={@flash}></Layouts.app.

Reference: https://hexdocs.pm/phoenix_live_view/live-layouts.html