Bootstrapping a Phoenix/Elm Project
A template to get you started
Elm and Phoenix — Working Together
Recently I’ve blogged about Integrating Phoenix and Elm and I’ve also provided some guidelines for structuring Elm applications. I decided to pull these pieces together into one sample repository that I use to bootstrap a new Phoenix and Elm application. This application provides:
- A pre-installed Phoenix 1.2.1 directory structure.
- A simple Elm “hello world” application using my current favorite file structure.
- A Brunch configuration file that will automatically re-compile Elm code and place the JavaScript assets in the proper location.
- A repository for creating and running Elm tests.
Using this Project
Assuming you have Erlang and Elixir installed, using this project only requires these actions.
- git clone https://github.com/billperegoy/phoenix_elm_quickstart
<app-name> - cd <app-name>
- mix deps.get
- mix ecto.create
- npm install
- mix phoenix.server
As part of this process, you’ll see this in your shell.
[info] Running PhoenixElmQuickstart.Endpoint with Cowboy using http://localhost:400014 May 15:52:32 - info: compiled 11 files into 2 files, copied 3 in 1.1 secElm compile: src/Main.elm src/**/*.elm, in elm, to ../priv/static/js/bundle.js
Note the last line that indicates that the Phoenix asset manager has compiled the Elm code and placed it in the assets area. Now, you should be able to visit localhost:4000 in your browser and see this page.
You’ll see the traditional Phoenix “hello world” page along with an extra div containing the Elm “hello world.”
How Does this Work?
If you look at the Phoenix template, you will see I added one extra div as a container for the Elm generated code. Note that I chose the div id of elm-app to represent the container for the Elm application.
# web/templates/page/index.html.eex
<div class="col-lg-4">
<div id="elm-app"> </div>
</div>Also, in the layout template head, I added this code to load the JavaScript generated by Elm.
# web/template/layout/app.html.eex
<script type="text/javascript" src="js/bundle.js"></script>Also at the bottom of the body, I added this code to embed the Elm app within the div we defined above. Note the use of the id name elm-app.
# web/template/layout/app.html.eex
<script type="text/javascript">
var elmDiv = document.getElementById('elm-app');
Elm.Main.embed(elmDiv);
</script>Conclusion
That’s really all there is to it. Once you have your Phoenix and Elm applications integrated this way, you can depend upon the Phoenix server to rebuild anytime your Elm code changes. This avoids us needing to implement and maintain two separate build environments.
I’m hoping this will be useful for some other folks who are just getting started in combining these two great technologies. Please let me know if you have any questions or comments on anything here.
