LiveView installation

app.css

@import "../../deps/phoenix_live_view/assets/css/live_view.css";

config.exs

# Configures the endpoint
config :phoenix_observer, PhoenixObserverWeb.Endpoint,
  url: [host: "localhost"],
  secret_key_base: "HZeXYAfTEvY59ZdUBBI7yRTqBXZITAAjv6pYMeRg0art4EQmVYWhPeOuijMF9r4y",
  render_errors: [view: PhoenixObserverWeb.ErrorView, accepts: ~w(html json)],
  pubsub: [name: PhoenixObserver.PubSub, adapter: Phoenix.PubSub.PG2],
  live_view: [
     signing_salt: "JT9vHYpcubGCuh+83mpKBQrH9NT9nZyb"
   ]

dev.exs

config :phoenix_observer, PhoenixObserverWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/phoenix_observer_web/{live,views}/.*(ex)$",
      ~r"lib/phoenix_observer_web/templates/.*(eex)$",
      ~r{lib/phoenix_observer/live/.*(ex)$}
    ]
  ]

endpoint.ex

socket "/live", Phoenix.LiveView.Socket

mix.exs

{:plug_cowboy, "~> 2.0"},
{:phoenix_live_view, github: "phoenixframework/phoenix_live_view"},
{:recon, "~> 2.5}

package.json

  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  }

phoenix_observer_web.ex

defmodule PhoenixObserverWeb do
  def controller do
    quote do
      
      import Phoenix.LiveView.Controller, only: [live_render: 3]
      alias PhoenixObserverWeb.Router.Helpers, as: Routes
    end
  end

  def view do
    quote do
      
      import Phoenix.LiveView, only: [live_render: 2, live_render: 3, live_link: 1, live_link: 2]

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

  def router do
    quote do
      import Phoenix.LiveView.Router
    end
  end
end

router.ex

pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug Phoenix.LiveView.Flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end