vscode-container-wasm: An Extension of VSCode on Browser for Running Containers Within Your Browser

One of the limitations of on-browser VSCode (e.g. vscode.dev) is lack of Linux-based Terminal and containers running completely within the browser.

So we’ve created an experimental VSCode extension “vscode-container-wasm” which enables to run Linux-based containers within the browser and interact with them via the terminal.

gcc on VSCode within the browser

How it works

This is implemented by running Linux-based containers inside WebAssembly (Wasm) VM of the browser.

We use container2wasm to enable this. This is a container-to-wasm converter that receives a Linux-based container and creates a Wasm image that runs the container on Wasm runtimes, using CPU emulators like Bochs (for x86_64) and TinyEMU (for RISC-V).

GitHub - ktock/container2wasm: Container to WASM converter

vscode-container-wasm takes the Wasm image converted from a container and runs it on the browser using microsoft/vscode-wasm which is WASI implementation integrated to VSCode.

In the container, HTTP(S) networking is also available with restrictions by the browser (CORS-restricted and no control over Forbidden headers). This uses the browser’s Fetch API. Please see container2wasm docs for details.

Getting Started

This section shows an example of using vscode-container-wasm on github.dev which is a browser-based editor with VSCode features integrated to GitHub.

First, open ktock/vscode-container-wasm-gcc-example on github.dev (URL is https://github.dev/ktock/vscode-container-wasm-gcc-example?vscode-coi=on). Please ensure containing ?vscode-coi=on in the URL.

github.dev on a C project

Install the vscode-container-wasm extension which is named “container-wasm” on Marketplace.

vscode-container-wasm extension

Run > Run Container On Browser in the command palette. Then the container will be launched with the Terminal.

container running on github.dev on browser

NOTE: It takes some time to load and start the container. You might also sometimes see “SharedArrayBuffer is not defined” error because of ?vscode-coi=on not fully activated on the browser. Please ensure ?vscode-coi=on query added to the URL and reload the page with cache cleaned.

In the container, the workspace is mounted at /workspace. gcc is also available in the container so you can compile and run the C program in the workspace.

gcc on github.dev within the browser

NOTE: It takes some time to complete compiling the code. This project is still in an early experimental stage and we’ll work on further analysis and improvement of the performance.

Bring your own container on browser using container2wasm

Not limited to gcc shown above, other containers can also run on VSCode on the browser by converting them to Wasm images using container2wasm. The following example converts ubuntu:22.04 container to a Wasm image (out.wasm).

$ c2w ubuntu:22.04 out.wasm

Then upload the emitted Wasm image somewhere accessible from your browser (our example used GitHub Pages). Please make sure the server allows cross-origin access from the browser.

Then configure the workspace using .vscode/settings.json file to point to that image. When that workspace is opened on VSCode on the browser, the specified image can be launched by vscode-container-wasm.

{
    "container.imageLocation": "https://ktock.github.io/image-example/amd64-gcc-debian-wasi",
    "container.imageChunks": 9
}

NTT is hiring!

We NTT is looking for engineers who work in Open Source communities like containerd, Docker/Moby, Kubernetes and WebAssembly. Visit https://www.rd.ntt/e/sic/recruit/ to see how to join us.