DEV Community: Pantelis Papasavvas

Debug a NestJS application in WebStorm

Pantelis Papasavvas — Mon, 10 Nov 2025 22:02:39 +0000

NestJS is a progressive framework that helps developers build scalable, maintainable, and testable backend applications using modern JavaScript and TypeScript.

It's built on top of Express, but optionally you can configure it to use Fastify as well, and embraces concepts like dependency injection, modularity, and decorators, making backend development cleaner and more predictable.

But even with a powerful framework like NestJS, there is one skill every developer needs — and that is debugging.

🧩 Why debugging matters

As developers, we face many unexpected issues daily — from logical bugs to missing async calls.

Adding console.log() everywhere might work for quick fixes, but it's far from efficient.

This is where real debugging comes into play.

Setting up proper debugging allows you to:

Pause the code execution where you want
Inspect variables in real time
Step through the logic line by line

However, if you try to set a breakpoint in a NestJS project, you’ll notice that the execution doesn't stop where you expect.

So let’s fix that.

⚙️ Setting up the Debug Configuration in WebStorm

To debug a NestJS app in WebStorm, we need to add a Run/Debug configuration.

🔹 Open the configuration window

In the top menu, go to:

Run → Edit Configurations

This will open the configuration window — something like this:

🔹 Create a new Node.js configuration

Press the ➕ (plus) button in the top-left corner and select Node.js.

Then give your configuration a name like NestJS Debug or something that makes sense to you.

🔹 Configure the Node.js settings

Here’s what each field means and what to fill in:

Node Interpreter → This is the Node version used by your project.

Choose Project node (some path) — it’s usually preselected.
Working Directory → The root folder of your NestJS project (where your nest-cli.json lives).
File → The path to the Nest CLI file. Normally, you will find it at:

  node_modules/@nestjs/cli/bin/nest.js

This is the executable that runs your application.

Application Parameters → These are the arguments that tell Nest CLI what to do. You can type:

  start --debug --watch

🔹 Understanding the parameters

Let’s break down what these parameters actually do:

start: Tells NestJS to start the application.
--debug: Enables debugging mode, allowing WebStorm to attach breakpoints.
--watch: Enables live reload — every time you save a file, NestJS restarts automatically.

So, in simple terms, we are telling Nest CLI:

“Start my app in debug mode and keep watching for code changes.”

🔹 Save and start debugging

Now everything is set
Press OK to save your configuration, set your breakpoints, and hit the Debug button.

WebStorm will launch the application in debug mode, and you’ll be able to pause the execution exactly where you want it.

🧠 Conclusion

Debugging is not just about fixing bugs — it’s about understanding how your code actually works.

By applying this setup, you’ll spend less time guessing and more time improving your code.

If you found this helpful, leave a ❤️ or a comment — it helps other developers discover it too.

Happy debugging! ⚡

Angular Components Lifecycle - Basics

Pantelis Papasavvas — Mon, 29 Jan 2024 14:30:04 +0000

As developers working with Angular, we rely on its lifecycle hooks to manage how our components are created, updated, and destroyed. Understanding these hooks is key to building reliable and high-performance applications.

In this article, we'll explore these essential lifecycle hooks offered by Angular, unraveling their roles and significance in the development process of robust, dynamic applications.
Let's start

constructor

This is a standard Javascript class constructor.
Runs when Angular instantiates the component.

ngOnInit

The ngOnInit runs when Angular has initialized the component's inputs.
It runs only once before the component's template is initialized.
Inside ngOnInit, is a good place to fetch your initial data.

ngOnChanges

ngOnChanges runs every time that an input value is changed.
This happens before the template is initialized and the first ngOnChanges will run before the ngOnInit.
Here you can update the component's state based on input values.

The ngOnChanges accepts an argument of type SimpleChanges.
This is an object that contains the input's previous value, its current value, and a flag for whether this is the first time the input has changed.

ngDoCheck

It runs every time Angular checks a component for changes.
With this hook, we can manually check for changes outside of Angular's change detection and change the state of a component.

Using this hook may affect the performance of the page and for that reason, we need to use it if we don't have anything else to do.
In contrast with ngOnChancges, the first ngDoCheck runs after ngOnInit.

