VSCode + Dev Containers and Toolbx/Distrobox setup for Fedora Silverblue

Instructions.md

VSCode + Dev Containers and Toolbx/Distrobox setup for Fedora Silverblue

PLEASE NOTE:

I personally don't use Flatpak VSCode anymore, since I switched from Fedora Silverblue to Bluefin. I'll leave the instructions here for those who want them, but be aware that Flatpak VSCode instructions won't be maintained anymore.

Steps

If you prefer VSCode Flatpak

1. Install VSCode Flatpak from Flathub:

flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
flatpak install com.visualstudio.code

2. Prepare it for spawning podman from host system:

mkdir -p ${HOME}/.var/app/com.visualstudio.code/data/node_modules/bin
ln -sf /app/bin/host-spawn ${HOME}/.var/app/com.visualstudio.code/data/node_modules/bin/podman

3. Inject some environment variables (if you want to use work with Toolbx/Distrobox containers):

flatpak --user override --env HOST_DISPLAY="$DISPLAY" --env HOST_SHELL="$SHELL" --env HOST_SSH_AUTH_SOCK="$SSH_AUTH_SOCK" com.visualsudio.code

If you prefer layered VSCode (RPM)

1. Add VSCode repository info to your system:

echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" | sudo tee /etc/yum.repos.d/vscode.repo > /dev/null

2. Install code package:

rpm-ostree install code

3. Reboot your system:

systemctl reboot

If you prefer VSCode packaged for Homebrew (Universal Blue tap)

When using a Universal Blue system (e.g. Bluefin, Aurora, Bazzite), you may prefer to install VSCode using Homebrew:

1. Add Homebrew tap from Universal Blue team:

brew tap ublue-os/tap

2. Install VSCode:

brew install --cask visual-studio-code-linux

Preparing your VSCode for working with containers

1. Install Dev Containers extension.
2. Configure Dev Containers > Docker path property (dev.containers.dockerPath) to podman.

If you want to work with Dev Containers

1. In your project's devcontainer.json file, you must set properties remoteUser and containerUser properly. For example, if you use any base image from Microsoft itself, you must set both properties to vscode.

2. (For VSCode Flatpak only) Give write permission to /tmp directory:

flatpak --user override --filesystem=/tmp com.visualstudio.code

If you want to work with Toolbx/Distrobox containers

In the following, replace ${XDG_CONFIG_HOME} with ${HOME}/.config (for layered VSCode) or ${HOME}/.var/app/com.visualstudio.code/config (for VSCode Flatpak).

1. Create file ${XDG_CONFIG_HOME}/Code/User/globalStorage/ms-vscode-remote.remote-containers/nameConfigs/${YOUR_DISTROBOX_CONTAINER_NAME}.json with the folloing minimal contents:

{
  "remoteUser": "${localEnv:USER}",
  "settings": {
    "dev.containers.copyGitConfig": false,
    "dev.containers.gitCredentialHelperConfigLocation": "none"
  },

  "terminal.integrated.profiles.linux": {
    "distrobox": {
      "path": "${localEnv:SHELL}",
      "args": [
        "-l"
      ]
    },
    "toolbx": {
      "path": "/usr/sbin/capsh",
      "args": [
        "--caps=",
        "--",
        "-c",
        "exec \"\$@\"",
        "/bin/sh",
        "${localEnv:SHELL}",
        "-l"
      ]
    }
  },
  "terminal.integrated.defaultProfile.linux": "distrobox", // Replace with "toolbx" if you're using it

  "remoteEnv": {
    "COLORTERM": "${localEnv:COLORTERM}",
    "DBUS_SESSION_BUS_ADDRESS": "${localEnv:DBUS_SESSION_BUS_ADDRESS}",
    "DESKTOP_SESSION": "${localEnv:DESKTOP_SESSION}",
    "DISPLAY": "${localEnv:DISPLAY}", // Replace with ${localEnv:HOST_DISPLAY} for Flatpak
    "LANG": "${localEnv:LANG}",
    "SHELL": "${localEnv:SHELL}", // Replace with ${localEnv:HOST_SHELL} for Flatpak
    "SSH_AUTH_SOCK": "${localEnv:SSH_AUTH_SOCK}", // Replace with ${localEnv:HOST_SSH_AUTH_SOCK} for Flatpak
    "TERM": "${localEnv:TERM}",
    "VTE_VERSION": "${localEnv:VTE_VERSION}",
    "XDG_CURRENT_DESKTOP": "${localEnv:XDG_CURRENT_DESKTOP}",
    "XDG_DATA_DIRS": "${localEnv:XDG_DATA_DIRS}",
    "XDG_MENU_PREFIX": "${localEnv:XDG_MENU_PREFIX}",
    "XDG_RUNTIME_DIR": "${localEnv:XDG_RUNTIME_DIR}",
    "XDG_SESSION_DESKTOP": "${localEnv:XDG_SESSION_DESKTOP}",
    "XDG_SESSION_TYPE": "${localEnv:XDG_SESSION_TYPE}"
  }
}

