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

雑にローカルのIPアドレスを取得するエイリアス

ip aまたはifconfigからIPアドレスを抜き出す。

alias currentip='(if ip a 2>/dev/null 1>&2 ; then ip a|grep "inet "|awk "{print \$2}"|egrep -v "[01]/"|cut -d/ -f1; else ifconfig|grep "inet "|egrep -v "\.[01] netmask"|awk "{print \$2}"; fi)|tr -d \\r\\n'
Read more

ブラウザでログファイルをtail -fするブックマークレット

自動テスト中のログがブラウザ経由で参照できるけれど こまめにリロードして一番下までスクロールするのが面倒だったのでブックマークレットで自動化した。

Read more

git flowを使うときにmaster, develop以外の名前のブランチを使う

TL;DR

GitHub Flowではなく、Git Flowについて。 git flow initではなくgit configコマンドで設定してしまおう。という話

Read more