How to setup a Dev Container on VS Code?

This is a beginner guide to set up a dev container. A development container (or dev container for short) basically is an isolated environment with it’s own set of tool that you can use for development. It is especially helpful for languages like Python where they have complex environment management setups (thanks but no thanks pip, anaconda, venv!) or if you do too many projects and don’t want to setup all the components from scratch every time. As I am using Windows currently and it’s easier to use a linux container, this guide will be for dev container on VS Code using WSL.

Prerequisites before we can start setting up

Setting up WSL (Windows 10/11)

Windows Subsystem for Linux(WSL) is a component of Microsoft Windows that allows the use of a Linux environment from within Windows without using a VM or dual booting. There are 2 versions- WSL 1 and 2. Both are very different from each other. You can check out their Wikipedia for more details. In this setup, I’m using WSL 2 which is a default in the recent versions of Windows (post 2019). WSL 2 uses a Linux kernel– a managed virtual machine via Hyper-V that implements the full Linux kernel. As a result, WSL 2 is compatible with more Linux binaries.

• Open a new PowerShell terminal as an admin and run the below command.

  wsl –install
  For a specific default distro: wsl –install –d < name>

This will enable WSL2 and install the default distro- Ubuntu which works well for this tutorial but you may go with other distros as well. If you’re facing issues, you can checkout this link. You may have to enable certain settings.

• Set up the username and password for the distro. PS- Don’t use the default credentials like admin/admin as it’s widely available in user manuals/guides and people are aware of it thus making it more vulnerable.

Install VS Code and Docker Desktop

It’s very simple. Just download from the official sources and run the GUI installer. VSCode is the IDE we’re using and Docker Desktop basically is an app that allows users to create, run, update and use docker containers. It let’s us interact with the image repos, local images, volumes etc. For Docker Desktop, remember to check the option to start docker at startup, unless you want to explicitly start the docker service every time manually.

Also, for simplicity sake, we will be using Docker Desktop. In the future, you may want to install Docker directly on your linux distro if the need arises.

Enable plugins on VS Code

On VS Code enable the plugins:

• Remote Development- WSL This plugin lets us use VS Code to build Linux applications that run on the Windows Subsystem for Linux (WSL)
• Remote Development- Dev Containers The extension lets us use a Docker container as a full-featured development environment.
• Docker The Docker Extension Pack makes it easy to build, manage, and deploy containerized applications from Visual Studio Code.

Configuring and setting up the container

Now that we’re done with the prerequsites open a new WSL window by clicking the blue button at the bottom left side corner and choose the first option- New WSL Window. PS- I have already set up the connection hence it shows as Connect to WSL but if it’s the first time you’re setting it up it should show as New WSL Window

From here onwards we’ll be working on Linux. We want to create a folder to store our project in the WSL Filesystem. In this case, I have created it in the home directory. Run this in your terminal to create the a new directory (mkdir name) and open the directory (cd name) in the terminal.

mkdir dev-container-test && cd dev-container-test

I’m manually creating the necessary files to configure the container but you can also use templates by going to the Command Palette and selecting the “Add Dev Container Configuration Files” option.

Create a new directory with the name .devcontainer with the . and under this directory create devcontainer.json , Dockerfile and requirements.txt files.

Now let’s update the files we just created!

devcontainer.json

This file tells VSCode how to build our ebvironment. Open devcontainer.json and paste this code:

     { 
     // This gives the dev container a name and let's the machine know to build the container following the Dockerfile instructions. 
			    "name": "dev-container-test",
			    "build": { 
			    "dockerfile": "Dockerfile"
			    },
				  "customizations": {
	// Configure properties specific to VS Code. 
				    "vscode": {
	// Add extensions you want installed when the container is created.
					    "extensions": [
					    "ms-python.python",
					    "ms-python.vscode-pylance"]
				    } 
	// All ports listed here will also be available outside your development container i.e. in your machine’s localhost. By default, Docker encapsulates your application in a box with no contact to the outside world.
					"forwardPorts": [5000],
    }, 

Dockerfile:

I’m going to use the container as a virtual development environment. So I want to write a Dockerfile to build a container image, beginning with the version of Python that I want, and then add all of my dependencies into it. Open Docker file and paste the below code:

    #The base image for the container that I have taken from DockerHub (it is hardened and secure to some extent already) 
    FROM python:3.11-slim
    
    # Disable buffering for Python's standard output (stdout) and standard error (stderr) streams so that output from Python app, such as Django logs, is sent directly to the container's logs in real time.      
    ENV PYTHONUNBUFFERED=1  
     
    # Copy python requirements to the docker container and install. Here we're going to install all our libraries and depndencies. 
    
    COPY requirements.txt .
    
    RUN python -m pip install -r requirements.txt

Requirements

In this file we’ll mention all the dependencies that needs to be downloaded and their versions (optional). Keeping this very simple with only Pylint which checks for programming errors, style issues, and potential bugs

pylint

Now we should be good to build and run the docker container. Open the command palette and choose “Dev Containers: Reopen in Container”. (If you have already built a container, choose “Rebuilt and Reopen in Container” instead.)

Once the container build is over it will open a new workspace where you can start your development. At any point, you can update your config and rebuild the container.
Happy Coding!