First NestJS application - Step-by-Step Execution

Concept Flow - First NestJS application

Start NestJS CLI

↓

Generate new project

↓

Create main.ts (entry)

↓

Define AppModule

↓

Define AppController

↓

Define AppService

↓

Bootstrap application

↓

Listen on port

↓

App ready to accept requests

This flow shows how NestJS starts from CLI project creation, sets up modules, controllers, and services, then boots the app to listen for requests.

Execution Sample

NestJS

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

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

This code boots the NestJS app by creating it from AppModule and starts listening on port 3000.

Execution Table

Step	Action	Evaluation	Result
1	Call bootstrap()	Function starts	bootstrap function invoked
2	NestFactory.create(AppModule)	Creates app instance	App instance created with AppModule
3	app.listen(3000)	Start server on port 3000	Server listening on port 3000
4	bootstrap() completes	App running	App ready to accept requests

💡 bootstrap function completes after app starts listening on port 3000

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
app	undefined	App instance created	Server listening	Server running

Key Moments - 2 Insights

Why do we use async/await in bootstrap()?

Because NestFactory.create() and app.listen() return promises, we await them to ensure the app is fully created and listening before continuing, as shown in execution_table steps 2 and 3.

What is AppModule's role in this process?

AppModule defines the root module of the app, telling NestJS what controllers and providers to load. It's passed to NestFactory.create() at step 2 to build the app structure.

Visual Quiz - 3 Questions

Look at the execution table, what is the state of 'app' after step 2?

A Server listening

B App instance created

C Undefined

D App stopped

💡 Hint

Check the variable_tracker row for 'app' after Step 2

At which step does the server start listening on port 3000?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Action' and 'Result' columns in execution_table

If we remove 'await' before app.listen(3000), what happens?

A App will not start listening

B AppModule won't load

C bootstrap() may complete before server is ready

D NestFactory.create() fails

💡 Hint

Consider the async nature of app.listen() in execution_table steps 3 and 4

Concept Snapshot

NestJS app starts by creating an app instance from AppModule using NestFactory.
Use async/await in bootstrap() to wait for app creation and server listening.
App listens on a port to accept requests.
AppModule defines app structure with controllers and providers.
Bootstrap function runs once to start the app.

Full Transcript

This visual execution traces the first NestJS application startup. It begins with the bootstrap function call, which uses NestFactory to create an app instance from AppModule. The app then listens on port 3000. Variables like 'app' change from undefined to an app instance, then to a running server. Key points include the use of async/await to handle promises and the role of AppModule as the root module. The app is ready to accept requests after listening starts.

Practice

1. What is the main purpose of a controller in a NestJS application?

easy

A. To configure the server settings and environment variables

B. To connect to the database and manage data storage

C. To handle incoming HTTP requests and send responses

D. To define the application's routing paths only

Solution

1. Step 1: Understand the role of controllers

   Controllers in NestJS are designed to receive HTTP requests and return responses to the client.

2. Step 2: Differentiate from other components

   Modules organize the app, services handle business logic, and controllers handle requests and responses.

3. Final Answer:

   To handle incoming HTTP requests and send responses -> Option C

4. Quick Check:

   Controller = Request handler [OK]

Hint: Controllers respond to HTTP requests directly [OK]

Common Mistakes:

• Confusing controllers with modules
• Thinking controllers manage database connections
• Assuming controllers only define routes without logic

2. Which of the following is the correct way to start a NestJS application in the main.ts file?

easy

A. app.start(3000);

B. await app.listen(3000);

C. app.run(3000);

D. app.open(3000);

Solution

1. Step 1: Identify the bootstrap function usage

   The NestJS app instance uses the listen() method to start the server on a specified port.

2. Step 2: Confirm the correct syntax

   The correct syntax is await app.listen(3000); to asynchronously start the server on port 3000.

3. Final Answer:

   await app.listen(3000); -> Option B

4. Quick Check:

   Start server with listen() [OK]

Hint: Use listen() method to start the server [OK]

Common Mistakes:

• Using non-existent methods like start() or run()
• Forgetting to await the listen() call
• Confusing listen() with open()

