Launching Projects with Elm and Elixir

Alex Koppel bio photo By Alex Koppel

Sometimes the most painful part of learning a new language isn’t picking up the new syntax or libraries or logic — it’s figuring out all the supporting technologies. How do you compile Javascript? How do you hook OAuth into your session management? How do you even manage sessions?

This year I’ve fallen in love with Elm and Elixir, in large part because of the way those two languages push me to think differently about development. When I started on my second Elm and third Elixir project, I was excited to get straight to hacking, but challenges quickly emerged.

Elixir and the Phoenix framework are straightforward to set up, and adding Elm compilation isn’t too difficult either. However, as I added authentication through Twitter and moved auth to the API and put everything into Docker and and and, I found myself spending more and more of my time setting up the projects right rather than learning Elm and Elixir better or actually building the app I wanted to create.

Wouldn’t it be nice to jump straight to coding instead, and pick up the infrastructure along the way?

For anyone who’s felt the same way, or who’s thinking about trying out Elm and Elixir, look no further: there’s now a way to leap those hurdles.

Introducing the Elm+Elixir Starter Kit

I’m excited to release the Elm+Elixir Starter Kit, a new boilerplate project combining Elm and Elixir, ready with an easy, scripted setup for developers who are excited to experiment and build on these technologies. If you want to hit the ground running, check it out on Github!

Features

When you clone the repo, you’ll get

  • Elixir 1.4.4 for the backend, with Phoenix 1.2.1 configured for Postgres
  • Elm 0.18 for the frontend
  • Authentication through Twitter (extensible to other providers through Guardian/Ueberauth)
  • Independent frontend that communicates to the backend using JSON API calls
  • Elixir tests and code linting/static analysis via ExUnit and Credo
  • Elm compilation tests and code listing via elm-make
  • Ready for continuous integration on Circle CI
  • Yarn for deterministic Javascript package management
  • Configured for Docker for easy development and deployment

Try it out!

Ready to start your own project? Just want to kick the tires a bit? Awesome!

1. Clone or fork the repo:

git clone git@github.com:arsduo/elm-elixir-starter.git

2. Use the included ./setup_project.sh script to configure the starter kit for your project1:

Setup Script

3. Start it up!

If everything’s working, Docker will boot up:

Terminal on successful launch

And you’ll see this handsome welcome screen:

Unauthed welcome screen

You can log in through Twitter:

Twitter login

And then you’ll be back at the app with access to your Twitter user:

Authed welcome screen

What’s next?

In a follow-up post2 I’ll dive into the inner workings of the Starter Kit, explaining some of the interesting and challenging technical components.

Over the last few weeks, I’ve been using the Starter Kit for a personal project focusing on books. It’s been hugely helpful! With a few more apps in mind, I know this will come in handy for me — and hopefully for you as well.

I’d love to hear about your experience using the Elm+Elixir Starter Kit, what you’re doing with it, and certainly anything that got in your way.

Enjoy!

  1. The original setup required nine manual steps, which I think qualifies as “minimal configuration required”. 

  2. The technical discussion was originally part of this post, but was split out to make both parts flow better.