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

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:

Screenshot 2021-05-16 at 08.35.10.png

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

Screenshot 2021-05-16 at 08.38.20.png

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):

Screenshot 2021-05-16 at 08.44.04.png

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:

Screenshot 2021-05-16 at 08.44.04.png

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:

Screenshot 2021-05-16 at 09.04.08.png

Test

Let’s test that everything works.

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

Screenshot 2021-05-16 at 09.06.04.png

Open the Example Page menu item:

Screenshot 2021-05-16 at 09.08.58.png

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

Screenshot 2021-05-16 at 09.09.57.png

Everything works as expected!

1 comment

Comment

Log in or Sign up to comment
M Amine
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
June 4, 2021

Excellent content, thank you @Alexey Matveev 

TAGS
AUG Leaders

Atlassian Community Events