2018-10-18に更新

Phoenix1.3でex_adminを使う

Phoenixではex_adminという管理画面作成パッケージを導入することで簡単に管理画面が作成できる。

smpallen99/ex_admin: ExAdmin is an auto administration package for Elixir and the Phoenix Framework

しかし依存関係やフォルダ構成の違いの問題で最新のPhoenixではうまく動かない。ただ、よくよく調べてみると下記のphx-1.3ブランチを使えばできるっぽいので試してみた。

https://github.com/smpallen99/ex_admin/tree/phx-1.3(https://github.com/smpallen99/ex_admin/tree/phx-1.3)

導入方法

phx-1.3ブランチを指定して入れる。ビルドに失敗するのでgettextのバージョンも上げる。

mix.exs

defp deps do
  ...
  {:gettext, "~> 0.13.1"},
  {:ex_admin, github: "smpallen99/ex_admin", branch: "phx-1.3"},
  ...
end

configを追加。

config.exs

config :ex_admin,
  repo: MyProject.Repo,
  module: MyProjectWeb,
  modules: [
    MyProject.ExAdmin.Dashboard,
  ]

後は通常通りのインストールと同じ。

brunch-configの修正

そのままだとex_adminのcssとかが混ざってしまう。brunch-config.jsに修正方法が追記されているので、そのとおりに修正。

またその際、node_modules内のcssをインポートしている場合はcssの設定だけ下記に修正が必要。

        "css/app.css": /^(css|node_modules)/,

モデル追加

mix admin.gen.resource User

これは特に変わりはない。ただ、1.3だとphx.gen.htmlを使っている場合、context module以下にモデルを入れていると思う。例えばAccounts.User等。

なので生成されたadmin/user.ex内のモデルの指定だけ修正しておく。

admin/user.ex(before)

  register_resource MyProject.User do

admin/user.ex(after)

  register_resource MyProject.Accounts.User do

これで動作した。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント