CODEWITHSUNDEEP
cssexpressswagger-uinestjsnestjs-swagger
Youness Houdass
Youness Houdass

Reputation: 204

NestjS - Swagger ui css resource not found in production mode

I am working on a nestjs project, I've added swagger to display my endpoints, It's working great in dev mode, but once deployed in production using https://zeit.co/ (now), the endpoints page is not displayed correctly (the css is missing), I got in the network tab this error: 

/favicon-32x32.png:1 Failed to load resource: the server responded with a status of 404 ()
/favicon-16x16.png:1 Failed to load resource: the server responded with a status of 404 ()
swagger-ui.css:1 Failed to load resource: the server responded with a status of 404 ()

https://i.sstatic.net/T9IQv.png

Thanks.

Upvotes: 7

Views: 4833

Answers (3)

Aryan Sindhi
Aryan Sindhi

Reputation: 1

After doing what @Manuchhehr suggested, the css/js loaded correctly but the url paths were slightly distorted, as displayed in image: https://i.sstatic.net/rumNT.png

had to add customCss to solve it,

SwaggerModule.setup('/swagger', app, swaggerDocument, {
     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:
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css',
    customJs: [
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-bundle.js',
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.js',
    ],
});

hope it helps...

Upvotes: 0

Manuchehr
Manuchehr

Reputation: 81

You should add custom css & js files like this:

SwaggerModule.setup('/swagger', app, swaggerDocument, {
    customCssUrl:
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css',
    customJs: [
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-bundle.js',
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.js',
    ],
});

Upvotes: 2

Maxim Solovyev
Maxim Solovyev

Reputation: 21

You will need to provide additional options in SwaggerModule.setup method:

import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';

// some code...

const options = new DocumentBuilder()
  .setTitle('Your title')
  .setDescription('Your description')
  .setVersion('1.0')
  .build();
const document = SwaggerModule.createDocument(app, options);
SwaggerModule.setup('api', app, document, {
  customCssUrl: 'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css',
});

Upvotes: 2

Related Questions