Skip to content
A Starter Kit for new projects using Elm, Elixir, and Twitter OAuth.
Branch: master
Clone or download
arsduo Add Heroku support (#33)
* Support Heroku

* Fix Procfile
Latest commit 3954fb3 May 19, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
elm Add a happy welcome screen (#10) May 27, 2017
lib Format code (#31) May 11, 2018
scripts Rewrite readme, add code of conduct (#13) May 27, 2017
test Format code (#31) May 11, 2018
.dockerignore Add SASS support (#8) May 27, 2017
LICENSE Add license (#5) May 24, 2017
app.json Add Heroku support (#33) May 19, 2018
development.env.example Use docker-compose env_file for configuration (#9) May 27, 2017
elixir_buildpack.config Add Heroku support (#33) May 19, 2018
mix.lock Upgrade to latest Elixir/Node/npm packages/etc. (#28) May 11, 2018


Elm+Elixir Starter Kit

Sometimes the most painful part of learning a new language isn't picking the new syntax or libraries or logic — it's figuring out all the supporting technologies. Wouldn't it be nice to jump straight to coding instead and pick up the infrastructure along the way?

Introducing 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 with these languages.


  • Elixir 1.6.5 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

Getting Started

You can either fork the repo or clone directly from the original:

git clone

After that, just run ./ It'll ask you a few questions and make most of the changes for you. Easy as pie!

setup process screenshot

Starting things up

Once you've customized the code, complete the setup with:

  • docker-compose build
  • docker-compose run web mix ecto.create

Commands you'll find useful on an ongoing basis:

  • docker-compose run web mix ecto.migrate
  • docker-compose up

And a few for code quality:

  • Elixir tests: mix test
  • Elixir linting: mix credo
  • Elm linting: yarn lint

When the server is running, you'll see that Docker has built and compiled both the Elixir and the Elm code and is ready to go on localhost:4000:


For a guide to some of the interesting implementation details, check out the wiki.

Deploying to Heroku

You can deploy apps derived from the Elm+Elixir starter to Heroku easily! Follow the steps for creating a Heroku app:

  • heroku create
  • Add the buildpacks in app.json under settings
  • heroku addons:create heroku-postgresql:hobby-dev
  • Add appropriate config (environment) variables for the values required by config/config.exs (except the PG_ values, that's covered by DATABASE_URL)
  • Push it up and watch it deploy!


Feedback is highly welcome! If you run into any problems, please file an issue or, if you'd like, open a pull request. As a relative newbie to Elm, Elixir, and Docker, I'm sure there are plenty of good practices you know of that I've missed — thoughts, suggestions, and Github issues and especially pull requests are very welcome!

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms. See for more information.


Thanks to Richard Whaling for his invaluable help setting up Docker and for his pairing on an earlier Elm+Elixir project, to Gursimran Singh for his work at eSpark Learning on Elixir and Docker, to Corey Haines for an excellent introduction to Elm, and, of course, the amazing people who've built all the technologies used in this repo.

Both welcome images were taken by me (Alex Koppel). One is of Dax, one of my cats, and the other an old door in Des Moines, IA, USA.


Phoenix (backend)

Elm (frontend)

Elm has strong community guidelines for formatting code and a utility that can automatically format for you. Make sure to install appropriate editor packages/formatters:

You can’t perform that action at this time.