ngAfterViewInit

As its name says, that hook runs after the template and its children have been initialized, and runs only one time.

ngOnDestroy

This method runs once when the component is destroyed.
This means that the component is not available in the DOM anymore.
Keep in mind that if you have any subscriptions in the component you need to unsubscribe them. This is a good place to do that.

Add spinner in Angular application with ngx-spinner

Pantelis Papasavvas — Mon, 23 May 2022 21:47:37 +0000

NgxSpinner is a library with more than 50 different loading spinners.
It supports Angular 13 but is available and for older versions.

Usually we want to use spinners to show that something happens and inform the user that our application is working.

I use spinners when an API call is in progress.
In this article, I am going to show a simple example of how to use spinners and I ll make use of setTimeout function.
Of course you can add the spinner in a service or in your interceptor.

Installation

In order to use it you must to install it.
ngx-spinner is available via npm or yarn

Open a console in your working directory
If you prefer npm type the following

$ npm install ngx-spinner --save

if you prefer yarn type

$ yarn add ngx-spinner

There is also an option to add the spinner using angular-cli

$ ng add ngx-spinner

Imports

The first thing we need to do is to add css animation files in angular.json

{
  "styles": [
    "node_modules/ngx-spinner/animations/ball-beat.css" 
  ]
}

After doing that we need to import BroswerAnimationModule and the NgxSpinnerModule in the root module. Usually this will be the AppModule.

So in our app.module.ts we need to add the following

import { NgxSpinnerModule } from 'ngx-spinner';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Also we need to import CUSTOM_ELEMENT_SCHEMA from @angular/core otherwise you will see an error in the console.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

and then below the imports array we need to add schemas array and pass CUSTOM_ELEMENT_SCHEMA there.

Now our app.module.ts it looks like below

@NgModule({
  imports: [
    BrowserAnimationsModule,
    NgxSpinnerModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Use

One last thing we need to import is the ngx-spinner service in order to use the functions that the service provides to us.
Inject the service via constructor and use it on ngOnInit.
So our app.component.ts will looks like below

import { NgxSpinnerService } from 'ngx-spinner';

class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) {}

  ngOnInit() {
    this.spinner.show();
    setTimeout(() => {
      this.spinner.hide();
    }, 5000);
  }
}

I use setTimeout in order to show how we can close the spinner.
In this case the spinner will close after 5 seconds.

Now that we setup everything we can use the spinner in our template like this

<ngx-spinner type="ball-beat"></ngx-spinner>

Thanks for reading and I am waiting for your comments.

Angular material table remove element by index with paginator

Pantelis Papasavvas — Fri, 07 Jan 2022 08:21:19 +0000

The easy way to implement this is to take the index of the row and apply the filter or the splice method to the dataSource.
Ideally we are going to create a click on the delete button and then we are going to get the row index. After that and with the row index we are going to filter the dataSource to exclude the record with the same index as the index that we get from the click event.
At this phase our code it will like look like this

this.dataSource.data = this.dataSource.data
  .filter(item, index => index !== selectedIndex );

This works fine in all cases if we don’t have pagination on our material table.
So what happens in the case that we want to delete a record that it is on the second or the third page of the table and not in the first page?

The Problem

The problem is that, when we have pagination on the material table, the row Index starts from zero in every page. For example, the first element of the first page has index 0 and the first element of the second page has again index 0. Actually, every first element on every page has index equals to 0.

One solution to this is to follow the dataSource index.
So the only thing that we need to do is to calculate the index every time that we want to remove an element.
So from ngAfterViewInit we have available the table paginator

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
}

With this we have access in some properties that paginator has. The properties that we want here is the pageIndex and the pageSize.
Then we can calculate the rowIndex and will be

rowIndex + (pageIndex * pageSize)

Now we can create a function like below to remove the record from our table

delelteRecord(){
 const { pageIndex, pageSize } = paginator;
 const removeIndex = parentIndex + (pageIndex * pageSize);
 return dataSource.data.filter((i, index) => index !== 
 removeIndex);
}

Now the rowIndex will follow the dataSource index and we are ready to apply the filter method in our dataSource to get the new dataSource and display it to the screen.