Introduction

NestJS is a powerful and versatile framework for building efficient and scalable server-side applications using TypeScript and Node.js. A well-configured development environment is crucial for maximizing your productivity and ensuring a smooth development experience. This guide outlines the steps to set up your environment for efficient NestJS development.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (LTS version recommended): Download from nodejs.org. NestJS requires Node.js to run.
• npm (Node Package Manager) or yarn: These come bundled with Node.js.
• Code Editor (Recommended: VS Code): Select a code editor. VS Code has excellent TypeScript support and many helpful extensions for NestJS development. Other options include Sublime Text, Atom, or WebStorm.

Installing the NestJS CLI

The NestJS CLI simplifies project creation and management. Install it globally using npm or yarn:

npm install -g @nestjs/cli

Or, using yarn:

yarn global add @nestjs/cli

Creating a New NestJS Project

Use the NestJS CLI to create a new project:

nest new my-nest-project

Replace my-nest-project with your desired project name. The CLI will prompt you to choose a package manager (npm or yarn). Select your preferred option.

Navigate to the project directory:

cd my-nest-project

Configuring Your Code Editor (VS Code Example)

VS Code is a popular choice for NestJS development. Here's how to configure it for an optimal experience:

Recommended Extensions:

• ESLint: For code linting and formatting. Install the official ESLint extension.
• Prettier: For code formatting. Install the Prettier extension.
• TypeScript: VS Code has built-in TypeScript support, but ensure it's enabled.
• NestJS Snippets (Optional): Provides useful code snippets for common NestJS patterns.
• Debugger for Chrome/Edge: Facilitates debugging your NestJS application in Chrome or Edge.

Configuration (.vscode/settings.json):

Create a .vscode directory in your project's root and add a settings.json file. This file allows you to customize VS Code's behavior for your project.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "files.eol": "\n",
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Explanation of settings:

• editor.formatOnSave: Automatically formats the code when you save the file.
• editor.defaultFormatter: Specifies Prettier as the default formatter.
• eslint.validate: Configures ESLint to validate JavaScript, JSX, TypeScript, and TSX files.
• files.eol: Ensures consistent line endings (important for cross-platform development).
• typescript.tsdk: Specifies the TypeScript SDK to use (the one installed in your project's node_modules). This is important if you have different TypeScript versions globally and locally.
• editor.codeActionsOnSave: Automatically fixes ESLint issues when you save the file.

Debugging

Debugging is an essential part of development. Here's how to configure debugging in VS Code for NestJS:

Creating a Launch Configuration (.vscode/launch.json):

Create a launch.json file in the .vscode directory. This file defines debugging configurations.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Nest Debug",
      "program": "${workspaceFolder}/src/main.ts",
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "preLaunchTask": "build",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ],
      "sourceMaps": true,
      "smartStep": true
    }
  ]
}

Explanation of settings:

• type: Specifies the debugger type (node for Node.js).
• request: Specifies the type of request (launch to start the application in debug mode).
• name: A descriptive name for the configuration.
• program: The entry point of your application (usually src/main.ts).
• cwd: The current working directory (${workspaceFolder} refers to the project root).
• console: Specifies where the console output should be displayed (integratedTerminal uses the VS Code terminal).
• preLaunchTask: A task to run before starting the debugger (build refers to the TypeScript compilation task).
• outFiles: Specifies the output files generated by the TypeScript compiler (necessary for source map debugging).
• sourceMaps: Enables source map support for debugging TypeScript code.
• smartStep: Enable smartStep to automatically step over generated code.

Creating a Build Task (.vscode/tasks.json):

The preLaunchTask in launch.json refers to a build task. Create a tasks.json file in the .vscode directory:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "npm",
      "script": "build",
      "group": "build",
      "problemMatcher": "$tsc"
    }
  ]
}

This task uses the build script defined in your package.json file (which usually runs tsc). You can customize this task to suit your specific build process.

Debugging Steps:

1. Set breakpoints in your TypeScript code.
2. Press F5 or click the debug icon in VS Code's activity bar.
3. Select the "Nest Debug" configuration.
4. The debugger will attach to your running NestJS application, and you can step through your code.

Nodemon for Automatic Restart

Nodemon automatically restarts your application whenever you save a file, which significantly speeds up development. Install it as a development dependency:

npm install --save-dev nodemon

Or, using yarn:

yarn add -D nodemon

Update package.json:

Modify your package.json file to use nodemon for development:

 "scripts": {
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/e2e/jest-e2e.json"
  } 

The important script is "start:dev": "nest start --watch". This tells NestJS to start the application in watch mode, which uses Nodemon under the hood to restart on file changes.

To use nodemon directly (e.g., for more complex configurations), you could change the start:dev script to something like:

"start:dev": "nodemon -r tsconfig-paths/register -r ts-node/register src/main.ts"

However, using nest start --watch is generally simpler for most NestJS projects.

Conclusion

By following these steps, you'll have a robust and efficient development environment for building NestJS applications. Remember to customize your environment to suit your individual preferences and project requirements. Happy coding!