3. Given this controller code snippet, what will be the HTTP response when a GET request is made to '/'?

import { Controller, Get } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  getHello(): string {
    return 'Hello, NestJS!';
  }
}

medium

A. No response because method is not async

B. An error because @Get decorator is missing a path

C. "GET request received"

D. "Hello, NestJS!"

Solution

1. Step 1: Analyze the controller method

   The method getHello() is decorated with @Get() without a path, so it responds to GET requests at the root path '/'.

2. Step 2: Understand the returned value

   The method returns the string 'Hello, NestJS!', which will be sent as the HTTP response body.

3. Final Answer:

   "Hello, NestJS!" -> Option D

4. Quick Check:

   @Get() returns method string response [OK]

Hint: @Get() without path means root '/' route [OK]

Common Mistakes:

• Thinking @Get() requires a path argument
• Assuming async is required for response
• Expecting JSON response instead of string

4. What is wrong with this main.ts file that prevents the NestJS app from starting?

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

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

bootstrap();

medium

A. Missing await before app.listen(3000);

B. AppModule is not imported correctly

C. bootstrap function is not called

D. NestFactory.create should be synchronous

Solution

1. Step 1: Check async function usage

   The bootstrap function is async, so asynchronous calls inside should be awaited to ensure proper execution.

2. Step 2: Identify missing await

   The call app.listen(3000); returns a Promise and should be awaited as await app.listen(3000); to start the server correctly.

3. Final Answer:

   Missing await before app.listen(3000); -> Option A

4. Quick Check:

   Always await async listen() call [OK]

Hint: Always await app.listen() in async bootstrap [OK]

Common Mistakes:

• Not awaiting app.listen() causing server not to start
• Assuming NestFactory.create is synchronous
• Forgetting to call bootstrap()

5. You want to create a simple NestJS app that responds with "Welcome to NestJS!" when a user visits '/welcome'. Which code snippet correctly implements this in the controller?

hard

A. import { Controller, Get } from '@nestjs/common';

@Controller()
export class WelcomeController {
@Get('welcome')
welcome() {
return 'Welcome to NestJS!';
}
}

B. import { Controller, Get } from '@nestjs/common';

@Controller('welcome')
export class WelcomeController {
@Get('/')
welcome() {
return 'Welcome to NestJS!';
}
}

C. import { Controller, Post } from '@nestjs/common';

@Controller('welcome')
export class WelcomeController {
@Post()
welcome() {
return 'Welcome to NestJS!';
}
}

D. import { Controller, Get } from '@nestjs/common';

@Controller('welcome')
export class WelcomeController {
@Get('welcome')
welcome() {
return 'Welcome to NestJS!';
}
}

Solution

1. Step 1: Understand route path composition

   The full route path is formed by combining @Controller() path and @Get() path.

2. Step 2: Match the desired route '/welcome'

   Using @Controller() with no path and @Get('welcome') creates the route '/welcome'. import { Controller, Get } from '@nestjs/common'; @Controller() export class WelcomeController { @Get('welcome') welcome() { return 'Welcome to NestJS!'; } } does this correctly.

3. Step 3: Check other options

   import { Controller, Get } from '@nestjs/common'; @Controller('welcome') export class WelcomeController { @Get('/') welcome() { return 'Welcome to NestJS!'; } } creates '/welcome' + '/' = '/welcome/'. import { Controller, Post } from '@nestjs/common'; @Controller('welcome') export class WelcomeController { @Post() welcome() { return 'Welcome to NestJS!'; } } uses POST instead of GET. import { Controller, Get } from '@nestjs/common'; @Controller('welcome') export class WelcomeController { @Get('welcome') welcome() { return 'Welcome to NestJS!'; } } creates '/welcome/welcome'.

4. Final Answer:

   @Controller() with @Get('welcome') -> Option A

5. Quick Check:

   Use @Get('welcome') with empty @Controller() for '/welcome' [OK]

Hint: Combine @Controller() and @Get() paths carefully [OK]

Common Mistakes:

• Using @Post instead of @Get for GET requests
• Duplicating path in both @Controller and @Get
• Assuming @Controller('welcome') alone sets full path