[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!