Integrate Dev Containers with VS Code using Docker

Containers & its usability in real world use cases have become very popular & can be used in almost every domain.Today, we’ll explore the core concept of dev containers & its usability in developing applications. Before we jump into dev containers, let's first understand what are containers

Containers

Containers are lightweight, portable, and executable software packages that include everything needed to run a piece of software, including the code, runtime, libraries, and system tools. They provide a consistent and isolated environment for applications to run, making it easier to deploy and manage software across different computing environments.

Docker is one of the most popular containerization platforms. It allows developers to package their applications and their dependencies into a container image, which can then be deployed and run consistently across various environments. Docker uses containerization technology to create and manage these containers.

What are Dev containers

Dev containers, short for development containers offer a solution of creating a consistent and reproducible development environment.These containers utilize technologies like Docker to encapsulate the entire development stack, including runtime, dependencies, libraries, and tools.

 One of the key advantages of dev containers is their integration with popular code editors, such as Visual Studio Code, allowing developers to seamlessly define and use these containers within their preferred development environment.Dev containers support various programming languages and frameworks, enabling developers to tailor the environment to the specific requirements of their projects. 

The configurations can be stored alongside the project code in version control systems, ensuring that the development environment settings are easily shareable and reproducible.

Setting up our dev containers in VS Code

Setting up development containers in Visual Studio Code (VS Code) is a streamlined process that leverages the power of containerization to provide a consistent and isolated development environment.Install the "Remote Development" extension for VS Code. This extension allows you to work with development containers.

In our project folder, create a .devcontainer folder. This will help VS Code detect a dev container.For our initial example, let's establish a Python development environment. Begin by crafting a Dockerfile within the .devcontainer directory and input the subsequent code:

1FROM python:3.9-alpine3.18

Proceed by generating a devcontainer.json file within the .devcontainer directory, encompassing the provided code snippet:

1{
2  "name": "Python",
3  "build": {  
4     "dockerfile": "Dockerfile" 
5   }
6}

After this, navigate to the lower-left corner of your VS Code window, where you will find an icon. Hovering over this icon should reveal a tooltip indicating "Open a remote window." Click on this icon to initiate the remote development environment.

Select “Reopen in Container” to launch the dev environment. It will take some seconds but VS code would launch the dev container. A pop would appear at the bottom indicating that the dev container has launched.

After completing these steps, open a new terminal in VS Code. The command prompt you observe should differ from your regular prompt. It would appear to be "/workspaces/project #" or "root@container-hash." which would be different than usual.Proceed by creating a directory named "python-demo" and a file within it titled "demo.py" Insert the following code into this file and save it:

1print('python dev container')

Now in the VS Code terminal, run the following command python ./python-demo/demo.py and it will print out the string “python dev container”.

Congratulations! You've successfully created and utilized your first dev container! Notice that any modifications made to files within your dev container persist in the actual files. This seamless integration allows you to work within the container environment while ensuring that changes are reflected in the underlying files.

Setting up Multiple dev containers in one Project

Setting up multiple development containers in a project involves leveraging the "Remote - Containers" extension in Visual Studio Code.

 For projects requiring multiple containers, we would require to create additional devcontainer.json files. This approach streamlines the management of distinct development environments tailored to specific project requirements.

The "Remote - Containers" extension in Visual Studio Code facilitates the seamless switching between these containers, allowing for efficient management and collaboration in a multi-container development setup.

Let's introduce a Node development container alongside the already established Python container. This necessitates a structural adjustment by creating a directory named "python" within the ".devcontainer" directory. Subsequently, we will relocate the current Dockerfile and devcontainer.json files into this newly formed "python" directory. This organisational modification allows for a clear separation of configurations, facilitating the coexistence of distinct development environments within the project.

Next, establish an additional directory named "node" within the ".devcontainer" directory and include a Dockerfile and a devcontainer.json file within it. Within the Dockerfile, insert the following code to specify the configuration for the Node development environment.

FROM node:20

In the devcontainer.json file, add the following code:

1{
2"name": "node-demo",
3"build": {
4"dockerfile": "Dockerfile"
5}
6}

Open the command palette again and select “Reopen in Container”. The palette will show multiple containers for Python and Node separately.By selecting "node-demo," the Node Dockerfile is applied, and for "Python" the Python Dockerfile is used. This setup enables the existence of several independent dev containers, each updatable without impacting others. This separation streamlines the management of diverse development environments within the project.

You can test the working of node environments using a few commands in the terminal. Create a node-js-demo directory similar to the python-demo and directory and create a file named index.js. Add the following code in the file 

1console.log('this is node in dev container')

Run “node ./node-js-demo/index.js” in the terminal.

Great! Now you are running multiple dev containers in a single project.

Conclusion

In conclusion, dev containers represent a transformative leap in the realm of software development, offering a streamlined and reproducible environment for coding across diverse projects. As technology continues to evolve, the demand for flexibility, scalability, and consistency in development workflows becomes increasingly apparent. Dev containers address these challenges by providing a standardized, containerized environment that encapsulates dependencies, configurations, and tooling, ensuring a seamless experience for developers regardless of their local setup. You can check out the entire code of this article in this GitHub Repo