I wonder if anyone in the community has started to use Github’s Codespaces for their team’s development?
If so, what is there to learn? If not, what’s the reason?
Thanks
I haven’t tried code spaces yet but I highly, highly recommend gitpod.io as an alternative. I’ve always loved cloud dev envs and that’s the best one I’ve tried. With a team it’s a serious productivity multiplier for so many reasons, but even alone it’s just so nice to use. Automatic prebuilds on every commit/branch/pr is just chefs kiss.
What is there to learn:
Not much, honestly. You’ll need to know how to dockerize something well enough to create one dockerfile, but we just use one of their provided images and added some tasks in the config file. Since it prebuilds you don’t need to wait opening up a workspace, it’s already done.
Also it’ll help force you to stop relying on and creating little local hacks and workarounds in your dev env out of convenience and laziness (or at least it did for me). That stops so many “works for me” issues. You’ll be a tiny bit annoyed the first time you need to spend an extra few minutes making (for example) something in your test suite work well with “ephemeral” dev envs, and then you’ll be really happy you did when you see that bit get reused by your entire team over and over. It helps your entire app be more encapsulated, deployable, etc. because it has to be for your dev env.
Learn to make use of the features as well, read what they have on offer. Sharing workspace snapshots or an actual workspace instance with your team can be really useful. We create task issues on GitHub for pretty much anything we do and create workspaces right from those. That opens a workspace on a new branch named for the task and is a really nice workflow, especially with the extension that plops a button in github.
Honestly I could go on forever, cloud dev envs are the best, and gitpod is the best one imo.
7 Likes
I want to bump this thread to get people to reply with links to their gitpod templates or setups, if they have any that they like.
Right now, I would want a template that has postgres, phoenix, and elm setup.
Am curious if anyone is using CodeSpaces yet? I like GitPod.io - but am needing to stick within GitHub for a project.
I am using GitHub Codespaces with Neovim for a few months already and I didn’t have any major issues so far. Visual Studio Code integration with Codespaces is quite good obviously.
PlugLimit and Existence libraries have some basic CS configuration for Elixir (check .devcontainer repo directory).
I wrote a post on how to get up and running with gitpod.io and Elixir. You can read it here.
I also habe a template here: GitHub - benvp/phoenix-gitpod: Sample repository for a Phoenix App running in Gitpod. Also compiles ElixirLS for better IntelliSense support.
4 Likes
This mostly worked for me. There is a bug currently where docker images don’t seem to build properly in some situations, but I’m sure that will be fixed in codespaces soon. For now, I enable sudo and run apt install commands manually. I’m sure there is a simpler method than what I came up with. Also, until the docker image build bug is solved, the approach below will be very slow for working on many branches.
define a docker file, enable sudo:
FROM mcr.microsoft.com/devcontainers/universal:2
# add sudo, remove once docker file steps are finalized
RUN apt-get update \
&& apt-get install -y sudo \
&& echo vscode ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/vscode \
&& chmod 0440 /etc/sudoers.d/vscode
reference the dockerfile from devcontainer.json (see github codespace docs for an example)
Run the following install and cofiguration steps inside of the running codespace for now:
# RUN apt-get update
# RUN apt-get install -y jq
# RUN apt-get install -y universal-ctags
# RUN apt-get install -y git
# RUN apt-get install -y libopenblas-dev
# RUN apt-get install -y postgresql-12
# RUN apt-get install -y unixodbc
# RUN apt-get install -y inotify-tools
# RUN git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.11.3
# add asdf lines to ~/.bashrc and source in terminal (see asdf install instructions)
# asdf plugin-add erlang https://github.com/asdf-vm/asdf-erlang.git
# asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
# asdf plugin-add yarn
# asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git
# TODO: install your SPA framework of choice, if using SPA
# with-ssl needed?
# export KERL_CONFIGURE_OPTIONS="--without-javac --without-wx"
# asdf install # takes long time, complains about xsltproc, fop. xmllint missing.
# edit hba to use "trust" for first 4 rows (sudo su - postgres; nano /etc/postgresql/12/main/pg_hba.conf)
# pg_ctlcluster 12 main start
# build up appropriate dev config file for connecting to postgres
# mix local.rebar --force
# mix local.rebar --force
# mix deps.get
# mix compile
# mix ecto.create
# mix ecto.load
# mix ecto.migrate
I am facing port forwarding issues with my application. I get a 502 error, seemingly a CORS issue as I get a strict-origin-when-cross-origin referer policy. However, it seems that the request is never reaching my app, since I do not see any logs, even after adding Corsica to help deal with CORS by with a wildcard origin setting.
Does anyone have an Idea on how I can fix that?
devcontainer.json
"name": "BBLeagues development environment",
"dockerComposeFile": "./docker-compose.yml",
"workspaceFolder": "/workspace/bbleagues",
"service": "bbleagues",
"shutdownAction": "stopCompose",
"forwardPorts": [
"4000:4000",
"4001:4001"
],
"customizations": {
"vscode": {
"extensions": [
"bradlc.vscode-tailwindcss",
"JakeBecker.elixir-ls",
"iampeterbanjo.elixirlinter",
"phoenixframework.phoenix",
"ms-azuretools.vscode-docker",
"Codeium.codeium",
"github.vscode-github-actions",
"eamodio.gitlens",
"hashicorp.terraform",
"ms-vscode.test-adapter-converter",
"hbenl.vscode-test-explorer",
"dracula-theme.theme-dracula"
]
}
},
"features": {
"ghcr.io/devcontainers/features/common-utils:2": {
"version": "latest"
}
}
}
Dockerfile
ARG ELIXIR_VERSION=1.16
FROM elixir:${ELIXIR_VERSION}-slim
RUN apt-get update && \
apt-get install -y git && \
apt-get install -y postgresql-client && \
apt-get install -y inotify-tools && \
apt-get install -y curl && \
apt-get install -y wget && \
apt-get install -y gnupg2 && \
apt-get install -y dirmngr && \
apt-get install -y gpg && \
apt-get install -y gawk
# RUN git clone https://github.com/asdf-vm/asdf.git $HOME/.asdf --branch v0.8.1 && \
# echo '. $HOME/.asdf/asdf.sh' >> $HOME/.bashrc && \
# echo '. $HOME/.asdf/asdf.sh' >> $HOME/.profile
# ENV PATH /home/asdf/.asdf/bin:/home/asdf/.asdf/shims:$PATH
RUN mix local.rebar --force
RUN mix local.hex --force
EXPOSE 4000
EXPOSE 4001
docker-compose.yml
version: "3.8"
services:
bbleagues:
build:
context: ../
dockerfile: .devcontainer/devcontainer.Dockerfile
environment:
MIX_ENV: dev
depends_on:
- db
ports:
- 4000:4000
- 4001:4001
db:
image: postgres:16.1-alpine
restart: always
ports:
- 5432:5432
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_HOST_AUTH_METHOD: trust
PGDATA: /var/lib/postgresql/data/pgdata
volumes:
- postgres-data:/var/lib/postgresql/data
volumes:
postgres-data:
Seems like you need to have your ports encapsulated with quotes in docker-compose.yml, might be worth a shot
Thank you. I have added the quotes, but it does not change anything 
From the web terminal I can run curl http://localhost:4000 without any issues, I can see the log message in the console. This makes me think that the traffic is actually not reaching the container at all, so I’m scratching my head as to what I’ve misconfigured.
[ someone please delete. Why can’t I delete? ]
When I’m having trouble with network configuration on Docker, I sometimes use network_mode: "host" in the compose file to bypass Docker’s networking layer. That way, you can figure out if the problem actually is related to your port config, or if the issue is somewhere else.
Unrelated example for demonstration purposes:
compose.yaml
---
services:
db:
image: "docker.io/postgres:16"
restart: "always"
environment:
POSTGRES_DB: "${POSTGRES_DB:?}"
POSTGRES_USER: "${POSTGRES_USER:-postgres}"
POSTGRES_PASSWORD: "${POSTGRES_PASSWORD:-postgres}"
network_mode: "host"
volumes:
- "postgres:/var/lib/postgresql/data"
volumes:
postgres:
Stupid question, but is the Phoenix server running?
mix phx.server
Edit:
Or you can try to edit the ip-mapping in config/dev.exs from
http: [ip: {127, 0, 0, 1}, port: 4000]
to
http: [ip: {0, 0, 0, 0}, port: 4000]
1 Like
Great suggestion. That actually fixed an issue I had when Dockerizing a dev server a month or two ago.
1 Like
Yes indeed it is
@arcanemachine setting network_mode to "host" did not change anthying, I am still getting a 502 with strict-origin-when-when-cross-origin referer policy.
Did you try to edit the config/dev.exs file?
For completeness, here is a working solution:
devcontainer.json
{
"dockerComposeFile": "docker-compose.yml",
"workspaceFolder": "/workspaces/plfantasy",
"service": "plfantasy",
"shutdownAction": "stopCompose",
"features": {
"ghcr.io/devcontainers/features/common-utils:2": {
"installZsh": "true",
"username": "vscode",
"userUid": "1000",
"userGid": "1000",
"upgradePackages": "true"
},
"ghcr.io/devcontainers/features/git:1": {
"version": "latest",
"ppa": "false"
}
},
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
// Set *default* container specific settings.json values on container create.
"settings": {
"emmet.includeLanguages": {
"phoenix-heex": "html"
},
"tailwindCSS.includeLanguages": {
"elixir": "html",
"phoenix-heex": "html"
}
},
"extensions": [
"jakebecker.elixir-ls",
"phoenixframework.phoenix",
"samuel-pordeus.elixir-test",
"bradlc.vscode-tailwindcss",
"ms-azuretools.vscode-docker",
"ms-vscode.azurecli",
"eamodio.gitlens"
]
}
},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [
4000,
4001,
5432
],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "mix local.hex --force && mix local.rebar --force && mix archive.install --force hex phx_new",
// Set `remoteUser` to `root` to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "vscode"
}
docker-compose.yml
version: '3'
services:
plfantasy:
build:
context: ..
dockerfile: .devcontainer/Dockerfile
volumes:
- ../..:/workspaces:cached
# Overrides default command so things don't shut down after the process ends.
command: sleep infinity
environment:
MIX_ENV: dev
# Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
network_mode: service:db
# Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
# (Adding the "ports" property to this file will not forward from a Codespace.)
db:
image: postgres:latest
restart: unless-stopped
environment:
POSTGRES_USER: postgres
POSTGRES_DB: postgres
POSTGRES_PASSWORD: postgres
volumes:
- postgres-data:/var/lib/postgresql/data
volumes:
postgres-data:
Dockerfile
FROM hexpm/elixir:1.15.7-erlang-26.1.2-debian-buster-20231009-slim AS elixir-build
RUN apt-get update && \
apt-get install -y git && \
apt-get install -y postgresql-client && \
apt-get install -y inotify-tools && \
apt-get install -y curl && \
apt-get install -y wget && \
apt-get install -y gnupg2 && \
apt-get install -y dirmngr && \
apt-get install -y gpg && \
apt-get install -y gawk
Note the use of network_mode in docker-compose.yml. I did not need to tweak the IP mapping in config/dev.exs
The HTML IntelliSense/autocomplete does not seem to work for HEEx/Elixir files in GitHub Codespaces.
Possibly related to Allow extension to be installed in container or remote · Issue #12 · phoenixframework/vscode-phoenix (github.com)
