Swagger UI integration in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing Swagger UI with this Express setup?

Given the following Express server code integrating Swagger UI, what will you see when you visit http://localhost:3000/api-docs in a browser?

Express

import express from 'express';
import swaggerUi from 'swagger-ui-express';
import swaggerDocument from './swagger.json' assert { type: 'json' };

const app = express();

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

app.listen(3000, () => console.log('Server running on port 3000'));

A A web page showing interactive API documentation based on swagger.json

B A JSON file download of swagger.json

C A 404 Not Found error page

D A blank page with no content

💡 Hint

Swagger UI middleware serves a web interface for API docs.

The swaggerUi.setup middleware renders an interactive API documentation page using the provided swagger.json file. Visiting /api-docs shows this UI.

📝 Syntax

intermediate

Which option correctly imports and uses swagger-ui-express in ES modules?

Choose the correct way to import and use swagger-ui-express in an Express app using ES modules.

A

import swaggerUi from 'swagger-ui-express';
app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

B

const swaggerUi = require('swagger-ui-express');
app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

C

import { serve, setup } from 'swagger-ui-express';
app.use('/docs', serve, setup(swaggerDocument));

D

import swaggerUi from 'swagger-ui-express';
app.use('/docs', swaggerUi.setup(swaggerDocument), swaggerUi.serve);

💡 Hint

ES modules use import syntax and the middleware order matters.

Option A correctly imports the default export and uses swaggerUi.serve before swaggerUi.setup. Option A uses CommonJS require which is invalid in ES modules. Option A destructures but swagger-ui-express exports default. Option A reverses middleware order causing errors.

🔧 Debug

advanced

Why does Swagger UI show a blank page with no API details?

You integrated Swagger UI in Express but when visiting /api-docs, the page is blank with no API info. What is the most likely cause?

Express

import express from 'express';
import swaggerUi from 'swagger-ui-express';
import swaggerDocument from './swagger.json' assert { type: 'json' };

const app = express();

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup());

app.listen(3000);

A The swagger.json file path is incorrect causing a runtime error

B The swaggerDocument was not passed to swaggerUi.setup, so no API data is loaded

C The middleware order is reversed; setup should come before serve

D Express server is not listening on the correct port

💡 Hint

Check what argument is passed to swaggerUi.setup.

Swagger UI needs the swagger document passed to setup() to render API details. Omitting it causes a blank page. The code shows swaggerUi.setup() called without arguments.

❓ state_output

advanced

What is the effect of calling swaggerUi.setup with custom options?

Consider this code snippet:

app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, { explorer: true }));

What does the explorer: true option do in the Swagger UI?

A Changes the UI theme to dark mode

B Disables the display of API endpoints in the UI

C Automatically generates API documentation from code comments

D Enables a search bar to explore API endpoints interactively

💡 Hint

Look up Swagger UI options for explorer.

The explorer: true option adds a search bar in Swagger UI allowing users to filter and explore API endpoints easily.

🧠 Conceptual

expert

Which statement best describes the role of swagger-ui-express middleware in an Express app?

Choose the most accurate description of what swagger-ui-express middleware does in an Express application.

A It converts Express routes into a Swagger spec file dynamically at runtime

B It automatically validates all incoming API requests against the Swagger spec and rejects invalid ones

C It serves a static HTML page that displays interactive API documentation generated from a Swagger/OpenAPI spec file

D It replaces Express's routing system with Swagger-based routing

💡 Hint

Think about what Swagger UI actually provides to users.

swagger-ui-express serves a web interface that displays API docs based on a Swagger/OpenAPI spec. It does not validate requests or generate specs dynamically.

Practice

1. What is the main purpose of integrating swagger-ui-express in an Express app?

easy

A. To handle database connections automatically

B. To display API documentation in a user-friendly web page

C. To improve server performance by caching responses

D. To secure the API with authentication middleware

Solution

1. Step 1: Understand Swagger UI role

   Swagger UI provides a visual interface for API documentation, making it easier to explore and test endpoints.

2. Step 2: Identify middleware purpose

   swagger-ui-express middleware serves this UI in Express apps, not handling database or security tasks.

3. Final Answer:

   To display API documentation in a user-friendly web page -> Option B

4. Quick Check:

   Swagger UI = API docs display [OK]

Hint: Swagger UI shows API docs visually in browser [OK]

Common Mistakes:

• Confusing Swagger UI with security middleware
• Thinking it manages database connections
• Assuming it improves server speed

