Server side Elm with Phoenix

In my last post @mjackson and I got server side rendering of React setup. After that I was wondering if I could do something similar with Elm. I've played with Elm but not much so for this exercise I just grabbed the Todo app

Before we proceed

I'm going to use a very similar setup to the React server side rendering. One thing to note is that I found a small bug with min-document. At the time of writing there is a bug where it doesn't handle boolean html attributes correctly. I've added a PR to get this sorted, but for now we'll have to overwrite that dependency.

This uses the same method as the React STDIO method. We run a collection of IO servers that take a JSON blob and spit out JSON back to us with the rendered HTML.

You'll need to install Elm. I use brew

brew install elm

See the demo app

If you want to just see the demo application you can find it at hassox/phoenix_elm.

Server code

Generate a new application and follow getting webpack in place at http://matthewlehner.net/using-webpack-with-phoenix-and-elixir/. We're going to use it to generate our app.js bundle, and also our server bundle.

To generate our application bundle we'll use a pretty standard setup for Elm. Here's the webpack.config.js

// setup from http://matthewlehner.net/using-webpack-with-phoenix-and-elixir/

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: ["./web/static/js/app.js", "./web/static/css/app.css"],
  output: {
    path: "./priv/static/",
    filename: "js/app.js"
  },
  module: {
    noParse: /\.elm$/,
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader: 'elm-webpack'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("css")
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      },
    ]
  },
  resolve: {
    alias: {
      phoenix_html:
        __dirname + "/deps/phoenix_html/web/static/js/phoenix_html.js",
      phoenix:
        __dirname + "./deps/phoenix/web/static/js/phoenix.js"
    }
  },
  plugins: [
    new ExtractTextPlugin("css/app.css"),
    new CopyWebpackPlugin([{ from: "./web/static/assets" }])
  ],
  devServer: {
    inline: true,
    stats: 'errors-only'
  }
};

We've included an Elm Loader. Just for reference here's my package.json file:

{
  "repository": {},
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "copy-webpack-plugin": "^0.3.3",
    "css-loader": "^0.23.1",
    "elm-stdio": "^1.0.1",
    "elm-webpack-loader": "^1.1.1",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "min-document": "hassox/min-document",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "virtual-dom": "^2.1.1",
    "webpack": "^1.12.9"
  },
  "scripts": {
    "compile": "webpack -p"
  }
}

I mostly copied the react-stdio js module and tweaked it for Elm.

Ok. So this should be working. Lets get the Todo Elm code and put it in web/static/elm. Grab it from web/static/elm/Todo.elm. You'll also need to replace the web/static/css/app.css.

Note I had to tweak the css a little to remove the background image. Something isn't quite right in the webpack config.

At this point we need to make sure we have our elm dependencies installed.

elm-package install evancz/elm-html

Ok, so now we have our Elm file. Lets make it work. In you web/static/js/app.js file render out your Elm application.

import "phoenix_html"
import Elm from '../elm/Todo.elm'
Elm.embed(Elm.Todo, document.getElementById('elm-main'), {getStorage: null});

And lets tweak the layout web/templates/layout/app.html.eex

  <body>
    <div id='elm-main'></div>
    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
  </body>

If you reload your page you should be see the application. Ok real progress. Now lets get our server bundle ready to communicate with the elm-stdio process.

We'll add another webpack config to build our server bundle. It looks like:

module.exports = {
  entry: "./web/static/js/server_render.js",
  output: {
    path: "./priv/server",
    filename: "js/main.js",
    library: "myComponent",
    libraryTarget: "commonjs2"
  },
  module: {
    noParse: /\.elm$/,
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader: 'elm-webpack'
      },
    ]
  },
  resolve: {
    alias: {
      phoenix_html:
        __dirname + "/deps/phoenix_html/web/static/js/phoenix_html.js",
      phoenix:
        __dirname + "./deps/phoenix/web/static/js/phoenix.js"
    }
  }
};

Note that we're telling it to output a commonjs2 library component! (That's important).

Add a watcher in your config/dev.exs to pick up changes. According to our webpack server config we're looking for a file at web/static/js/server_render.js so lets make that.

export default require('../elm/Todo.elm');

That's it. That will export Elm for us with the Todo app.

Add a watcher to pick up the changes:

  watchers: [
    {"node", ["node_modules/webpack/bin/webpack.js", "--watch-stdin", "--progress", "--colors"]},
    {"node", ["node_modules/webpack/bin/webpack.js", "--watch-stdin", "--progress", "--colors", "--config", "webpack.server.config.js"]},
  ]

If you restart your server now you should see two bundles built. You should see a file in priv/server/js/main.js

Phew. Almost there.

Start your IO servers

Lets add the IO servers now.

Install std_json_io into your Phoenix application.

mix.exs

def deps do
  [#snip
   {:std_json_io, "~> 0.1.0"},
  ]
end

def applications do
  [applications: [...., :std_json_io]]
end

Create the supervisor lib/phoenix_elm/elm_io.ex

defmodule PhoenixElm.ElmIo do
  use StdJsonIo, otp_app: :phoenix_elm, script: "elm-stdio"
end

And add it to your supervisor tree in your app file lib/phoenix_elm.ex

def start(_type, _args) do
  #snip

  children = [
    #snip
    supervisor(PhoenixElm.ElmIo, []),
  ]
  opts = [strategy: :one_for_one, name: PhoenixElm.Supervisor]
  Supervisor.start_link(children, opts)
end

One more thing, we'll watch the generated server bundle for changes in dev so it reloads. config/dev.exs

config :phoenix_elm, PhoenixElm.ElmIo,
  watch_files: [Path.join(__DIR__, "../priv/server/js/main.js") |> Path.expand]

Ok nearly done. We need to now make our call. We'll just use the PageController. Update the routes to forward to it.

forward "/", PageController, :index

Update the PageView file to add a render method.

defmodule PhoenixElm.PageView do
  use PhoenixElm.Web, :view

  def render("index.html", options) do
    data = %{ getStorage: nil }

    opts = %{
      path: "./priv/server/js/main.js",
      component: "Todo",
      render: "embed",
      id: "elm-main",
      data: data,
    }

    result = PhoenixElm.ElmIo.json_call!(opts)

    render "single_page.html", html: result["html"], data: data
  end
end

Note that we're using the embed method. I haven't got to the bottom of it yet, but the fullscreen method doesn't wire up your listeners properly. The embed seems to work just fine though.

Ok so nearly there. We need to create our single_page.html template, and update our layout and app.js file.

single_page.html

<%= raw @html %>
<script>window.APP_DATA = <%= raw Poison.encode!(@data) %>;</script>

web/templates/layout/app.html.eex

  <body>
    <%= render @view_module, @view_template, assigns %>
    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
  </body>

And finally our app.js

import "phoenix_html"
import Elm from '../elm/Todo.elm'
Elm.embed(Elm.Todo, document.getElementById('elm-main'), APP_DATA);

In the template we splatted the params as APP_DATA. Ok so now if you restart the server and load the page, you should have server rendered Elm!

Server side Elm with Phoenix

Before we proceed

See the demo app

Server code

Start your IO servers

Ember.JS just got easier to learn

Render React with Phoenix

Before we proceed

See the demo app

Server code

Start your IO servers

Subscribe to eval ( code )

Subscribe to eval ( code )