Nest build with webpack for serverless gets 404 in swagger js and css

[Lays Rodrigues]

Is there an existing issue for this?

• I have searched the existing issues

Current behavior

I'm using nestjs/swagger in my project that I intend to run in a serverless environment. After building the project with webpack, I only have a main.js file to upload to do the lambda function, so when I access the docs page I get a broken page because those files are missing.

It's apparently the same as #2157, but I have already asked for help in the discord .

So, as a workaround, I have configured the Swagger to use the CDN files, but it appears to be ignored.

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

export const setupSwagger = (app: INestApplication) => {
  const swaggerEndpoint = '/docs';
  const appName = 'My API';
  const swaggerConfig = new DocumentBuilder()
    .setTitle(appName)
    .setVersion('0.1')
    .build();

  const document = () => SwaggerModule.createDocument(app, swaggerConfig);
  SwaggerModule.setup(swaggerEndpoint, app, document, {
    customSiteTitle: appName,
    customJs: [
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.3.2/swagger-ui.js',
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.3.2/swagger-ui-bundle.js',
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.3.2/swagger-ui-standalone-preset.js',
    ],
    customCss:
      'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.3.2/swagger-ui.css',
  });
};

Minimum reproduction code

https://gist.github.com/lays147/79e28db18e454ba93b973abf5bcf4b20

Steps to reproduce

1. npm install
2. npx nest build --webpack
3. npx serverless offline

Expected behavior

The swagger would load without issues.

Package version

"^7.1.4"

NestJS version

"^7.1.4"

Node.js version

v20.5.0

In which operating systems have you tested?

• macOS
• Windows
• Linux

Other

No response

[Lays Rodrigues]

Full nest info

[Nest Platform Information]
platform-express version : 9.4.3
mapped-types version     : 2.0.2
schematics version       : 9.2.0
swagger version          : 7.1.4
testing version          : 9.4.3
common version           : 9.4.3
config version           : 3.0.0
core version             : 9.4.3
cli version              : 9.5.0

[Ttou]

@lays147 replace customCss with customCssUrl

const swaggerPath = '/swagger-ui'
const swaggerCDN = 'https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.7.2'
const document = SwaggerModule.createDocument(app, swaggerConfig)
SwaggerModule.setup(swaggerPath, app, document, {
  customCssUrl: [`${swaggerCDN}/swagger-ui.css`],
  customJs: [
    `${swaggerCDN}/swagger-ui-bundle.js`,
    `${swaggerCDN}/swagger-ui-standalone-preset.js`
  ]
})

[Lays Rodrigues]

@Ttou well, that worked like a charm. And I feel kind of stupid, but not that much, since I could assume that "customJs" and "customCss" should work in the same way.

Is there any reason why we have two configs for CSS?

[Kamil Mysliwiec]

AFAIR customCss is specifically for inline css styles. Not our API decision - we inherited this from the swagger-ui-express that was originally used under the hood by this package

[Lays Rodrigues]

@kamilmysliwiec that makes sense, but variables with similar signatures can be confusing, like in my case. Where custom JS accepts urls and customCSS not. The semantic is broken.
If we don't use swagger-ui-express, would it be possible to update the contract?

[Kamil Mysliwiec]

Technically yes, I'm just somewhat worried about introducing an unnecessary breaking change (although it generally makes sense to rename).