Debugging NodeJS Typescript App using Nodemon

Nodemon is a tool that helps in developing Node.js applications by automatically restarting the node application when changes are detected in the file system. In this article, we'll walk through the steps to set up a nodemon.json configuration to debug a Node.js TypeScript application using the tsconfig.json settings to debug with source code.

• Prerequisites:Node.js installed on your machine
• TypeScript installed on your machine
• Nodemon installed on your machine

Step 1: Create a Node.js TypeScript project

Create a new Node.js TypeScript project by creating a new folder and running the following command in your terminal:

npm init -y

Next, install the necessary dependencies for the project by running the following command:

npm install typescript @types/node nodemon --save-dev

Create a tsconfig.json file in the root folder of your project, and add the following configuration:

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "sourceMap": true,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": [
        "src/**/*"
    ]
}

This configuration will tell TypeScript to compile the TypeScript files to JavaScript, and output the compiled files to the "dist" folder. The "rootDir" field specifies the root folder of your TypeScript source files.

Step 2: Configure nodemon

Create a nodemon.json file in the root folder of your project, and add the following configuration:

{
    "watch": ["src"],
    "ext": "ts,json",
    "ignore": ["src/**/*.spec.ts"],
    "exec": "ts-node --files --require tsconfig-paths/register src/index.ts"
}

This configuration will tell nodemon to watch the "src" folder for changes, and ignore any test files. The "exec" field specifies the command to run when nodemon restarts the application. The "ts-node" package is used to run the TypeScript files directly, without needing to compile them to JavaScript. The "tsconfig-paths" package is used to handle module resolution when using paths specified in the tsconfig.json file.

Step 3: Start the development server

Start the development server by running the following command in your terminal:

This will start the nodemon process and begin watching for changes to your files.

Step 4: Set up debugging

Open your Node.js TypeScript project folder in your preferred code editor and create a new launch.json file in the .vscode folder. Add the following configuration to the file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug nodemon",
            "type": "node",
            "request": "attach",
            "restart": true,
            "protocol": "inspector",
            "port": 9229,
            "localRoot": "${workspaceFolder}/dist",
            "remoteRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

This configuration will tell your code editor to attach to the nodemon process running the application, and enable debugging using the source maps generated by TypeScript. The "localRoot" field should be set to the folder containing the compiled JavaScript files. The "outFiles" field should be set to the folder containing the transpiled JavaScript files.

Step 5: Start debugging

To start debugging, run the nodemon command in your terminal, and then select the "Debug nodemon" configuration in your code editor's debug panel. This will attach the debugger to the nodemon process and allow you to set breakpoints and step through your TypeScript code.

Conclusion

Setting up nodemon to debug a Node.js TypeScript application with source code debugging is a simple process that can greatly improve your development workflow. With the right configuration, you can quickly and easily debug your code and ensure that your application is running smoothly. Follow the steps outlined in this article, and you'll be up and running in no time!