Build a LiveView Product Page
Learn how to set up LiveView.
We'll cover the following...
In this example, we’re going to see just how easy it is to get set up with LiveView. We will revisit the product page we built back in the section Build a Real-Time Sneaker Store. This product page lists out all of the different shoes, shows whether they’re released or not, and shows the availability of each size. This page updates in real-time when a shoe is released or when a size’s availability changes. It looks like this:
We already have a working version of this page powered by Channels and JavaScript code. We’re going to leave much of the Elixir code unchanged because it’s already present and working, but our LiveView implementation will have only a few lines of JavaScript in it!
This example is intentionally kept simple for the sake of brevity. There are mechanisms that LiveView provides that allow us to implement a slightly more efficient version of this example. These are mentioned at the end of this lesson but won’t be used in this example.
Let’s start by setting up the project.
Setting up your project
To set up LiveView, we’ll need to include the Mix dependency and update our front-end package file. Let’s start with the mix.exs file, and add the phoenix_live_view library into the deps function. We have grouped it with the other Phoenix packages.
# sneakers_23_live_view/mix.exs{:phoenix_ecto, "~> 4.0"},{:phoenix_live_view, "~> 0.15.1"},
It will probably be okay for us to use a newer version of LiveView because we will only use basic features. LiveView is still a rapidly changing library, so the latest version may be different for us.
Run mix deps.get to fetch the LiveView code. Next, we need to adjust our assets/package.json file. Point the phoenix_live_view dependency to the local ...