How to Use Docker for Visual Studio Code

Docker is an open platform for developing, shipping, and running applications. It allows you to separate your applications from your infrastructure so you can deliver software quickly. Visual Studio Code is a powerful free code editor that is available on multiple platforms including Windows, macOS, and Linux. When you combine Docker with VS Code you can create a powerful development environment and containerization for consistent and reproducible workflows.

In this post, we will cover the steps of using Docker with Visual Studio Code to create, manage, and deploy containerized applications.

Getting Started

Let’s understand the basic definition and key features of Docker and Visual Studio Code:

Docker

Docker simplifies and accelerates your workflow. It uses containerization technology to allow you to package your application and its dependencies into a single container. Containers are lightweight, portable, and run consistently across various environments. Key concepts in Docker include:

1. Images: Immutable templates that define the application and its environment.
2. Containers: Instances of Docker images that are running applications.
3. Dockerfile: A script that contains instructions to build Docker images

Visual Studio Code

Visual Studio Code is a versatile code editor that supports a wide range of programming languages and frameworks. Key features include:

1. Integrated Terminal: Run command-line scripts and commands directly within the editor.
2. Extensions: Enhance functionality with a vast marketplace of plugins and extensions.
3. Debugging: Powerful tools to debug applications.
4. Version Control: Integration with Git for source control.

Setting Up Docker and Visual Studio Code

Before you can use Docker with VS Code, you need to install Docker on your Windows machine. After that open a command prompt and run the command:

docker --version

If you don’t already have Visual Studio Code installed refer to our guide on how to install Visual Code on Windows operating system. After that, open Visual Studio Code, you should see the welcome screen.

Install Docker Extension for Visual Studio Code

To integrate Docker with Visual Studio Code, you’ll need to install the Docker extension:

1. In VS Code, click on the Extensions icon in the Activity Bar on the side or press Ctrl+Shift+X.

2. Type “Docker” in the search bar.

3. Click the “Install” button next to the Docker extension by Microsoft.

4. After installation, reload VS Code to activate the extension.

Create Dockerized Application

Create a new folder for your project on your local machine. Go to “File” then “Open Folder” and select the newly created folder.

In the project folder, create a new file named Dockerfile with no extension. Add the following content to the Dockerfile. This example uses a Node.js application:

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "app.js"]

Ensure you save the file after adding the content.

Now, open the integrated terminal in VS Code using “View” and then “Terminal”, make sure you are in the project directory. Run the following command:

docker build -t my-node-app .

Run docker images to see your newly created image.

Running and Debugging Dockerized Applications

Use the following command to run the container from the image:

docker run -p 3000:3000 my-node-app

Open your web browser and go to http://localhost:3000 to see your running application.

In VS Code, go to “Run” then “Add Configuration” and select Node.js: Attach from the dropdown.

Add the following configuration to .vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Docker: Attach to Node",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/app"
        }
    ]
}

Modify your Dockerfile to enable debugging:

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000 9229
CMD ["node", "--inspect=0.0.0.0:9229", "app.js"]

Rebuild the Docker image with the debugging capabilities:

docker build -t my-node-app .

Run the container with the following command:

docker run -p 3000:3000 -p 9229:9229 my-node-app

Start the debugger in VS Code by going to “Run” then “Start Debugging” or pressing F5.

Conclusion

Using Docker with Visual Studio Code streamlines the development process, ensures consistency across environments, and enhances productivity. By following the steps outlined in this guide, you can create, run, and manage Dockerized applications efficiently. Whether you’re developing a small project or a large-scale application, the combination of Docker and VS Code provides a powerful and flexible development environment.

FAQ