How to install VSCode in a Toolbox on Fedora Silverblue

Context

This guide explains how to install Visual Studio Code on Fedora Silverblue using Toolbox, and how to create desktop shortcuts for the GNOME application overview.

Under the hood, toolbox is a Fedora-native CLI tool to manage Podman containers. This guide describes how to install VSCode into Fedora Silverblue using this tool, and also create the necessary desktop shortcut for GNOME's app overview.

Installing Visual Studio Code in a Toolbox

1. Open a terminal

2. Create a Toolbox container

   Note: If you'd like to name this container to be something else, rename it with the Podman CLI after following these instructions to the end!

   toolbox create vscode-container
   

3. Enter the container

   toolbox enter vscode-container
   

4. Download the Visual Studio Code RPM package

   wget https://update.code.visualstudio.com/latest/linux-rpm-x64/stable -O code-latest-x64.rpm
   

5. Install the Visual Studio Code RPM package

   sudo dnf install ./code-latest-x64.rpm
   rm ./code-latest-x64.rpm
   

Creating the Desktop shortcut

1. Enter the container

   toolbox enter vscode-container
   

2. Copy the VSCode desktop shortcut to your shared home directory

   cp /usr/share/applications/code.desktop ~/.local/share/applications/code.desktop
   cp /usr/share/applications/code-url-handler.desktop ~/.local/share/applications/code-url-handler.desktop
   

3. Update the executable path in both .desktop files

   sed -i 's|Exec=/usr/share/code/code|Exec=toolbox run -c vscode-container code|g' code.desktop
   sed -i 's|Exec=/usr/share/code/code|Exec=toolbox run -c vscode-container code|g' code-url-handler.desktop
   

   The scripts above do a text replacement with sed to update the executable path from Exec=/usr/share/code/code with Exec=toolbox run -c vscode-container code.

4. Download the icon pack from the official Visual Studio Code branding site and copy the icon to the ~/.local/share/icons directory

   Note: This is needed since the icon is not included with the RPM.

   wget https://code.visualstudio.com/assets/branding/visual-studio-code-icons.zip
   unzip visual-studio-code-icons.zip
   cp ./visual-studio-code-icons/code.svg ~/.local/share/icons/code.svg
   rm -r ./visual-studio-code-icons
   

   The Icon= line on the desktop shortcut will find this new icon based on its name.

(Recommended) Install a Web Browser inside the container

VSCode often requires opening a web browser to do various things like authentication or viewing documentation. Installing a web browser into the container will allow those actions to work instead of failing silently.

Here are some well-maintained options to choose from:

• GNOME Web (Epiphany) is a lightweight option native to GNOME, and fits well in Fedora Silverblue.

  sudo dnf install epiphany
  

• Qutebrowser is a lightweight option for those that prefer keyboard navigation.

  sudo dnf install qutebrowser
  

• Firefox is the standard browser in most Linux distributions.

  sudo dnf install firefox
  

Tips

• Interact with the container directly through Podman for troubleshooting: If you make a mistake or want to alter the container after initializing (such as rename it or update it), you can also use the Podman CLI to interact with the containers directly.

• Update your desktop shortcuts if you rename your container: If you rename your container, make sure to also rename the Exec= line in the desktop shortcuts files as well so that the shortcuts do not break. To do this, altering the sed script should also make this process relatively easy.

References

• Toolbox documentation: https://containertoolbx.org/
• Podman commands documentation: https://docs.podman.io/en/latest/Commands.html
• Visual Studio Code Linux installation documentation: https://code.visualstudio.com/docs/setup/linux