2. Which of the following is the correct way to import and use swagger-ui-express in an Express app?

easy

A. const swaggerUi = require('swagger-ui-express'); app.listen('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

B. import swaggerUi from 'swagger-ui-express'; app.get('/api-docs', swaggerUi.render(swaggerDocument));

C. const swaggerUi = require('swagger-ui-express'); app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

D. import swaggerUi from 'swagger-ui-express'; app.use('/api-docs', swaggerUi.render, swaggerUi.setup(swaggerDocument));

Solution

1. Step 1: Check import style

   Using CommonJS, require('swagger-ui-express') is correct for many Express apps.

2. Step 2: Verify middleware usage

   app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)) correctly serves Swagger UI at the route.

3. Final Answer:

   const swaggerUi = require('swagger-ui-express'); app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)); -> Option C

4. Quick Check:

   Correct import + middleware = const swaggerUi = require('swagger-ui-express'); app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)); [OK]

Hint: Use require and app.use with serve and setup [OK]

Common Mistakes:

• Using app.listen instead of app.use for middleware
• Calling render instead of serve and setup
• Mixing import and require incorrectly

3. Given this Express code snippet, what will happen when you visit /api-docs in the browser?

const express = require('express');
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = { openapi: '3.0.0', info: { title: 'Test API', version: '1.0.0' }, paths: {} };
const app = express();
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
app.listen(3000);

medium

A. You will see a Swagger UI page showing 'Test API' with no endpoints

B. You will get a 404 Not Found error

C. The server will crash due to missing routes

D. You will see a blank page with no content

Solution

1. Step 1: Analyze swaggerDocument content

   The swaggerDocument defines basic API info with no paths, so UI will show API title but no endpoints.

2. Step 2: Understand middleware effect

   The middleware serves Swagger UI at /api-docs, so visiting that route shows the UI with given document.

3. Final Answer:

   You will see a Swagger UI page showing 'Test API' with no endpoints -> Option A

4. Quick Check:

   Swagger UI shows docs even if no paths [OK]

Hint: Swagger UI shows docs page even if paths empty [OK]

Common Mistakes:

• Expecting 404 if no API paths defined
• Thinking server crashes without routes
• Assuming blank page means error

4. You added Swagger UI to your Express app but visiting /api-docs shows a blank page. Which fix is most likely correct?

medium

A. Use app.get instead of app.use for Swagger UI

B. Change app.listen port to 8080

C. Remove the swaggerDocument argument from swaggerUi.setup

D. Ensure you use both swaggerUi.serve and swaggerUi.setup(swaggerDocument) in app.use

Solution

1. Step 1: Identify correct middleware usage

   Swagger UI requires both swaggerUi.serve to serve static files and swaggerUi.setup(swaggerDocument) to load docs.

2. Step 2: Understand common blank page cause

   Missing either part causes blank page because UI assets or docs are not served properly.

3. Final Answer:

   Ensure you use both swaggerUi.serve and swaggerUi.setup(swaggerDocument) in app.use -> Option D

4. Quick Check:

   Serve + setup needed for Swagger UI [OK]

Hint: Use both serve and setup middleware together [OK]

Common Mistakes:

• Using app.get instead of app.use for middleware
• Omitting swaggerDocument in setup
• Changing port unrelated to UI display

5. You want to add Swagger UI to your Express app but only show it in development mode. Which code snippet correctly achieves this?

hard

A. if (process.env.NODE_ENV === 'development') { app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)); }

B. app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)); if (process.env.NODE_ENV !== 'development') app.disable('/api-docs');

C. app.get('/api-docs', (req, res) => { if (process.env.NODE_ENV === 'development') swaggerUi.setup(swaggerDocument); else res.sendStatus(404); });

D. if (process.env.NODE_ENV !== 'development') { app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)); }

Solution

1. Step 1: Check environment condition

   Using if (process.env.NODE_ENV === 'development') ensures Swagger UI middleware runs only in development.

2. Step 2: Confirm middleware usage

   Inside the condition, app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)) correctly sets up Swagger UI.

3. Final Answer:

   if (process.env.NODE_ENV === 'development') { app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument)); } -> Option A

4. Quick Check:

   Conditionally add middleware in development only [OK]

Hint: Wrap middleware in if checking NODE_ENV === 'development' [OK]

Common Mistakes:

• Trying to disable route after adding middleware
• Using app.get without serving static files
• Reversing environment condition