Visual Studio Code Remote - Containers supports a pattern that allows the use of multiple development containers at the same time for a source tree. Unfortunately GitHub Codespaces does not currently support attaching a second window to a different container in the same Codespaces. However, the fact that the same technology is used in both Remote - Containers and Codespaces allows you to use the Remote - Containers extension with a codespace to achieve the same goal with some subtle tweaks.
This variation of the pattern mirrors the Remote - Containers one and spins everything up at once using a single Docker Compose file. If you would prefer spin up completely separate dev containers in the same codespace, see this variation instead.
Codespaces will ultimately have first class support for this partern, so this is a workaround given current limitations.
- Install VS Code locally
- Install the GitHub Codespaces extension in local VS Code
- Install the VS Code Remote - Containers extension in local VS Code
- Install the Docker CLI locally (e.g. by installing Docker Desktop - though Docker itself does not need to be running)
- On macOS or Linux, install
jqlocally:- macOS:
brew install jq - Linux: Use your distro's package manger to install. For example,
sudo apt-get install jq
- macOS:
-
Create a codespace from this repository from VS Code client locally (F1 or ctrl+shift+p, select Codesaces: Create New Codespace, enter this repository)
Note: If you accidentally created the codespace from the web, you can open it in VS Code client after things are up and running if you prefer.
-
In this codespace, open a terminal and run the command:
keep-me-alive -
On Windows, be sure the Remote - Containers: Execute in WSL user setting is Unchecked (
"remote.containers.executeInWSL": falseinsettings.json). -
Next, copy
open-codespace-dev-container.sh(macOS / Linux) or ``open-codespace-dev-container.ps1andopen-codespace-dev-container.cmd` (Windows) to your local machine. -
In a local terminal, use the script to set up a connection to one of the sub-folders in this repository. For example, on macOS / Linux:
bash open-codespace-dev-container.sh container-1-src
... or on Windows, use PowerShell/Command Prompt (not WSL) as follows:
.\open-codespace-dev-container.cmd container-1-src
-
In the VS Code window that appears, click Reopen in Container when a notification appears.
In a bit, this new window will be using the development container for this folder.
This sample applies the same patterns used in Remote - Containers for this same scenario. To adapt for your own use:
-
Modify the extensions and contents of each dev container by updating the
Dockerfileanddevcontainer.jsonfile incontainer-1-srcandcontainer-2-srcas needed. You can also rename the folders. -
If you need to add another folder, copy the contents of
container-1-srcto create a new folder. Then updatedocker-compose.ymland add a new section for your container. For example, if you created acontainer-3-srcfolder, you could add a new section like this:# Development container 3 container-3: build: context: container-3-src/.devcontainer dockerfile: Dockerfile volumes: - ./container-3-src:/workspace:cached command: /bin/sh -c "while sleep 1000; do :; done"
-
For multi-repo scenarios, you can setup the "bootstrap" container (in the root
.devcontainerfolder) to clone repositories as described in this sample instead. You can then modifydocker-compose.yamlto reference the appropriate locations for the Dockerfiles and add the appropriate.containerconfig into the repositories. -
If your new container relies on contents outside of the
.devcontainerfolder (particularly if common across all containers), add them tocommon-config.listin the root of the repository.
There are few to-dos for this sample:
- Cache VS Code Server between development containers to avoid having to download it multiple times.
- Look for ways to further reduce steps.