Debugging Node.js Dockerized Applications with Visual Studio Code

When it comes to developing and deploying Node.js applications, Docker is an excellent tool that can make the process a lot smoother. Docker allows you to package your application along with all its dependencies into a single container, which can be easily deployed to any environment. However, debugging Dockerized applications can be a bit tricky, especially for beginners. In this article, we will discuss how to debug Node.js Dockerized applications using Visual Studio Code, one of the most popular code editors.

Prerequisites

Before we dive into debugging, make sure you have the following tools installed on your system:

• Docker
• Visual Studio Code
• Node.js
• The "Docker" extension for Visual Studio Code

Setting up the Project

For the purpose of this article, we will use a simple Node.js application that calculates the square of a given number. To Dockerize this application, we will create a Dockerfile in the root directory of the project with the following contents:

FROM node:14

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "start"]

This Dockerfile pulls the Node.js version 14 image from Docker Hub, sets the working directory to /app, copies the package.json file, installs the dependencies, copies the entire project directory, and runs the npm start command.

Next, we will build the Docker image using the following command:

docker build -t my-node-app .

This command builds the Docker image with the tag "my-node-app" using the Dockerfile in the current directory.

Now, we can run the Docker container using the following command:

docker run -p 3000:3000 -v $(pwd):/app -w "/app" my-node-app

This command maps port 3000 on the host to port 3000 in the container, mounts the current directory to /app in the container, sets the working directory to /app, and runs the Docker image with the tag "my-node-app".

To verify that the application is running, open a web browser and navigate to http://localhost:3000/square/5. You should see the result "25" on the screen.

Debugging with Visual Studio Code

To debug the Node.js application running inside the Docker container, we will use the "Attach to Docker" functionality of the "Docker" extension for Visual Studio Code.

First, open the project directory in Visual Studio Code. Then, open the "Run and Debug" panel by clicking on the "Run" icon in the left-hand side menu and then selecting the "Run and Debug" option.

Next, click on the "create a launch.json file" link at the top of the panel. This will create a new launch.json file in the .vscode directory of your project.

In the launch.json file, add the following configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "Attach to Docker",
      "request": "attach",
      "port": 9229,
      "address": "localhost",
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app",
      "protocol": "inspector",
      "restart": true,
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

This configuration specifies that we want to attach the debugger to a Node.js process running inside a Docker container. The "port" and "address" options should match the ones specified in the Docker run command. The "localRoot" specifies the root directory of the project on the local machine, while "remoteRoot" specifies the root directory of the project inside the Docker container. The "skipFiles" option specifies the files that should be skipped while debugging.

Now, start the application in the Docker container by running the following command:

docker run -p 3000:3000 -v $(pwd):/app -w "/app" -p 9229:9229 --expose 9229 my-node-app

This command adds the "-p 9229:9229 --expose 9229" options to expose the Node.js debugger port and map it to the same port on the host.

Next, set a breakpoint in the Node.js code by clicking on the left-hand side of the line number in the code editor.

Finally, start the debugger by selecting the "Attach to Docker" configuration in the "Run and Debug" panel and clicking on the "Start Debugging" button.

Visual Studio Code will now attach the debugger to the Node.js process running inside the Docker container and stop at the breakpoint you set earlier. You can now inspect variables, step through the code, and diagnose any issues.

Conclusion

Debugging Node.js Dockerized applications can seem daunting at first, but with the right tools and configurations, it can be a relatively simple process. In this article, we discussed how to use Visual Studio Code to attach the debugger to a Node.js process running inside a Docker container. By following the steps outlined above, you should now be able to debug your own Node.js Dockerized applications with ease.