First NestJS application - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Controller decorator from NestJS.

NestJS

import { [1] } from '@nestjs/common';

Drag options to blanks, or click blank then click option'

AController

BModule

CInjectable

DNestFactory

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing Module with Controller

Using NestFactory which is for app creation

The Controller decorator is imported from '@nestjs/common' to define a controller in NestJS.

2fill in blank

medium

Complete the code to create a basic controller class named AppController.

NestJS

export class [1]Controller {}

Drag options to blanks, or click blank then click option'

AMain

BApp

CRoot

DHome

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated names like Home or Root

Forgetting to export the class

The main controller in a NestJS app is often named AppController.

3fill in blank

hard

Fix the error in the decorator to define a module with AppController.

NestJS

@Module({
  controllers: [[1]Controller],
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

AMain

BRoot

CApp

DHome

Attempts:

3 left

💡 Hint

Common Mistakes

Using a controller name that was not defined

Forgetting to include the controller in the module

The module should list the correct controller name, which is AppController.

4fill in blank

hard

Fill both blanks to create and start the NestJS application.

NestJS

async function bootstrap() {
  const app = await [1].create([2]Module);
  await app.listen(3000);
}

Drag options to blanks, or click blank then click option'

ANestFactory

BApp

CAppModule

DModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using Module instead of AppModule

Using App instead of NestFactory

NestFactory creates the app instance and AppModule is the root module passed to it.

5fill in blank

hard

Fill in the blanks to define a simple GET route returning 'Hello World!'.

NestJS

@Controller()
export class AppController {
  @[1]()
  getHello(): string {
    return [2];
  }
}

Drag options to blanks, or click blank then click option'

AGet

B'Hello World!'

C"Hello World!"

DPost

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Post instead of @Get

Returning the string without quotes

Using single quotes inconsistently

The @Get() decorator defines a GET route. The method returns the string "Hello World!".

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