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の開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント