Customize GitHub Codespace using Dev Container

A Development Container (or Dev Container for short) allows you to use a container as a full-featured development environment.

GitHub Codespace is a development environment that’s hosted in the cloud, which allows you to use VS Code directly from the browser to edit, commit and run projects. Whenever you work in a codespace, you are using a dev container on a virtual machine.

The dev container configuration is located under .devcontainer/devcontainer.json. There are a number of pre-built dev container images published under mcr.microsoft.com/devcontainers on devcontainers/images .

By default, the codespace launches a universal container which includes a decent amount of tools and platforms. One friction I encountered was that in the universal image, the Hugo version built in is a few minor version behind its latest upstream version, see its devcontainer.json . I try to add a Hugo features on top and specify the version, it didn’t work simply because the Hugo feature only installs it if it’s missing. So I created a dev container configuration to tackle it:

{
  "image": "mcr.microsoft.com/devcontainers/go:1",
  "features": {
    "ghcr.io/devcontainers/features/hugo:1": {
      "extended": true,
      "version": "0.112.5"
    },
    "ghcr.io/devcontainers/features/node:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "streetsidesoftware.code-spell-checker"
      ]
    }
  },
  "postCreateCommand": "npm install",
  "forwardPorts": [1313]
}

In the above configuration, we first set the base image, then add in features (language, tools or frameworks) on the top. And we install some VS Code extensions, and after the image is created, run npm install. Since I’m developing a Hugo site, port 1313 is forwarded. In this way, I installed Hugo on top of go base image, and also enabled the features I need specificly for this repository.

If we ever want to further customize one feature, devcontainers/feature-starter provides a good template for authoring our own feature.