debug nestJS application with nodemon in VS Code

If we want to work in the debug mode, with a better chance to see what is happening in the code, we need to use "nodemon" with dedicated a "nodemon.json" configuration file to run our development "nestjs" server with the ts-node module hooking up the typescript compiler.

The steps that worked for me are:

• Install nodemon and ts-node:

npm i --save-dev nodemon ts-node

• Next, add a nodemon.json file with debug and ts-node support in the root of your project:

file: (project root) nodemon.json

• and insert this config. JSON text:

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "node --inspect-brk -r ts-node/register src/main.ts"
}

• Next adjust file: package.json - section: "start:debug"

file: (project root) package.json

• The original value typically is:

...
> "start:debug": "nest start --debug --watch",
...

• Change it to:

...
> "start:debug": "nodemon --config nodemon.json"
...

• Now, in VSC (Visual Studio Code) make sure that you can see on the very bottom status bar:

  "Auto Attach: On"

if not, on your keyboar press the keys:

Ctrl + Shift + p

to open the Command Palette, and paste in this command:

Debug: Toggle auto attach

and press Enter.

Now you should see the:

"Auto Attach: On"

• Now debugging with break points should work.

• Start with placing a break point in the beginning of your program code
  (to make sure the flow does not end before your breakpoint ...)

file: (project root) 'main.ts'

> function:  bootstrap() {

    console.log('test'); // -- place break point here

  // ... other code ...
}

• In VSC (Visula Studio Code) select menu item:

Start debugging (or F5)

and select Node.js as the Environment option in the popup menu.

The breakpoint should be caught now in the bootstrap() function.

I run this command:

npm run start:dev

Try this nodemon config:

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register src/main.ts"
}

and then you can run: nodemon --config nodemon.json

Nodemon is only for Nodejs. To use hot reload in Nestjs do the following:

STEP1: First install the required packages:

 npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

STEP2: Create a webpack-hmr.config.js file in the root directory of your application

add code:

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
    ],
  };
};

STEP3: To enable HMR, open the application entry file (main.ts) and add the following webpack-related instructions:

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

STEP4: To simplify the execution process, add a script to your package.json file.

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"

STEP5: Now simply open your command line and run the following command:

 npm run start:dev

STEP6: Final Ctrl+S to Hotload