Integrating Docker with Visual Studio Code: A Step-by-Step Guide

Integrating Docker with Visual Studio Code (VS Code) significantly enhances the development experience, allowing developers to efficiently create and manage Docker files, view containers and images visually, and access logs or terminals with ease. This article provides a comprehensive guide on setting up Docker in VS Code through the Docker extension.

How to Install the Docker Extension in VS Code

Prior to installing the Docker extension, ensure that both Docker and Visual Studio Code are properly configured on your machine. To begin, open the Extensions view in VS Code, search for “Docker, ” and install the official Docker extension provided by Microsoft.

Once the installation is successful, you will notice a Docker/Containers icon appear in the lower-left corner of your editor, indicating that the Docker Explorer is now available.

Establishing a Connection Between Docker Desktop and VS Code

When Docker Desktop is running, the Docker extension with VS Code connects seamlessly. Typically, no additional configuration is required unless your Docker setup involves special configurations (e.g., remote hosts or WSL integration).

To verify the connection, click on the Docker/Containers icon to launch the Docker Explorer. There, you can observe your running and stopped containers, along with images, registries, volumes, and networks.

Managing Containers, Images, and Volumes Directly from VS Code

With Docker fully integrated into VS Code, managing container tasks has never been easier. You can conveniently view both running and stopped containers in the CONTAINERS section.

Additionally, right-clicking on any container will give you options to start, stop, restart, or remove it with just a click.

You can also pull new images, build images from existing setups, or clean up unused images easily. For instance, to delete an image that is no longer needed, simply right-click on it and select Remove.

In addition, managing volumes linked to your containers is straightforward—right-click on the desired volume to inspect or modify it.

You can also explore and manage networks, registries, Docker contexts, and gain access to a help and feedback section, further optimizing your development workflow.

Creating and Running a Containerized Application in VS Code

As a hands-on example, let’s build a simple Node.js Express application to illustrate the capabilities of the Docker extension. Start by creating a new folder in VS Code for your project. Within this folder, create a file named index.js and input the following code:

This basic code snippet establishes a small Express app listening on port 4000, responding with the message “Welcome to our Express app!” when the root URL (/) is accessed. It sets a foundation for testing your Dockerfile.

Next, you will need a Dockerfile. Instead of manually creating a Dockerfile and specifying its instructions, the Docker extension can facilitate this process. Open the Command Palette by pressing ⇧⌘P on Mac or Ctrl + Shift + P on Windows and enter the command Add Docker files to Workspace.

Select Node.js as your application platform from the options provided.

Point to the “package.json” file located within your project root. This file is the primary configuration file for your application, and it will guide the Docker extension in generating essential Docker-related files.

Next, indicate the port number your app will utilize so Docker can appropriately expose it.

Select Yes when prompted to include the Docker Compose file.

The Docker extension will now generate a Dockerfile, a “.dockerignore” file, and a “compose.yaml” file, depending on your selection.

To proceed with the creation of your Docker image, right-click on the Dockerfile and select Build Image, or alternatively, run Docker Images: Build Image from the Command Palette.

After the build process, navigate to the Images section in the Docker Explorer to see your newly created project reflected there:

Now, to run the image, open the Command Palette and execute container images: run, or simply right-click on your image and select Run.

Select your latest image from the displayed list.

Finally, you can validate that your application is running by checking the Containers section in Docker Explorer.

To access your app, right-click on the running container in Docker Explorer and select Open in Browser.

As a result, you will be able to see the container in action with your application accessible through the previously specified port.

Conclusion

The integration of Docker within Visual Studio Code streamlines the development process, allowing developers to efficiently construct, execute, and control containers directly from their coding environment. After completing the setup, you will have seamless access to create Docker files, navigate through containers and images, and view logs or terminal outputs with just a click. This integration not only simplifies the running and testing of applications but also maintains an organized and productive workflow.

Source & Images