7

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.stack.imgur.com/T9IQv.png

Thanks.

Youness Houdass
  • 204
  • 4
  • 15
  • More information is needed. It is likely that webpack (or whatever bundler you are using) is not including the CSS file. This is likely due to the way you are importing the CSS file or swagger-ui package. As I recall from my last experience with swagger-ui, by default you don't need to manually include CSS files at all. – jack.benson Feb 05 '20 at 18:58
  • Thanks Jack, I am using nestjs with swagger: https://docs.nestjs.com/recipes/swagger, It works great in Dev, but not in Prod – Youness Houdass Feb 05 '20 at 19:02
  • I'm not familiar with `zeit.co`. How are you deploying to prod? Is the process different than how you deploy to dev? By dev do you mean running locally, or do you deploy to an actual dev server? – jack.benson Feb 05 '20 at 19:11
  • For zeit.com, I just discover it using this article:https://trilon.io/blog/deploying-nestjs-to-zeit-now, by dev I mean running the project locally in localhost:3000 – Youness Houdass Feb 05 '20 at 19:13
  • I was able to make it work with a little workaround, by getting the content of swagger-ui.css and create a file with its content, put it in a public folder and then serve static using this link: https://docs.nestjs.com/recipes/serve-static#serve-static – Youness Houdass Feb 05 '20 at 19:40
  • did you found solution ? i have same issue – jagdish Apr 15 '20 at 19:14
  • Yes with a little workaround, check my previous response – Youness Houdass Apr 16 '20 at 15:51
  • 1
    @YounessHoudass Can you post a link to an example? I did the serve-static thing but keeps failing in prod :( – Fran Nov 03 '21 at 22:41

2 Answers2

1

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',
});
Maxim Solovyev
  • 11
  • 1
1

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',
    ],
});
Manuchehr
  • 11
  • 2