Apr 28, 2016

Embedding an Elm App Into Your Rails Project

Preface: As a beginner programmer attending the Turing School, my main focus the past 6 weeks has been on Rails. However, as a hobby, I have been learning Elm in the few off hours I have had. This is a been a fun experience with not only the front-end, but with functional programming.

Implementing and elm app into your rails app is relatively straight forward and detailed within the docs that elm offers. However, I wanted to quickly run through it for any beginner programmer experimenting with elm.

Step 1:

Place you elm files into your assets/javascript folder.

Step 2: (If you haven’t compiled your Elm app into JavaScript)

cd into your javascripts folder. From the command line run..

elm make NAMEofAPP --output NAMEofAPP.js

This will compile your elm app into javascript, so your views can utilize it.

Step 3:

Add a script tag into the head of the application.html.erb file that will reference your compiled javascript.

Step 4:

Add script tag below the body that will reference your elm app and where you want it to be embedded

Note the var and the second argument to Elm.embed are the same. This will find the div that has the id of “spaceage” and place the app there. Further, keep in mind the Elm.embed(Elm.YourApp), this is what allow the interop between your elm app and your html page.

Step 5:

Create a div with the same id you specified in you var above.

Now you have your elm app embedded and ready to be styled. I’ve found creating simply web-apps in elm to be super fun and urge everyone to give it a try.

Cheers,