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