swagger-ui: When deploying swagger on vercel on nodejs it does not show UI

This is How it does look like this and I do not know how to fix this issue.

Q&A (please complete the following information)

OS: M1 Pro
Browser" Chrome, Safari
Version: 22
Method of installation: npm
Swagger-UI version: 3
Swagger/OpenAPI version: 2

Content & configuration

Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

SwaggerUI({
  // your config options here
const options = {
  definition: {
    openapi: "3.0.0",
    info: {
      title: "Library API",
      version: "1.0.0",
      description: "A simple Express Library API",
      termsOfService: "http://example.com/terms/",
      contact: {
        name: "API Support",
        url: "http://www.exmaple.com/support",
        email: "support@example.com",
      },
    },
    servers: [
      {
        url: "https://localhost:2001",
        description: "My API Documentation",
      },
    ],
  },
  // This is to call all the files
  apis: ["src/**/*.js"],
};
})

?yourQueryStringConfig

Screenshots

How can we help?

I have built a backend on node.js and after deploying swagger on vercel it does not show UI for api-docs rest of the things are working as they should. Also, I have added custom HTML as well which is also working you can check the SS.

About this issue

Original URL
State: open
Created a year ago
Comments: 22

Commits related to this issue

maybe downgrade would help https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1680582184 — committed to Itttikorn/HotelReservationAPI by Taihenc 2 months ago
read css directly from its path in node_modules https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-2002404091 — committed to Itttikorn/HotelReservationAPI by Taihenc 2 months ago

Most upvoted comments

@jcs-2020 sure! It is not a sufficient way to do it but there are no other options!

you can directly use CDN // CDN CSS const CSS_URL = “https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css”;

and pass it down to your app.use where you have swagger api-docs

swaggerUI.setup(specs, { customCssUrl: CSS_URL })

and boom it should work 😃

you also can check out my repo as well 😃 https://github.com/Milan-960/Nodejs-swagger-api/blob/master/index.js

Milan-960 on Apr 5, 2023

Thanks for your solution, @Milan-960 but it didn’t fully solve my issue, all of the request summaries were messed up as you can see here:

My solution was similar, but I added custom css to display summaries properly.

// Route-Handler to visit our docs
route.use(
  '/docs',
  swaggerUi.serve,
  swaggerUi.setup(swaggerSpec, {
    customCss:
      '.swagger-ui .opblock .opblock-summary-path-description-wrapper { align-items: center; display: flex; flex-wrap: wrap; gap: 0 10px; padding: 0 10px; width: 100%; }',
    customCssUrl: CSS_URL,
  }),
);

I don’t think this is the best solution but at least it works… If anyone has a better solution, feel free to share it!

Full code can be found here: https://github.com/DaviidMM/api-auvasa

DaviidMM on Nov 26, 2023

Thanks, man it works now, my version was 5.0.0 downgraded it to 4.3.0, and it shows now. Bless up.💪🏾 … On Tue, Aug 15, 2023 at 1:05 PM VenkateshMogili @.> wrote: @jcs-2020 https://github.com/jcs-2020 sure! It is not a sufficient way to do it but there are no other options! you can directly use CDN // CDN CSS const CSS_URL = " https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css "; and pass it down to your app.use where you have swagger api-docs swaggerUI.setup(specs, { customCssUrl: CSS_URL }) and boom it should work 😃 you also can check out my repo as well 😃 https://github.com/Milan-960/Nodejs-swagger-api/blob/master/index.js Thank you, it worked for me🎉🎉🎉🥳 In my project, swagger-ui-express version is 4.3.0, the same version I replaced, then it worked properly. https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.3.0/swagger-ui.min.css — Reply to this email directly, view it on GitHub <#8461 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXDXEVBBAWEGHP2I3BQIJKTXVNQXRANCNFSM6AAAAAAVUDVEWQ . You are receiving this because you were mentioned.Message ID: @.>

I met the same problem with you. Thank you for your method. I’m going to downgrade my package version now. 😊

Melifen on Aug 27, 2023

Thanks, man it works now, my version was 5.0.0 downgraded it to 4.3.0, and it shows now.

Bless up.💪🏾

On Tue, Aug 15, 2023 at 1:05 PM VenkateshMogili @.***> wrote:

@jcs-2020 https://github.com/jcs-2020 sure! It is not a sufficient way to do it but there are no other options!

you can directly use CDN // CDN CSS const CSS_URL = " https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css ";

and pass it down to your app.use where you have swagger api-docs

swaggerUI.setup(specs, { customCssUrl: CSS_URL })

and boom it should work 😃

you also can check out my repo as well 😃 https://github.com/Milan-960/Nodejs-swagger-api/blob/master/index.js

Thank you, it worked for me🎉🎉🎉🥳

In my project, swagger-ui-express version is 4.3.0, the same version I replaced, then it worked properly.

https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.3.0/swagger-ui.min.css

— Reply to this email directly, view it on GitHub https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1678820322, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXDXEVBBAWEGHP2I3BQIJKTXVNQXRANCNFSM6AAAAAAVUDVEWQ . You are receiving this because you were mentioned.Message ID: @.***>

MOA-CODES on Aug 16, 2023

@jcs-2020 sure! It is not a sufficient way to do it but there are no other options!

you can directly use CDN // CDN CSS const CSS_URL = “https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css”;

and pass it down to your app.use where you have swagger api-docs

swaggerUI.setup(specs, { customCssUrl: CSS_URL })

and boom it should work 😃

you also can check out my repo as well 😃 https://github.com/Milan-960/Nodejs-swagger-api/blob/master/index.js

Thank you, it worked for me🎉🎉🎉🥳

In my project, swagger-ui-express version is 4.3.0, the same version I replaced, then it worked properly.

https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.3.0/swagger-ui.min.css

VenkateshMogili on Aug 15, 2023

Thanks, it worked!

shivam-os on May 1, 2023