Nx: How to configure & debug NestJS using vscode?

[olakara]

I am struggling to debug (use breakpoints and inspect the application flow) using vscode. Can someone share me how to configure the debug. I have tried multiple solutions available after googling. But all of them are not in Nx Workspace or with Angular.

Can someone share the launch.json / nodemon-debug.json or other related files for debugging? I would like to know how you are debugging the NestJS application in nrwl workspace

Many Thanks!!

[iangregsondev]

hi @olakara , I am having the same issue. If I placed a debugger statement then it stops.

If I place a breakpoint, it states that Breakpoint unverified and is greyed out (not red).

I can share what I have right now but its not working :-(

Did you get any further ?

    {
      "type": "node",
      "request": "attach",
      "protocol": "inspector",
      "name": "API",
      "port": 5880,
      "sourceMaps": true,
      "trace": true
    }

I just can't seem to figure it out :-(

Anybody have any suggestions ?

[olakara]

hi @appsolutegeek , good to know someone else is having this issue.. I have tried multiple things and failed. I am not an expert so not sure whats the mistake. I haven't found a solution yet :-(. I did ask the same question on other repos as well (some example repos) and nor reply.

If people are not using vscode, can someone explain how they are debugging the nestjs app in nrwl?

[iangregsondev]

I have tested a standard nestjs app used via the nest cli.... i used the same debug port and i was able to attach the debugger using the same config

So vscode is working it appears.

Of course this is run using ts-node.

[olakara]

yes, I agree. I am able to debug a nestjs application that is not in nrwl workspace. My issue is debugging in a nrwl workspace. I not able to figure that out.

[iangregsondev]

Ok I fixed it :-)

Here is what I did....

So I have a container for called projects and under that i placed an NX workspace under the directory called vscode-debug-problem.

I run ng serve from the vscode-debug-problem directory

but I launch code from the projects directory - so inside code I can see

     vscode-debug-problem
     other-dir
     other-dir2

This emulates what I am doing in real life.

My launch.json was

    {
      "type": "node",
      "request": "attach",
      "protocol": "inspector",
      "name": "API",
      "port": 5880,
      "sourceMaps": true,
      "trace": true
   }

but sure enough, attaching a debugger says the breakpoints are unverified and they never stop.

Now add the following to the launch.json above

      "cwd": "${workspaceFolder}/vscode-debug-problem"

Now attach and add a breakpoint, you will notice straight away that the breakpoint is now RED and not grey stating its unverified.

Hit an endpoint where the breakpoint is and thats it, it stops!

So check if you are doing something similar.

The way I figured this out, is that i created a standard NX project and attached a debugger and it worked - and I thought that is strange as mine doesn't. Then I noticed my directory structure is different.

Hope that helps @olakara and anybody else that finds a similar issue.

So the issue is really a vscode one and its not really an issue, its just knowing what to do - i suppose :-)

[iangregsondev]

On a side note, you can also remove "protocol" and "trace", these are no longer needed. I added them for testing etc.

[olakara]

@appsolutegeek Thanks my friend, I am able to debug now. Here is my launch.json:

 {
      "type": "node",
      "request": "attach",
      "name": "Debug API",
      "sourceMaps": true,
      "port": 7777
    }

[omidkrad]

Really, we should be able to debug out of the box after generating a new nest app. Not to have to spend the next half an hour to find a launch.json setting that works!

[Tomerl101]

this lunch.json configuration works pretty fine for me

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/src/main.ts",
  "preLaunchTask": "tsc: watch - tsconfig.build.json",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "<node_internals>/**/*.js"
  ]
}

[xamantra]

this works for me too, thank you @Tomerl101

this lunch.json configuration works pretty fine for me

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/src/main.ts",
  "preLaunchTask": "tsc: watch - tsconfig.build.json",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "<node_internals>/**/*.js"
  ]
}

[webhacking]

@Tomerl101 Thx !

[coloradocolby]

this lunch.json configuration works pretty fine for me

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/src/main.ts",
  "preLaunchTask": "tsc: watch - tsconfig.build.json",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "<node_internals>/**/*.js"
  ]
}

This worked perfectly!

Also, I'm submitting a ticket Microsoft to support lunch.json 😂

[bcldvd]

Since I struggled a lot with something so trivial as this, I thought I would add to the solutions above (of which none was ok for me).

Simply add the following options to the "serve" of your NestJs config in angular.json :

