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.