How to integrate swagger ui in your node project with auto generation ?
Tags: node, javascript, api
Published: 2023-03-04 11:59:43


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:

```sh
npm install swagger-ui-express swagger-autogen
```

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.


```js
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 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.

```js
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☕️](https://www.buymeacoffee.com/raviagheda)

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