"inspect": true,
"port": 9229

In context :

"serve": {
  "builder": "@nrwl/node:execute",
  "options": {
    "buildTarget": "server:build",
    "inspect": true,
    "port": 9229
  }
}

[Ponjimon]

Since I struggled a lot with something so trivial as this, I thought I would add to the solutions above (of which none was ok for me).

Simply add the following options to the "serve" of your NestJs config in angular.json :

"inspect": true,
"port": 9229

In context :

"serve": {
  "builder": "@nrwl/node:execute",
  "options": {
    "buildTarget": "server:build",
    "inspect": true,
    "port": 9229
  }
}

And then? For me, now it starts the debugger for a second but immediately closes again and in the console I now see Waiting for the debugger to disconnect...

[bcldvd]

Do you have "auto attach" to "on" ?

[Ponjimon]

Yes

[ISimplifyComplexity]

this lunch.json configuration works pretty fine for me

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/src/main.ts",
  "preLaunchTask": "tsc: watch - tsconfig.build.json",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "<node_internals>/**/*.js"
  ]
}

@Tomerl101 you're awesome, thank you.

[Oddisey]

For anyone that is like me and was having issues going from a solution like @olakara 's:

{
     "type": "node",
      "request": "attach",
      "name": "Debug API",
      "sourceMaps": true,
      "port": 7777
    }

to a solution like @Tomerl101 's:

this lunch.json configuration works pretty fine for me

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/src/main.ts",
  "preLaunchTask": "tsc: watch - tsconfig.build.json",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "<node_internals>/**/*.js"
  ]
}

Let me break it down like a fraction for ya.

The difference between these solutions is that when using the first one, you need to start your NestJS back end on your own, and then run the debugger to watch that running application. With the second one, the dubugger actually starts your NestJS application and then attaches a watching debugger. This means that you just need to click the start button for the Nest debugger and you get the app, and it's in debug mode. I think this second method is quite nifty, so kudos to @Tomerl101 for the info. There are a couple of things I had to do when transitioning to this new solution.

1) I am using a mono-repo in Nx Workspace. This means I have many apps sitting in an apps directory. My NestJS back-end is sitting in /apps/nest (front-end is in /apps/angular) so I had to modify the program, outFiles and preLaunchTask to the following:
- "program": "${workspaceFolder}/apps/nest/src/main.ts",
- "outFiles": ["${workspaceFolder}/dist/apps/nest/**/*.js"],
- "preLaunchTask": "tsc: watch - apps/nest/tsconfig.json",
(note I have a tsconfig.json instead of a tsconfig.build.json)

2) I didn't have a Pre Launch Task set up yet. If you don't either, don't worry VS Code will help set it up for you. With your path to your tsconfig.json set in the preLaunchTask, run the debugger. VS Code should show an alert, it will complain and say "Could not find the task 'tsc: watch - apps/nest/tsconfig.json'.". Click the "Configure Task" button. It will generate a task.json file for you. Just save that file, and re-run your debugger.

That is it! Your NestJS back-end should be running in "debug mode" (ie. with a debugger attached). Below is my full launch.json, and task.json. Both of these file sit in the .vscode dir.

launch.json

{
  // 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": "node",
      "request": "launch",
      "name": "Launch Nest",
      "program": "${workspaceFolder}/apps/nest/src/main.ts",
      "preLaunchTask": "tsc: watch - apps/nest/tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/apps/nest/**/*.js"],
      "skipFiles": ["${workspaceFolder}/node_modules/**/*.js", "<node_internals>/**/*.js"],
      "port": 7777
    }
    }
  ]
}

task.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "apps/nest/tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ],
            "group": "build",
            "label": "tsc: watch - apps/nest/tsconfig.json"
        }
    ]
}

If you're getting the error Error: listen EADDRINUSE: address already in use :::3000, this means your NestJS application is still running. Make sure you kill it before running the debugger, because the debugger is what starts your NestJS app.

[chawk]

For some reason I do get debugging capabilities using the lunch.json file but It's throwing 500 errors when debugging and not when manually firing via package.json script. I'm trying to track down the issue at the moment.

[chawk]

** update. I figured out my issue had to do with the fact that the debugger is reading files from the dist folder and not from src. I had to copy static assets as well as handlebars templates manually to the dist folder. I tried to do this via the nest-cli but it didn't seem to work. I'm going to look into having webpack move these files during the build process.