Skip to main content
Version: Next 🚧

Visual Studio Code Dev Container Setup

The Visual Studio Code Dev Containers lets you use a Docker container as a full-featured development environment.

VSCode devcontainer

System requirements​

Before processing, make sure you have the lateset version of Git, Virsual Studio Code, Docker and docker-compose.

Install Git​

Install it from offical website.

Install Docker & docker-compose​

  • Windows: Docker Desktop 2.0+ on Windows 10 Pro/Enterprise. Windows 10 Home (2004+) requires Docker Desktop 2.3+ and the WSL 2 back-end. (Docker Toolbox is not supported. Windows container images are not supported.)
  • macOS: Docker Desktop 2.0+.
  • Linux: Docker CE/EE 18.06+ and Docker Compose 1.21+. (The Ubuntu snap package is not supported.)

Install Visual Studio Code​

Visual Studio Code is a free code editor, which runs on the macOS, Linux, and Windows operating systems.

Follow the platform-specific guides below:

  1. Download Visual Studio Code for macOS.
  2. Open the browser's download list and locate the downloaded app or archive.
  3. If archive, extract the archive contents. Use double-click for some browsers or select the 'magnifying glass' icon with Safari.
  4. Drag Visual Studio Code.app to the Applications folder, making it available in the macOS Launchpad.
  5. Open VS Code from the Applications folder, by double clicking the icon.

Install Remote container extension​

Install the Remote Container extension.

VSCode extension

Fetch Zealot Codesoace​

Zealot Codespace was in the .devcontailer folder of Zealot project, so you need clone the source code.

git clone https://github.com/tryzealot/zealot.git

Explan these files in Codespace:

FileDescription
devcontainer.jsonVSCode devcontainer config
Dockerfile.baseBase Dockerfile, auto push multi registry servers after changes
DockerfileSpeed up build time, depends on above image.
docker-compose.ymlAll services of Zealot
create-db-user.sqlCreate user and role for Zealot

Open the project in a container​

Start Visual Studio Code, run the Dev Containers: Open Folder in Container... command in Command Palette and select the Zealot folder.

VSCode Command Palette

Click the Starting Dev Container (show log) to review zealot codespace build real time logging messages.

VSCode Command Palette

When finish the task, project files will load in file explorer and the zsh terminal. Access log outputs messages:

[7293 ms] Start: Run in container: cat /proc/344/environ
[9836 ms] Port forwarding connection from 53148 > 43379 > 43379 in the container.
[9836 ms] Start: Run in container: /home/vscode/.vscode-server/bin/5235c6bb189b60b01b1f49062f4ffa42384f8c91/node -e
[9981 ms] Port forwarding 53148 > 43379 > 43379 stderr: Connection established
[14988 ms] Port forwarding 53148 > 43379 > 43379 stderr: Remote close
[14999 ms] Port forwarding 53148 > 43379 > 43379 terminated with code 0 and signal null.
[29221 ms] Port forwarding 53148 > 43379 > 43379: Local close

In host Docker containers:

Docker-Compose containers

Start the project​

Press Ctrl + ` to open the integrated terminal in Visual Studio Code if it isn't already open. then run bin/dev to run all services.

Notice that the terminal prompt might look different than your normal terminal prompt.

VSCode Zealot in Container

Open in browser​

A while after run bin/dev, select Ports to see all forwarded ports, Open in Browser in quick way.

VSCode forwarded ports