Swagger/OpenAPI specification in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Swagger UI middleware in an Express app.

Express

const swaggerUi = require('[1]');

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

Aswagger-express

Bswagger-ui-express

Cswagger-ui

Dexpress-swagger-ui

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'swagger-ui' which is not the Express middleware.

Using 'express-swagger-ui' which is a different package.

The correct package to serve Swagger UI in Express is swagger-ui-express.

2fill in blank

medium

Complete the code to serve the Swagger UI at the '/api-docs' route.

Express

app.use('/api-docs', swaggerUi.serve, swaggerUi.[1](swaggerDocument));

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

Aserve

Binit

Cstart

Dsetup

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serve' which is a middleware function, not the setup method.

Using 'start' or 'init' which do not exist in this context.

The method to setup Swagger UI middleware is setup.

3fill in blank

hard

Fix the error in the Swagger document import statement.

Express

const swaggerDocument = require('./[1].json');

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

Aswagger

BswaggerDoc

CswaggerDocument

Dswagger_spec

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of the actual file name.

Using camelCase names that do not match the file.

The Swagger JSON file is commonly named swagger.json.

4fill in blank

hard

Fill both blanks to create a basic Swagger document with title and version.

Express

const swaggerDocument = {
  openapi: '3.0.0',
  info: {
    title: '[1]',
    version: '[2]'
  },
  paths: {}
};

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

AMy API

B1.0.0

CAPI Docs

Dv1

Attempts:

3 left

💡 Hint

Common Mistakes

Using version as 'v1' instead of '1.0.0'.

Using generic titles that are not descriptive.

The title is usually a friendly name like 'My API', and version follows semantic versioning like '1.0.0'.

5fill in blank

hard

Fill all three blanks to define a GET endpoint '/users' with a summary and 200 response description.

Express

paths: {
  '/users': {
    get: {
      summary: '[1]',
      responses: {
        '200': {
          description: '[2]',
          content: {
            'application/json': {
              schema: [3]
            }
          }
        }
      }
    }
  }
}

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

AList all users

BSuccessful response

C{ type: 'array', items: { type: 'object' } }

DGet users

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague summaries.

Leaving schema empty or incorrect.

The summary describes the endpoint action, the description explains the response, and the schema defines the data structure returned.