About debug NestJS in Nx using WebStorm

Updated

This issue (for WebStorm) has been solved and explained below, and @Areen3 also gives a comment for VSCode

Prerequisites

• I am running the latest version
• I checked the documentation (nx.dev) and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

Sorry for not asking question on Stack Overflow because I think it might be a common issue and GitHub is a better place to share these information.

• As mentioned in title, I’d like to migrate from Angular + NestJS to Nx but I cannot set up debug environment as I did in pure NestJS demo project.
  • I wonder if there could have some official tutorials about how to debug using common IDEs/editors like for VSCode or WebStorm (e.g., put on the https://nx.dev/)
    • Or maybe if I just miss one !?
• Here’s how the original NestJS works as the screenshot below.
  • The debugger stop at the breakpoint when getting request in the *.controller.ts file as expected.

Current Behavior

• I’ve tried to use the same way to debug Nx-NestJS project, but I got 2 results as shown below.
  • I wonder if the only way to debug is using the compiled dist/api/main.js, or I can do it in the original *.controller.ts file?
  1. Using original *.controller.ts that failed due to import issue
  2. Using compiled dist/api/main.js that works but quite tricky

Thanks for your help 😃

[tommyc38]

For anyone else wanting to know how to debug NestJs with WebStorm, here are a few tips:

When you run nx serve "nest-app-goes-here" you will see that WebStorm automatically creates a debugging server. Note which port these are listening on.

Next, create a run configuration in WS and select Attach to Nodejs/Chrome and create a new configuration by adding the port number. Now add your breakpoints and click on one of the debuggin links above which will open the debugger window in WS. Now use a rest client to send a request to trigger a breakpoint and it should work as expected.

You can also edit your serve configuration in your angular.json file (it maybe called something else if you aren’t using angular) by adding `port: “port number goes here - 9229 is standard though”. Then change your WS run configuration to use this port and now anytime you serve the application, all you need to do is click on the debugger link to launch the debugger and it should work without needing to change the port number in your run configurations (Nx automatically assigns a random open port each time the app is initially launched).

[Areen3]

I had similar problem but under VSCode You have right it is from node

problem was with working directory this is exlained in https://blog.logrocket.com/es-modules-in-node-today/

when I set properly working directory in VSCode using: these errors desapear