Updating LiveView Spring 2020 ed

Due to the hard work of the Phoenix LiveView team, there has been a lot of work done. However, there have been some breaking changes.

For example did the LiveView component that I mounted in the router as live "/products", ProductListLive stop working properly. The layout wasn’t properly added. So, if you update from a version prior to 0.8.0 I will show you how to fix this.

I have also seen a lot of questions on this topic so I will write up my findings.

As of this writing, the it seems that the Phoenix 1.5 will come with new layouts.

As I can see, there is a root.html.leex, live.html.leex and app.html.leex. It seems the root.html.leex is where the html-shell lives.

However, since Phoenix 1.4.16, the root layout can also be used when mounting the LiveView component in the router.

STEP 1 - Update Phoenix

First I need to make sure I am on latest version of Phoenix. It needs to be 1.4.16 or above.

# mix.exs
[
  {:phoenix, "~> 1.4.16"},
]

And update the dependencies.

mix deps.get

STEP 2 - Update Router

After plug :fetch_live_flash specify the root layout.

# lib/tutorial_web/router.ex
pipeline :browser do
  ...
  plug :fetch_live_flash
  plug :put_root_layout, {TutorialWeb.LayoutView, :root}
  ...
end

STEP 3 - Update Layouts

Next step is to rename app.html.eex to root.html.leex. Also, in root.html.leex change

<%= render @view_module, @view_template, assigns %>

to:

<%= @inner_content %>

Then create a new file called app.html.leex with the content:

<%= render @view_module, @view_template, assigns %>

And now that I start the server, everything seems to work again