[elixir! #0016] 在 phoenix 項目裏配置 elm

新建 phoenix 項目

$ mix phoenix.new elm_base
$ cd elm_base
$ mix ecto.create

添加 elm-brunch

$ npm install --save-dev elm-brunch

打開 brunch-config.js 文件

往 paths/watched 添加 "web/elm」

往 plugins 添加:

elmBrunch: {
elmFolder: "web/elm",
mainModules: ["App.elm"],
outputFolder: "../static/vendor"
},

在命令行輸入

mkdir web/elm && touch web/elm/App.elm
cd web/elm
elm package install -y

將 web/templates/page/index.html.eex 文件的內容改成

<div id="elm-container"></div>

修改 web/templates/layout/app.html.eex 文件中的 container, 刪除默認的樣式

<div class="container">
  <main role="main">
    <%= render @view_module, @view_template, assigns %>
  </main>
</div> <!-- /container -->

在 web/static/js/app.js 文件末尾添加

const elmDiv = document.querySelector("#elm-container");
const elmApp = Elm.App.embed(elmDiv);

啓動 Phoenix 服務器

$ iex -S mix phoenix.server

編輯 elm 文件 web/elm/App.elm

module App exposing (..)

import Html exposing (text)

main =
text "Hello from Elm!"

看看瀏覽器裏的效果吧! Happy coding phx-elm!