atlassian-connect-express 6: debug backend in VS code

[#1]

Hello!

I this article we will learn how to debug the backend of our application in Visual Studio Code (VS code).

The code for our application will be based on this article.

You can find the source code for this article here.

You can find the video here.

First attempt

To debug our application in VS code select the backend/app.js file:

Now open the “RUN AND DEBUG” tab, push the “Run and Debug” button and chose Node.js in the list:

And we have an error:

/usr/local/bin/node ./backend/app.js
Process exited with code 1
(node:1411) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

The problem is that when we launch our app we pass the following parameter:

-r esm

It means that we also have to pass this parameter to our debugger.

Second attempt

Click on the “create a launch.json file” link (choose Node.js item in the list, which you will see after you clicked the link):

A launch. json file will be created:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}"
        }
    ]
}

Now we need to do 3 things:

1. We start our debugger from the root folder that is why we need to set the current folder for the debugger as the backend folder: “cwd”:”${workspaceFolder}/backend”
2. We need to say what file to run: “program”: “${workspaceFolder}/backend/app.js”
3. We need to pass the -r esm parameter: “runtimeArgs”: [“-r”,”esm”]

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/backend/app.js",
            "cwd":"${workspaceFolder}/backend",
            "runtimeArgs": ["-r","esm"]
        }
    ]
}

Push the “Launch Program” button:

Now our app started but then we received an error:

Watching atlassian-connect.json for changes
backend/node_modules/atlassian-connect-express/lib/internal/logger.js:16
Uncaught Error: listen EADDRINUSE: address already in use $PORT
/usr/local/bin/node -r esm ./app.js
Process exited with code 1

What happened?

Third attempt

The problem is that we defined several parameters in the backend/config.json file, which are taken from environment variables:

"port": "$PORT",
"localBaseUrl": "$APP_URL",

When we run the debugger, the debugger does not read this variables from our environment. We need to pass our parameters in the launch.json file:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/backend/app.js",
            "cwd":"${workspaceFolder}/backend",
            "runtimeArgs": ["-r","esm"],
            "env": {
                "PORT": "3000",
                "APP_URL": "https://1b26d2f93ae5.ngrok.io",
            }
        }
    ]
}

Now let’s push the “Launch Program” button again. Our application is running now:

Test

Let’s test that everything works.

Install our app to Bitbucket and set a breakpoint in the backend/routes/index.js file:

Open the Example Page menu item:

And our app will stop on the breakpoint which we set:

Everything works as expected!

[M Amine]

Excellent content, thank you @Alexey Matveev