Beginner Help wanted with live.heex and LiveView

Phoenix Forum Questions / Help
,
1

Hello,

Little beginner post here, but I really can’t completely understand the usage of live.html.heex. I will start with what I want to achievе: I want to connect a LiveView socket to my root.html.heex. As I understand from the docs, for this reason live.html.heex is there.

To use the live layout, update your LiveView to pass the :layout option to use Phoenix.LiveView

it might seem obvious to you, but i really can’t figure it out where to update that LiveView, the router or something else?

For instance, if I create a page/index.html.heex I can connect it to its LiveView in the router:

live "/index", IndexLive

then, in IndexLive

defmodule MyAppWeb.IndexLive do
  use MyAppWeb, :live_view

  def render(assigns) do
   render PageView (or smth), "index.html", assigns
  end


  def mount(params, session, socket) do
(...)

However, this is not the case with live.html.heex.
I want to learn it, don’t what it all ready. Can you recommend me some links to read for this topic, because I really can’t find more in-depth explanations. (there surely is, i just cant find them)

forgot to mention the version used: phoenix 1.6.6

2

It is worthwhile having a play with the generators to see what code they generate.

IIRC, live.html.heex was just a optional template that wrapped the liveview. That is, root.html.heex was at the top, then live.html.heex inside of it, then your page inside of that.

This is not the case anymore as live.html.heex and app.html.heex were merged in later versions.

The code lives in MyAppWeb these days, but looks like it might be in MyAppWeb.LayoutView in older versions.

3

Have a look in your lib/my_app_web.ex at the def live_view line. It seems you are using an older version of Phoenix as live.html.heex is no longer generated in favour of app.html.heex but it’s the still the same idea. Look in that file for this:

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.Layouts, "live.html"} # These days it would just be `:live` as the the `.html.heex` is inferred

      unquote(html_helpers())
    end
  end

This is what gets called when you do use MyAppWeb, :live_view and is using live.html.heex for the layout. The layout itself is not a LiveView, just the layout template though you can set assigns for the layout in any LiveView that uses it.

If you wanted to have different layouts for different LiveViews you could create another layout in the layouts/ directory and then use it like so:

defmodule AppAppWeb.SomethingLive do
  use LiveView, layout: {MyAppWeb.Layouts, "admin.html"}
end

Of course it would be better to define a new helper function in the MyAppWeb module as the above won’t include the html_helpers/0:

  def admin_live do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.Layouts, "admin.html"}

      unquote(html_helpers())
    end
  end

then:

defmodule MyAppWeb.Admin.HomeLive do
  use MyAppWeb, :admin_live
end

Really the best resource for learning this stuff is the official guides. Make sure you look at both Phoenix and LiveView docs and be sure to check out the “GUIDES” tab in each (The MODULES section is more for reference).

2 Likes