Following steps for live view from phoenix docs, trying to build a generator task.
Website: hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html
If you get stuck check chris mccords demo implementation: https://github.com/chrismccord/phoenix_live_view_example/
## step 0
## mix.exs
defp deps do
[
...,
{:phoenix_live_view, github: "phoenixframework/phoenix_live_view"}
]
## step 2
vi lib/app_web_web/endpoint.ex
+ @session_options [
+ store: :cookie,
+ key: "_app_web_key",
+ signing_salt: "kwdfu/1u"
+ ]
+ socket "/live", Phoenix.LiveView.Socket,
+ websocket: [connect_info: [session: @session_options]]
- plug Plug.Session,
- store: :cookie,
- key: "_app_web_key",
- signing_salt: "kwdfu/1u"
-
+ plug Plug.Session, @session_options
## step 3
## generate a live view signing salt, different from phoenix signing salt.
mix phx.gen.secret 32
## add live_view: [signing_salt: ...] to ... config/config.exs
config :app_web, AppWebWeb.Endpoint,
live_view: [signing_salt: "sM/h9HbXVlCWtQ2B5f88DYjDtfO4630C" ],
## step 3
## assets/js/app.js
import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"
let liveSocket = new LiveSocket("/live", Socket)
liveSocket.connect()
## step 4
## assets/package.json
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view"
## this command step may need to be added in every html eex related to the live view.
## step 5
## You should define the CSRF meta tag inside the in <head> in your layout:
## <%= csrf_meta_tag() %>
## lib/app_web_web/templates/layout/app.html.eex
<head>
<%= csrf_meta_tag() %>
</head>
## step 6 - related to (step 5)
## Then in your app.js:
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", {params: {_csrf_token: csrfToken}});Hookup a router based live view using 'live'.
1) lib/app_web_web/router.ex:
import Phoenix.LiveView.Router
scope "/", AppWebWeb do
...
live "/thermostat", ThermostatLive
Hookup an inline template live view using live_render.
Hookup a controller live view using live_render