Swagger API documentation in NestJS - Step-by-Step Execution

Concept Flow - Swagger API documentation

Start NestJS App

↓

Import SwaggerModule

↓

Create Swagger Document

↓

Setup Swagger UI Route

↓

Run App

↓

Access Swagger UI in Browser

This flow shows how NestJS app imports Swagger, creates API docs, sets up UI route, and serves docs.

Execution Sample

NestJS

import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

const config = new DocumentBuilder()
  .setTitle('Cats API')
  .setDescription('API for cats')
  .setVersion('1.0')
  .build();

const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('api', app, document);

This code creates Swagger docs for a NestJS app and sets up the '/api' route to show the docs UI.

Execution Table

Step	Action	Input/Parameters	Output/Result
1	Import SwaggerModule and DocumentBuilder	None	Modules ready to use
2	Create DocumentBuilder config	Title='Cats API', Description='API for cats', Version='1.0'	Config object with metadata
3	Build config	Config object	Final config for Swagger
4	Create Swagger document	App instance, config	Swagger JSON document describing API
5	Setup Swagger UI route	Route='api', app, document	Route '/api' serves Swagger UI
6	Run app	App instance	App runs with Swagger UI available
7	Access Swagger UI	Browser at '/api'	Interactive API docs shown

💡 Swagger UI is ready and accessible at '/api' route after app runs

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
config	undefined	DocumentBuilder instance with title, description, version	Built config object	Passed to createDocument	Used to generate Swagger JSON
document	undefined	undefined	undefined	Swagger JSON document	Used in SwaggerModule.setup

Key Moments - 3 Insights

Why do we need to call .build() on DocumentBuilder?

The .build() method finalizes the config object. Without it, SwaggerModule.createDocument won't get the correct metadata. See execution_table step 3.

What does SwaggerModule.setup() do exactly?

It creates a route in the app (like '/api') that serves the Swagger UI with the generated docs. See execution_table step 5.

Can I access Swagger UI before running the app?

No, the app must be running to serve the Swagger UI route. See execution_table step 6 and 7.

Visual Quiz - 3 Questions

Look at the execution table, what is the output of step 4?

A Route '/api' serving Swagger UI

B Swagger JSON document describing the API

C DocumentBuilder instance

D App instance running

💡 Hint

Check the 'Output/Result' column in step 4 of execution_table

At which step is the Swagger UI route '/api' set up?

A Step 5

B Step 3

C Step 6

D Step 7

💡 Hint

Look for 'Setup Swagger UI route' action in execution_table

If you forget to call .build() on DocumentBuilder, what happens?

A App will not run

B Swagger UI route will be '/docs' instead of '/api'

C SwaggerModule.createDocument gets incomplete config

D No effect, docs generate normally

💡 Hint

Refer to key_moments about .build() importance and execution_table step 3

Concept Snapshot

Swagger API docs in NestJS:
- Import SwaggerModule and DocumentBuilder
- Use DocumentBuilder to set title, description, version
- Call .build() to finalize config
- Create document with SwaggerModule.createDocument(app, config)
- Setup UI route with SwaggerModule.setup('api', app, document)
- Run app and visit '/api' to see docs

Full Transcript

This visual execution trace shows how to add Swagger API documentation to a NestJS app. First, you import SwaggerModule and DocumentBuilder. Then you create a config with title, description, and version using DocumentBuilder and call .build() to finalize it. Next, you create a Swagger document from the app and config. After that, you set up the Swagger UI route, usually '/api', so the docs are accessible in the browser. Finally, you run the app and open the browser at '/api' to see interactive API documentation. Key points include the need to call .build() and that the app must be running to serve the docs.