How to integrate swagger ui in your node project with auto generation ?

In this blog post, we will look at how to integrate Swagger into a Node.js project using the Swagger UI and Swagger Autogen libraries and output JSON.

Installing Swagger UI and Swagger AutogenThe first step is to install the Swagger UI and Swagger Autogen libraries. We can do this using npm. Open a terminal window and navigate to the root directory of your Node.js project. Then, run the following command:

Swagger is a tool for documenting and testing APIs. It provides an interface for exploring endpoints, testing input and output data, and generating client libraries for different programming languages. In this blog post, we will look at how to integrate Swagger into a Node.js project using the Swagger UI and Swagger Autogen libraries and output JSON.

Installing Swagger UI and Swagger AutogenThe first step is to install the Swagger UI and Swagger Autogen libraries. We can do this using npm. Open a terminal window and navigate to the root directory of your Node.js project. Then, run the following command:


npm install swagger-ui-express swagger-autogen

This will install the Swagger UI and Swagger Autogen libraries in your project.

Setting up Swagger UIOnce the libraries are installed, we need to set up Swagger UI in our Node.js project. Create a new file in your project root directory called swagger.js. This file will contain the Swagger UI setup code.


const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');

module.exports = (app) => {
  app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
};

This code sets up the Swagger UI middleware for our Express app. The swaggerUi.serve middleware serves the Swagger UI files, and the swaggerUi.setup middleware creates a new route at /api-docs where we can access the Swagger UI.

The swaggerDocument variable is a JSON file that describes the API endpoints, input and output data, and other details about our API. We will create this file later in this blog.

Setting up Swagger AutogenNow that we have set up Swagger UI, we need to set up Swagger Autogen. This library automatically generates Swagger documentation based on our Express app's route handlers.

Create a new file in your project root directory called swagger-autogen.js. This file will contain the Swagger Autogen setup code.


const swaggerAutogen = require('swagger-autogen')();

const outputFile = './swagger.json';
const endpointsFiles = ['./routes/*.js'];

const config = {
    info: {
        title: 'Blog API Documentation',
        description: '',
    },
    tags: [ ],
    host: 'localhost:3000/api',
    schemes: ['http', 'https'],
};

swaggerAutogen(outputFile, endpointsFiles, config);

This code sets up Swagger Autogen to generate Swagger documentation for our API endpoints. The outputFile variable is the name of the JSON file where the documentation will be saved. The endpointsFiles variable is an array of paths to our Express app's route handler files.

Let me know in the comment, if your swagger requirement is resolved by this blog.

And, You can make me a coffee☕️

Thank you for reading through, Follow me for more content :)