Explore GitHub Codespaces

There are less than 3 months left for this year. And I felt a little disappointed and anxious about the future of mine and software industry, especially for undergraduate employment. Anyway, things have to be moved on. So let’s explore the GitHub Codespaces today.

GitHub Codespaces Website

In my perspective, it’s a cloud hosted VS Code instance with customizable configuration. You can set what VS Code plugin should be installed, what feature like SSH server should be chosen, and even bring your Dockerfile. This feature is still in preview, if you have access to it, you may see this green bottom in the code section.

Codespaces available

Configuration of Codespaces is placed at the .devcontainer directory. Configuration of Codespaces is placed at the container directory. You may want to check the introduction to dev containers document. The JSON file contains the configuration options like opened feature, Dockerfile location, run arguments and other staffs. The format detailed is available at https://aka.ms/devcontainer.json. And here is my example configuration for the Rust demo project.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/rust
{
	"name": "Rust",
	"build": {
		"dockerfile": "Dockerfile",
		"args": {
			// Use the VARIANT arg to pick a Debian OS version: buster, bullseye
			// Use bullseye when on local on arm64/Apple Silicon.
			"VARIANT": "buster"
		}
	},
	"runArgs": [
		"--cap-add=SYS_PTRACE",
		"--security-opt",
		"seccomp=unconfined"
	],

	// Configure tool-specific properties.
	"customizations": {
		// Configure properties specific to VS Code.
		"vscode": {
			// Set *default* container specific settings.json values on container create.
			"settings": { 
				"lldb.executable": "/usr/bin/lldb",
				// VS Code don't watch files under ./target
				"files.watcherExclude": {
					"**/target/**": true
				},
				"rust-analyzer.checkOnSave.command": "clippy"
			},
			
			// Add the IDs of extensions you want installed when the container is created.
			"extensions": [
				"vadimcn.vscode-lldb",
				"mutantdino.resourcemonitor",
				"rust-lang.rust-analyzer",
				"tamasfe.even-better-toml",
				"serayuzgur.crates"
			]
		}
	},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "rustc --version",

	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "vscode",
	"features": {
		"git": "latest",
		"github-cli": "latest",
		"azure-cli": "latest",
		"sshd": "latest"
	}
}

My Dockerfile looks much more straight. We only defined the Debian version of base image and where the base image is.

1
2
3
4
5
6
7
8
9
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/rust/.devcontainer/base.Dockerfile

# [Choice] Debian OS version (use bullseye on local arm64/Apple Silicon): buster, bullseye
ARG VARIANT="buster"
FROM mcr.microsoft.com/vscode/devcontainers/rust:0-${VARIANT}

# [Optional] Uncomment this section to install additional packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

Finally, we can click the code button mentioned before and create our instance.

Create Codespaces

You can select which branch and configuration file is used. And Codespaces are available in the following four regions right now:

  • US East
  • Southeast Asia
  • Europe West
  • US West

There are also four machine type to choose:

  • 2 Core 4GB RAM 32GB
  • 4 Core 8GB RAM 32GB
  • 8 Core 16GB RAM 64GB
  • 16 Core 32GB RAM 128GB

This time I’d like to use the machine with 4 cores, as our workload is not heavy. This machine is quite decent. After clicking the create button, you will be redirected to a new website, and it’ll show you the progress of building the container.

Building contianer

After the building progress is finished, we can inter the online VS Code and begin to write some code. I will use the hello world from poem web framework this time.

Codespace

What’s more interesting, if there is a new port opened to accept connections, Codespaces will create a forward for it. Then you can access it via a URL. If you visit that URL with cURL, you may find a redirection. That’s because the opened port must be accessible after authed with your GitHub account.

Access port

You can also push the commit directly, as you have logged in with your GitHub account.

Push code

You can also manage all instances of a specific project and delete unused ones if you like.

Manage Codespaces

At the end, I am very excited to introduce the prebuild feature to you. You can prebuild the dev container image and make it available in all regions. 

Prebuild

Next time, if we start Codespaces, it will download the prebuilt image and save your time. :)

Prebuilt image