Installing PhoenixLiveView v0.11.1

Phoenix Forum Questions / Help
,
1

I’m installing the Phoenix LiveView and I want help with the part Live Layouts.
The app on github
I create the 3 files on templates/layout:

* root.html.eex
* app.html.eex
* live.html.leex

I add on my routes:

pipeline :browser do
   ...
 plug :put_root_layout, {MyAppWeb.LayoutView, :root}
end

I notice on the Doc’s they forget the MyAppWeb. on

plug :put_root_layout, {MyApp.LayoutView, :root}

then on these 3 files I created on the layout.
I put on the:
root.html.eex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title><%= assigns[:page_title] || "MyApp · Phoenix Framework" %></title>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <%= csrf_meta_tag() %>    
    
  </head>
  <body>
    <header>
      <section class="container">
        <nav role="navigation">
          <ul>
            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
          </ul>
        </nav>
        <a href="https://phoenixframework.org/" class="phx-logo">
          <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
        </a>
      </section>
    </header>
    
    <%= @inner_content %>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
    
  </body>
</html>

app.html.eex 

 <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>

live.html.leex

<p><%= live_flash(@flash, :notice) %></p>
<p><%= live_flash(@flash, :error) %></p>
<%= @inner_content %>

And where I put this?

use Phoenix.LiveView, layout: {AppWeb.LayoutView, "live.html"}

I need to create a new views for these files?
In my views I have just these:

lib/my_app_web/views
├── error_helpers.ex
├── error_view.ex
├── layout_view.ex
└── page_view.ex
2

This goes either in your LiveView file (i.e. AppWeb.TemperatureLive), or

In app_web.ex:

 def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {AppWeb.LayoutView, "live.html"}
    end
  end

with use SnackWeb, :live_view in the LiveView file.

They don’t need new views - it should work.

One thing I’ve found helps is creating a new phoenix app from master, and use mix phx.new with the --live flag, to see where things are.

1 Like
3

I added on the final of my lib/my_app_web.exis:

defmodule MyAppWeb do
  @moduledoc """
  The entrypoint for defining your web interface, such
  as controllers, views, channels and so on.

  This can be used in your application as:

      use MyAppWeb, :controller
      use MyAppWeb, :view

  The definitions below will be executed for every view,
  controller, etc, so keep them short and clean, focused
  on imports, uses and aliases.

  Do NOT define functions inside the quoted expressions
  below. Instead, define any helper function in modules
  and import those modules here.
  """

  def controller do
    quote do
      use Phoenix.Controller, namespace: MyAppWeb

      import Plug.Conn
      import MyAppWeb.Gettext
      alias MyAppWeb.Router.Helpers, as: Routes
      import Phoenix.LiveView.Controller
    end
  end

  def view do
    quote do
      use Phoenix.View,
        root: "lib/my_app_web/templates",
        namespace: MyAppWeb

      # Import convenience functions from controllers
      import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]

      # Use all HTML functionality (forms, tags, etc)
      use Phoenix.HTML

      import MyAppWeb.ErrorHelpers
      import MyAppWeb.Gettext
      alias MyAppWeb.Router.Helpers, as: Routes
      import Phoenix.LiveView.Helpers
    end
  end

  def router do
    quote do
      use Phoenix.Router
      import Plug.Conn
      import Phoenix.Controller
      import Phoenix.LiveView.Router
    end
  end

  def channel do
    quote do
      use Phoenix.Channel
      import MyAppWeb.Gettext
    end
  end

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.LayoutView, "live.html"}
    end
  end

  @doc """
  When used, dispatch to the appropriate controller/view/etc.
  """
  defmacro __using__(which) when is_atom(which) do
    apply(__MODULE__, which, [])
  end
end

is that correct?

4

This will do everything for me? I will try. Thank’s!

5

I tried this flag and not work’s.

mix phx.new test --live
** (Mix) Invalid option: --live
6

The --live flag is only available on the master version of phoenix on github, which is not an official Phoenix release, but contains the most bleeding edge features.

If you’re comfortable with that, try:

$ git clone https://github.com/phoenixframework/phoenix.git
$ cd phoenix/installer
$ mix archive.install

This will allow you to use phoenix master when using mix phx.new. Then, in a new directory try

mix phx.new app_test --live

1 Like
7

Nice it was I expecting.