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 didn't really click how basic it can be to spin up a LiveView until I made Wordle Word Checker and Bean Salad Generator. As you'll see, one route pointing to a module with a render/1 function is all you need for a LiveView.

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, I recommend the wonderful courses from Pragmatic Studios. Their LiveView and Full-Stack Phoenix courses are both excellent.

Versions Used

Elixir: 1.19.0-rc.0-otp-28
Erlang: 28.0.1
Phoenix: 1.8.0-rc.3
LiveView: 1.1.0-rc.1

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-rc.3

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 update the version of LiveView, we need to update a couple of things in our mix.exs file as per the quick update guide . Remember to run mix deps.get after adding the dependencies.

- {:phoenix_live_view, "~> 1.0.9"}
+ {:phoenix_live_view, "~> 1.1.0-rc.1"},
+ {:lazy_html, ">= 0.0.0", only: :test},

Also inside the mix.exs file, we need to prepend :phoenix_live_view to our list of compilers inside def project:

compilers: [:phoenix_live_view] ++ Mix.compilers(),

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: "Marley", color: "Black", owner: "Brian", category: "Real"},
  %Cat{name: "MJ", color: "Tortoiseshell", owner: "Brian", category: "Real"},
  %Cat{name: "Mr. Business", color: "Gray", owner: "Gayle", category: "Fictional"},
  %Cat{name: "Garfield", color: "Orange", owner: "Jon", category: "Fictional"},
  %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.

As of Phoenix v1.8, the dynamic part of the app's layout, such as the menu, sidebar, and flash messages, are explicitly rendered by calling the Layouts.app component. This was previously rendered by the app.html.heex layout configured as part of lib/my_app_web.ex.

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