Github's Codespaces

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.

Thanks for the in-depth response @carterbryden, I’ll check out gitpod as an alternative.

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. · GitHub

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

Services top-level element | Docker Docs

Thank you. I have added the quotes, but it does not change anything