Distrobox to layered-vscode integration - login as ${USER} - [Solved]

General
1

I think finally I got it cracked!
I found a method to integrate layered-vscode to distrobox containers and logging as ${USER}, instead of root. The trick is on creating an exclusive .json configuration file for each of the distroboxes you plan to enter in for development.

This vscode configuration file creation will not occur automatically; you will have to create the folder nameConfigs under ${HOME}/.config/Code/User/globalStorage/ms-vscode-remote.remote-containers/, and then drop your .json configuration files in there.

There is no need to install anything; Bluefin-DX has all the applications required. These are the steps:

  1. Check that docker, podman and distrobox work from a terminal.

  2. Create a project folder that you want to develop using vscode by means of a distrobox container. Let’s call it dbox-project.

  3. Take note of the name of the distrobox. You will need it to create its .json configuration file. For the sake of the example, let’s say the distrobox name is conky-nvidia.

  4. Create the folder nameConfigs with

    mkdir ${HOME}/.config/Code/User/globalStorage/ms-vscode-remote.remote-containers/nameConfigs

  5. Create a .json file with the same name as your distrobox. Example: conky-nvidia.json

    touch  ${HOME}/.config/Code/User/globalStorage/ms-vscode-remote.remote-containers/nameConfigs/conky-nvidia.json

  6. Edit the created file and add this snippet:

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

  7. Save the file, exit the editor, and open vscode, closing any folder, or remote connection.

  8. Ensure you have the vscode extension DevContainers installed.

  9. Go to vscode Settings and search for the keyword Docker Path. You will see that DevContainers has an option for enter an executable there. Type in podman. Exit settings.

  10. Connect to the distrobox by clicking on the icon on the bottom left corner of vscode. Select “Attach to Running Container…”, and pick the distrobox conky-nvidia

You will be connected to your distrobox as ${USER}, not to root anymore.

This is how your vscode workspace should look:

image
image1089Ă—819 41.6 KB

Just like another DevContainer!

This line in the .json file is what makes you the current user automatically:
"remoteUser": "${localEnv:USER}"
If you comment the line you will be logging in as root, which you don’t want.

Screenshots

New nameConfigs folder for vscode

image
image731Ă—163 9.33 KB

DevContainers Docker Path

image
image744Ă—358 24 KB

Open a remote window

image

conky-nvidia.json location

image
image855Ă—205 10.2 KB

conky-nvidia.json

image
image741Ă—256 15.2 KB

Attach to Running Container

image

Credit to

2 Likes
2

Thanks a lot for documenting this :innocent: It was very beneficial. :+1:

1 Like
3

Note: If you are developing a GUI apps (i.e. Flutter apps or any other apps) and trying to run it via VSCode. It may not work directly since you are trying to run it inside a container.

You might want to export below variables for Wayland GUI pass-through:

export WAYLAND_DISPLAY=wayland-0
export XDG_RUNTIME_DIR=/run/user/1000

If you do not want to export them manually then, here is how you can add it in your container.json

{
    "remoteUser": "${localEnv:USER}",
    "settings": {
        "dev.containers.copyGitConfig": false,
        "dev.containers.gitCredentialHelperConfigLocation": "none"
    },
    "remoteEnv": {
        "WAYLAND_DISPLAY": "wayland-0",
        "XDG_RUNTIME_DIR": "/run/user/1000"
    }
}

As side note, please remember to restart your container once or else it won’t work.

Ref: Container environment variables

1 Like