2. Create a folder inside your container for vscode-server data:

sudo mkdir /.vscode-server
sudo chown ${USER}:${USER} /.vscode-server
ln -sf /.vscode-server ${HOME}/.vscode-server
sudo chmod 755 /root
sudo ln -sf /.vscode-server /root/.vscode-server

Related projects

• https://github.com/owtaylor/toolbox-vscode
• https://github.com/daw1012345/vscode-for-toolbox

Thank you so much!

I spent so much time trying to get the flatpak to hook into my pods, let alone the distrobox, to no avail. But, this did the trick.

When Bazzite GDX drops this pain will be no longer and future users can rest easy

Thanks so much for this!

I have one suggested tweak to your instructions: there wasn't a connection between my folder on the host OS and the folder inside the container until I started the podman service as a user by typing this command:

systemctl --user enable --now podman.socket

This is unexpected. These instructions should work without Podman socket-activated service at all.

UPDATE: since release 0.416 of Dev Container extension, and release 0.77 of Dev Container CLI, it's no longer needed to set explicitly userns option keep-id when using Podman for dev containers. I've removed the obsolete insctructions.

@lbssousa It might be not needed, but still worth it, isn't it?

@bam80 it's redundant now, since Dev Container CLI and VSCode Extension already set PODMAN_USERNS="keep-id", but if you want to set it globally for other Podman use cases rather than devcontainers, you can set it in containers.conf as before.

Hmm, it doesn't work for me - I removed userns_mode: keep-id from my compose file and now I have root user in the containers terminal.
Did you test it?

@bam80 yes, I'm currently using it right now. Did you check options remoteUser / containerUser in your devcontainer.json? Which is your Dev Container extension version?

With remoteUser/containerUser/USER in Dockerfile, I wouldn't need that userns_mode: keep-id at all - at least it worked for me earlier.
Maybe I didn't try Dev Container extension before the release 0.416, don't know.

What I can say for sure - earlier userns_mode: keep-id worked without any remoteUser/containerUser/USER in Dockerfile, but now I got a permission denied error on the container build:

Command in container failed: mkdir -p '/.vscode-server/bin' && ln -snf '/vscode/vscode-server/bin/linux-x64/6928394f91b684055b873eecb8bc281365131f1c' '/.vscode-server/bin/6928394f91b684055b873eecb8bc281365131f1c'
[10507 ms] mkdir: cannot create directory '/.vscode-server': Permission denied

It definitely doesn't work - while I have unprivileged user without userns_mode: keep-id, my /workspace volume is still owned by root in this case, so I have to bring userns_mode: keep-id back.
That's with Dev Container extension v0.459.1.
@lbssousa Please recheck on your side.

PS:

Did you check options remoteUser / containerUser in your devcontainer.json?

I use USER <my_user> in the Dockerfile instead.

Here in my workspace, everything works well without explicitly setting keep-id neither in containers.conf nor in devcontainer.json (but I do set remoteUser in devcontainer.json). I'm not using compose file here, so I guess it may be related to the different results we're getting, @bam80 .

Here in my workspace,

Did you forget to add a link?

Here is my:
https://github.com/organicmaps/organicmaps/pull/12972/changes

(I suppose one could just open the PR in VS Code and clone the repo to the container volume)

@bam80 Here's my MWE:

https://github.com/AISCGre-BR/modelo-editorial-cnbb

https://github.com/AISCGre-BR/modelo-editorial-cnbb

Hmm, I don't see /.devcontainer folder here?

Refresh your page. I've just pushed the .devcontainer folder.

To get GUI apps working, I had to passthrough XAUTHORITY as well.