romenigld

Installing PhoenixLiveView v0.11.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

6 comments

/phoenix #phoenix-14 #liveview

0 1558 6

2020-04-14 01:05:46 UTC

Marked As Solved

jamilabreu

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.

Post #1

Also Liked

jamilabreu

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

Post #5