Isaac Ito

October 14, 2023

dev container in vs code

Updated on 22 October 2023

This page is a good starting point for me. It gently describes the basic concept of dev container and how to set it up to get started. This article is an overview.
https://code.visualstudio.com/docs/devcontainers/containers

For more concrete experience of using Dev Container, see this tutorial about how to set up a Dev Container for node.js.
https://code.visualstudio.com/docs/devcontainers/tutorial

Brief summary to use node.js dev container in VS Code

Installation

  1. In the host Windows, install VS Code and Docker Desktop.
  2. In VS Code, install Dev Containers extension from Microsoft.

Create a new sample node.js dev container

Launch Docker Desktop. Docker Desktop will start docker in the background.

Launch VS Code. Open the Command Palette with menu > View, and select "Dev Containers: Try a Dev Container Sample...". Then select "Node" from the list. This trigger a process to build a local contanier, which will take a few minutes to complete.

Once a container is built, it will load automatically. Remote Status bar at the bottom left of the VS Code window must show "Dev Container: Node.js".

Check that node works in the container by typing `node --version` in the terminal. Also check that npm works by typing `npm --version` in the terminal.

Check that the default node.js app runs with menu > Run > Start Debugging (F5).

You can end the connection with menu > File > Close Remote Connection, or Remote Status bar > Close Remote Connection.

Reconnect to an existing container

Launch Docker Desktop. No need to start the container in Docker Desktop.

Launch VS Code. Simply repeat the same action as the first time, i.e., open the Command Palette with menu > View, and select "Dev Containers: Try a Dev Container Sample...". Then select "Node" from the list. This time, this will simply load the existing container, which gets ready much quicker than the first time.

Check that the node.js app runs with menu > Run > Start Debugging (F5).

You can end the connection with menu > File > Close Remote Connection, or Remote Status bar > Close Remote Connection.