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.

Features

• 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 [email protected]:arsduo/elm-elixir-starter.git

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

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!

Contributing

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 code_of_conduct.md for more information.

Thanks

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.

References

Phoenix (backend)

• Official website: http://www.phoenixframework.org/
• Guides: http://phoenixframework.org/docs/overview
• Phoenix deployment guides.
• Docs: https://hexdocs.pm/phoenix
• Mailing list: http://groups.google.com/group/phoenix-talk
• Source: https://github.com/phoenixframework/phoenix

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:

• vim: elm-vim
• Atom (not personally tested): language, formatter