Regarding swagger is not working in nodejs as per the swagger document.

[asaddev]

Hi there,

I tried to setup swagger on nodejs as per the document par it is not working and present wrong data of swagger UI see the below attached screenshot. So just wanted to know how to setup swagger in nodejs so that all my apis display in one place. I tried lot of solutions on different different websites but same issue appeared. So kindly guide how to do that so that swagger is running properly.

Reference site that I tried below: 
https://swagger.io/docs/open-source-tools/swagger-codegen/#:~:text=The%20Swagger%20Codegen%20is%20an....
https://levelup.gitconnected.com/how-to-add-swagger-ui-to-existing-node-js-and-express-js-project-2c...
https://medium.com/bb-tutorials-and-thoughts/how-to-add-swagger-to-nodejs-rest-api-7a542cfdc5e1
https://plainenglish.io/blog/how-to-implement-and-use-swagger-in-nodejs-d0b95e765245
https://dev.to/kabartolo/how-to-document-an-express-api-with-swagger-ui-and-jsdoc-50do
https://itnext.io/setting-up-swagger-in-a-node-js-application-d3c4d7aa56d4
https://github.com/Surnet/swagger-jsdoc/blob/master/README.md

Looking forward to hearing from you. Thanks!

Swagger.json:

{

"swagger": "2.0",

"info": {

"version": "1.0.0",

"title": "My User Project CRUD",

"description": "My User Project Application API",

"license": {

"name": "MIT",

"url": "https://opensource.org/licenses/MIT"

}

},

"host": "localhost:3000",

"basePath": "/",

"tags": [

{

"name": "Users",

"description": "API for users in the system"

}

],

"schemes": ["http"],

"consumes": ["application/json"],

"produces": ["application/json"]

}

Server.js:

import swaggerUi from 'swagger-ui-express';

import swaggerDocument from './swagger.json';

app.use(

'/api-docs',

swaggerUi.serve,

swaggerUi.setup(swaggerDocument)

);

app.listen(port, () => {

console.log(`Server running at ${process.env.SERVER_URL}`);

});

[ponelat]

Hi @asaddev ,

Typically when we see raw HTML coming back, it's because express is treating that route as "text/plain" or similar. Look to see if req.type() is being called before your call to swaggerUi.serve. Or some other method that would change the "Content-Type" of the response.

You can confirm the Content-Type is bad, by using curl or similar..

curl -i http://localhost:3000/api-docs
#...
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8 <------ Good content-type
#...

Here is a minimal index.js that works...

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

const app = express()
app.use(
    '/api-docs',
    swaggerUi.serve,
    swaggerUi.setup(swaggerDocument)
);

const server = app.listen(3000, () => {
    console.log(`Server running at ${server.address().port}`);
});

[asaddev]

Hey,

Thanks for the reply.

I have checked of what you had given, but even after that the same issue is coming. Kindly checked the attached screenshot below.

Note: I am using ES6 in this.

[ponelat]

@asaddev  I'm not sure what else you have on your stack, nor why your browser is showing the raw HTML.

Some things you can follow up on.

See if the redirect URL has a different content-type (since /api-docs redirects to /api-docs/, note the trailing slash)

curl -iL http://localhost:3000/api-docs/
# Content-Type?

And for completeness you can try with the following versions...

  "dependencies": {
    "express": "^4.18.2",
    "swagger-ui-express": "^4.6.2"
  }

Node: v18.7.0.

Tested with/without es6 imports (try without, using the minimal example above).
 

[henryjimene]

I faced a similar challenge while setting up Swagger in Node.js, following the documentation, but encountered issues with incorrect Swagger UI data, as shown in the attached screenshot. Despite trying various solutions from different sources, the problem persisted. I'm looking for guidance on properly configuring Swagger in Node.js to centralize all my APIs in one place. This situation reminded me of troubleshooting tech problems, much like the way some users encounter issues while trying to use MicroG Spotify Vanced FREE, a modified version of Spotify for enhanced features.

[abdullah7813]

I encountered a familiar challenge when I was in the process of setting up Swagger in Node.js, following the provided documentation. However, I faced issues related to incorrect Swagger UI data, which are visible in the screenshot I've attached. Despite my efforts to resolve the problem using various solutions from different sources, I couldn't seem to fix it. I'm now seeking guidance on how to properly configure Swagger in Node.js so that I can have all my APIs centralized in one place. This situation was reminiscent of the troubleshooting process that users often go through when they encounter problems while trying to use MicroG Spotify Vanced FREE, a modified version of Spotify with enhanced features.