@peccul is peccu

(love peccu '(emacs lisp cat outdoor bicycle mac linux coffee))

素の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)
  • paste some CSS into assets/css/app.css
    • @import "../../deps/phoenix_live_view/assets/css/live_view.css";