Introduction

When developing code, we often start with the latest version of the tool we are developing with. For example, if we start a node project, we may start with the latest version available today, node v18.7.0. In the meantime, we are happy because we are on the latest version and our development environment just works. However, in a few months, maybe node v19.x.x comes out and we've upgraded our system to use this new version. All of the sudden we may have problems using this new version of node with our older project.

Using Remote Containers

To resolve the problem, we can use VSCode's Remote - Containers extension to build a container with the exact version of node as well as all utilities that are required for the project. This extension looks for a .devcontainers directory to build the development container which contains node and all other utilities (maybe git, ssh, etc).

Prerequisites

• Visual Studio Code
• Docker (or any other container service)

Setup

To get started with devcontainers, we will create a project (an existing project will work too):

mkdir devcontainer-project

Next, we will create the devcontainer directory:

cd devcontainer-project
mkdir .devcontainer

Next, we will need a devcontainer.json which contains some basic information about how to set up a remote container.

.devcontainer/devcontainer.json

{
  "name": "Remote Container Example",
  "context": "..",
  "dockerFile": "./Dockerfile",
  "settings": {},
  "extensions": []
}

This simple devcontainer references a Dockerfile in the same directory as the devcontainer.json file, so we will also create the Dockerfile which defines how to build the container. For this tutorial, we will use a node container and create a react app.

.devcontainer/Dockerfile

FROM node:18.7.0-alpine3.16
RUN npm install -g create-react-app
COPY . ./

We are now ready to install the Remote - Containers extension in VSCode and run our container:

After installing the extension, we can build our container by pressing the containers button on the bottom left of vscode:

And now, we have a remote container that we can use for creating a react app.

Let's bring up a terminal in our vscode and run create-react-app

create-react-app container-app
cd container-app
npm run start

And we have our react app running inside of a remote container without ever installing node directly to our machine.

The best part is that anyone with Docker and VSCode with the Remote Containers extension can also spin up the exact development environment we have already created and get started right away without worrying about which version of node is required or what other dependencies are required.

We used a node container for this tutorial, but these containers can be used to set up many different development environments. There are already pre-built containers for golang, python, rust, etc. If there is no pre-built container specifically for your need, you can even build one using the base alpine or debian containers.

If you want some inspiration on how to set up a great dev container, check out my github repository where I built a container with an amazing zsh theme.