DEV Community

Cover image for How to integrate swagger ui in your node project with auto generation ?
Ravi Agheda
Ravi Agheda

Posted on

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

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 Autogen
The 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 Autogen
The 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
Enter fullscreen mode Exit fullscreen mode

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

Setting up Swagger UI
Once 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));
};

Enter fullscreen mode Exit fullscreen mode

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 Autogen
Now 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);

Enter fullscreen mode Exit fullscreen mode

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 :)

Top comments (0)