The tutorial walks through the creation of a very basic seat saving application, like one you’d use when booking a flight for example. The application will do just enough to demonstrate the mechanisms for getting the two technologies talking to each other.
There is an accompanying repo for this tutorial. Each of the numbered steps has an associated commit so that you can just look at the diffs if you’d rather not read through the whole thing.
You’ll need to have the items below installed in order to follow along:
- Erlang, Elixir and Phoenix
- Postgres (or see the Ecto guide if you want to try using something else)
Versions used in this tutorial
If you can, please use the versions noted below as it will make following the tutorial easier. If you can’t then check the gotchas on the repo as others may have logged issues for the version that you are using.
- Erlang 18.3
- Elixir 1.2.3
- Phoenix 1.1.4
- Elm 0.16.0
You may need to upgrade your version of Phoenix. Be sure to check the Phoenix blog for any upgrade notes between versions.
A note for readers using Windows
This tutorial assumes that you are working on a *nix machine, but I’ve tried to call out where possible any Windows-specific gotchas. However you will have to parse some things such as file paths as you go (i.e.
web\elm\SeatSaver.elm on Windows).
Getting up to speed
If you’re brand new to Phoenix then I would suggest going through the Guides on the Phoenix site. That said, we will likely cover everything that you need to know as you need to know it here. There is also a book on The Pragmatic Bookshelf.
If you’re brand new to Elm then I would suggest the Pragmatic Studio Elm course as a great way to get into the language. Also, the Elm Architecture Tutorial is a great way to see how idiomatic Elm applications are constructed.
There are a number of gotchas on the tutorial project’s wiki. We’ll add to them over time. If you come across any it would be great if you could raise an issue so that we can update. Thanks in advance!
Creating a Phoenix project
The first thing that we want to do is to create a Phoenix project. Open a terminal and navigate to where you want to create the project. Then do the following:
mix phoenix.new seat_saver cd seat_saver
Now we’ll set up the database.Make sure that you have Postgres running and that you either have a postgres user set up in Postgres or that you have valid user credentials in both the config/dev.exs and config/test.exs files.
If you are running on Windows you will need to make sure that you have the path to the `psql` binary in your Environment Path. See this guide for instructions on how to change the PATH and add the following to the end of the PATH string (changing as appropriate for your installation):
Create the database for the project by running:
We can run the tests to check that everything went according to plan by running:
There should be 4 passing tests.
If we fire up the Phoenix server
iex -S mix phoenix.server
and visit http://localhost:4000 in the browser, we should see something like this:
We now have a base Phoenix application that we can build on. In Part 2 we’ll see how to add an Elm application into the mix.