Simple Phoenix LiveView App: Upgrade LiveView to v0.12.1

This is episode #13 of a Phoenix LiveView series.

This time we're upgrading LiveView from version 0.8.1 to 0.12.1, and getting both the main app and the throwaway /foo route working again.

Upgrading libraries

We'll start by updating our mix.exs file with the following two changes to our deps:

defp deps do
  [
    {:phoenix_live_view, "~> 0.12.1"}
  ]
end

Fix errors

After upgrading our dependencies, we can start up the server, but all LiveView functionality is broken and styles are missing! That's because app.html.eex now needs to be refactored into three files—root.html.eex which all templates will use, app.html.eex which traditional templates will use and live.html.eex which will be used by live templates.

The new layout templates

Begin by copying all of app.html.eex into a new file in the same directory called root.html.eex. Then in root.html.eex, replace the <main> tag with:

<%= @inner_content %>

Next delete everything except the main tag from app.html.eex, leaving only:

<main role="main" class="container">
  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
  <%= render @view_module, @view_template, assigns %>
</main>

Finally copy this same code into live.html.leex, updating the <%= %> tags as follows:

<main role="main" class="container">
  <p class="alert alert-info" role="alert"><%= live_flash(@flash, :notice) %></p>
  <p class="alert alert-danger" role="alert"><%= live_flash(@flash, :error) %></p>
  <%= @inner_content %>
</main>

Note: in the video, I named this as a eex template and used a render instead of an @inner_content. It still worked, but the above is the recommended syntax.

In order to use the new root layout, we'll have to update the router:

pipe_through :browser
live "/users", UserLive.Index, layout: {ReactorWeb.LayoutView, :root}
live "/users/new", UserLive.New, layout: {ReactorWeb.LayoutView, :root}
live "/users/:id", UserLive.Show, layout: {ReactorWeb.LayoutView, :root}
live "/users/:id/edit", UserLive.Edit, layout: {ReactorWeb.LayoutView, :root}
# ...
live "/foo", FooLive, layout: {ReactorWeb.LayoutView, :root

Update the error_tag helper (optional)

In reactor_web/views/error_helpers.ex, rename the function "field_id" "input_id" to eliminate the deprecation warning.

  def error_tag(form, field) do
    Enum.map(Keyword.get_values(form.errors, field), fn error ->
      content_tag(:span, translate_error(error),
        class: "help-block",
        data: [phx_error_for: input_id(form, field)]
      )
    end)
  end

Fix the broken stylesheet link

Styling will now show up in the app but the LiveView functionality still won't work, due to a stylesheet import, of all things!

The live_view.css file we were including at the top of app.scss is now missing from Phoenix LiveView. It was handing the very thin blue bar at the top of the page that showed loading progress. We could just delete the dep, or in order to maintain the same functionality, we can install nprogress as follows:

yarn add -D assets nprogress

Then import it in app.scss:

@import "../node_modules/nprogress/nprogress.css"

Now all is working again!

(Source code available for premium members)