素のPhoenixからPhoenix LiveViewを使えるようにする変更

How to activate Phoenix LiveView

Summary of This article.

My tested environment uses Phoenix 1.4.10 and Phoenix LiveView 0.3.1, Elixir 1.9.2, Node.js v10.17.0, npm 6.12.1.

For Server

• update deps in mix.exs
  • add {:phoenix_live_view, "~> 0.3.1"},
  • then mix deps.get
• add signing_salt in config/config.exs
  • generate salt by mix phx.gen.secret 32
  • add live_view: [signing_salt: "paste here above salt"] in config :appname, AppnameWeb.Endpoint
• add imports in lib/appname_web.ex
  • add import Phoenix.LiveView.Controller into quote in controller definition
  • add import Phoenix.LiveView.Router into quote in router definition
  • add import Phoenix.LiveView, only: [live_render: 2, live_render: 3, live_link: 1, live_link: 2] into quote in view definition
• add socket path into lib/appname_web/endpoint.ex
  • add socket "/live", Phoenix.LiveView.Socket next to use Phoenix.Endpoint, ...
  • this path (/live) will be used in js.

For client

• update dependencies in assets/package.json
  • add "phoenix_live_view": "file:../deps/phoenix_live_view", in dependencies
  • then npm install --prefix assets or cd assets && npm install
• paste this into assets/js/app.js
  • /live is defined in lib/appname_web/endpoint.ex

import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

let liveSocket = new LiveSocket("/live", Socket)
liveSocket.connect()

• paste some CSS into assets/css/app.css
  • @import "../../deps/phoenix_live_view/assets/css/live_view.css";