Overview
Generate OpenAPI 3.0 documentation automatically from JSDoc comments in your routes and models. Best for those who prefer code-adjacent documentation.
Features
- OpenAPI 3.0.0 specification
- Interactive Swagger UI at /docs
- JSON specification at /docs.json
- Bearer Auth security scheme pre-configured
Installation
npx hanma add docs/swagger
Dependencies
swagger-jsdoc, swagger-ui-express
Code
import swaggerJsdoc from 'swagger-jsdoc';
import swaggerUi from 'swagger-ui-express';
import { Express } from 'express';
const options: swaggerJsdoc.Options = {
definition: {
openapi: '3.0.0',
info: {
title: 'Express API with Swagger',
version: '1.0.0',
description: 'A simple Express API documented with Swagger',
license: {
name: 'MIT',
url: 'https://spdx.org/licenses/MIT.html',
},
contact: {
name: 'Hanma',
url: 'https://hanma.dev',
email: 'support@hanma.dev',
},
},
servers: [
{
url: 'http://localhost:3000',
description: 'Development server',
},
],
components: {
securitySchemes: {
bearerAuth: {
type: 'http',
scheme: 'bearer',
bearerFormat: 'JWT',
},
},
},
security: [
{
bearerAuth: [],
},
],
},
apis: ['./src/routes/*.ts', './src/models/*.ts'], // Path to the API docs
};
const specs = swaggerJsdoc(options);
/**
* Setup Swagger documentation
* @param app Express application
*/
export const setupSwagger = (app: Express) => {
// Swagger Page
app.use(
'/docs',
swaggerUi.serve,
swaggerUi.setup(specs, {
explorer: true,
customCss: '.swagger-ui .topbar { display: none }',
customSiteTitle: "API Documentation",
})
);
// Docs in JSON format
app.get('/docs.json', (req, res) => {
res.setHeader('Content-Type', 'application/json');
res.send(specs);
});
console.log('[OK] Swagger documentation available at /docs');
};
/**
* Example JSDoc for a route:
*
* /**
* * @openapi
* * /users:
* * get:
* * tags:
* * - Users
* * description: Responds if the app is up and running
* * responses:
* * 200:
* * description: App is up and running
* * /
*/
/**
* Example usage in index.ts:
*
* import express from 'express';
* import { setupSwagger } from './libs/docs/swagger';
*
* const app = express();
*
* // Setup Swagger
* setupSwagger(app);
*
* // Your routes here
* app.listen(3000);
*/
Usage
import { setupSwagger } from './libs/docs/swagger';
const app = express();
setupSwagger(app);
Dependencies
swagger-jsdocswagger-ui-express
Frequently Asked Questions
How do I install Swagger JSDoc?
Run the following command:
npx hanma add docs/swaggerWhat dependencies are required?
This snippet requires: swagger-jsdoc, swagger-ui-express. Make sure to install them before using the snippet.
How do I use this snippet?
Copy the code and paste it into your project. The snippet will be saved to
libs/docs/swagger.ts.Can I customize this snippet?
Yes! All snippets are copy-paste code that you own. Feel free to modify them to fit your needs.
Does this work with other frameworks?
This snippet is designed for the specific framework. Check the other framework pages for equivalent implementations.