The goal of this post is to setup a development environment for a Phoenix web
app on macOS in docker. We will shoot to minimize dependencies on the host and
also the amount of time manipulating the containers with interactive shells.
The end state will be a directory called workdir with the following structure:
Ruby comes installed in macOS, but you likely will want to use a ruby version
manager and to avoid mussing with system gems. A good setup can be found
We will start by creating a Dockerfile with node and phoenix on top of the
default elixir container. Notice that we are using 1.10.3 of elixir and phoenix
1.5.3. These version numbers can obviously be updated to the latest relevant
We can then use this Dockerfile to create/scaffold the phoenix app
Here APP_NAME is a placeholder for whatever you want to all your app. You do not
want to use a generic name like “App” here because it is used in the scaffolding
of the Phoenix app.
This produces the following reminders about how to setup the app, we will get to
these in a second.
First we move the scaffolded folder into it’s position as “app”:
Now we can install docker-sync which is used to speed up the
syncing of the source code of the application into the development container.
With docker-sync installed, we can configure it. Note the name of
app-name-sync, you can change it to match your custom app name. This name just
needs to match in the following docker-compose-dev.yml.
Now we can setup the docker-compose file for development. Having a separate
docker-compose file allows for the custom configuration of the docker-sync
volume while keeping it separate from the production configuration. In this
configuration, we are pairing the phoenix application with a Postgres container
Stored at ./database within our working dir.
Before we can start using the docker-compose setup we need to configure the
development configuration in the application source to point at the docker
configuration. This is done by modifying the app/config/dev.exs to use the
docker username, password, and host environment variables:
Now we can run database mix commands and create the database:
Finally, we need to setup up the front end dependencies and webpack. We cheat a
bit here an use the interactive shell:
In the web container:
To clean up a bit, lets commit this initial source:
Lets test out our setup by bringing up the docker-compose-dev file:
Open the file app/lib/app_name_web/templates/page/index.html and modify some visible text. For example, changing the paragraph tag from: Peace-of-mind from prototype to production to Running in docker.
Save the file, your browser should live reload reflecting your change. You now have a working development in environment for phoenix!