Setup Devcontainer in VSCode Flatpak with Podman

vscode + flatpak + devcontainer + podman

Want to use DevContainers with VS Code Flatpak and Podman? It’s not as straightforward as it sounds. Flatpak’s sandboxing and Podman’s socket access pose challenges. This post will guide you through the hurdles, offering solutions and workarounds to get your DevContainer up and running smoothly. We’ll cover essential configurations, troubleshooting tips, and best practices to make your development experience as painless as possible.

Prerequisites: podman, flatpak

• Install flatpak vscode and podman

  flatpak install -y \
  com.visualstudio.code \
  com.visualstudio.code.tool.podman
  

• Start podman socket

  systemctl --user enable --now podman.socket && \
  systemctl --user status podman.socket
  

• We need to override some vscode flatpak settings

  flatpak override --user \
  --filesystem=xdg-run/podman:ro \
  --filesystem=/run/user/$UID/podman/podman.sock:ro \
  com.visualstudio.code
  

• Test podman socket connection

  curl -w "\n" \
  -H "Content-Type: application/json" \
  --unix-socket /run/user/$UID/podman/podman.sock \
  http://localhost/_ping
  

  You should see OK if everything is alright.

• install devcontainers extension

  flatpak run --command=sh com.visualstudio.code -c \
  "/app/extra/vscode/bin/code --install-extension ms-vscode-remote.remote-containers"
  

• We need to replace docker with podman (podman-remote that connect with host podman). We can do that by opening vscode and go to user setting ctrl + ,. and search for dev.containers.dockerPath change the setting from docker to /app/tools/podman/bin/podman/podman-remote. And search for dev.containers.dockerSocketPath change it to /run/user/$UID/podman/podman.sock. Replace $UID with yours.

To open and edit this file with your favorite text editor (e.g., code, micro, vim, or gedit): Or from terminal

mkdir -p ~/.var/app/com.visualstudio.code/config/Code/User
nano ~/.var/app/com.visualstudio.code/config/Code/User/settings.json

and put the setting

{
    "dev.containers.dockerPath": "/app/tools/podman/bin/podman-remote",
    "dev.containers.dockerSocketPath": "/run/user/$UID/podman/podman.sock"
}

replace $UID with yours. Find with id -u

• Test if vscode flatpak is connected and working with podman (optional)

  flatpak run --command=sh com.visualstudio.code -c \
  "/app/tools/podman/bin/podman-remote version"
  

Check out How I Built a Dev Container Workflow with Flatpak VSCode, Devcontainer and Podman on Wayland for more about Vscode devcontainer running gui.