CODEWITHSUNDEEP
swagger-uinestjs
Saul Frank
Saul Frank

Reputation: 415

Change the logo and header colour of nestjs and swagger-ui

I have installed nestjs and I would like to use swagger-ui. I am not sure what the best way is to change the logo and header.

In main.ts

  const options = new DocumentBuilder()
    .setTitle('Data Service API')
    .setDescription('Data Service API')
    .setVersion('1.0')
    .addTag('OD')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api', app, document);

Upvotes: 2

Views: 6786

Answers (2)

Saul Frank
Saul Frank

Reputation: 415

I managed to figure out.

const options2 = {
// customCss: '.swagger-ui .topbar { display: none }'
  customCss: `
  .topbar-wrapper img {content:url(\'../assets/img/lbglogo.png\'); width:300px; height:auto;}
  .swagger-ui .topbar { background-color: white; }
  `
};

SwaggerModule.setup('api', app, document, options2);

app.useStaticAssets(join(__dirname,'..', 'public'), {prefix: '/assets'});

Reference: https://www.npmjs.com/package/swagger-ui-express

Upvotes: 4

Mr_Dimgba
Mr_Dimgba

Reputation: 41

This should solve the problem...

  SwaggerModule.setup(`/doc`, app, document, {
    customfavIcon: '<path>/favicon.png', //adding our favicon to swagger
    customSiteTitle: 'stacksuit-web-api Docs', //add site title to swagger for nice SEO
    customCss: `
      .topbar-wrapper img {content:url(\'path-to-images/image.png\'); width:200px; height:auto;}
      .swagger-ui .topbar { background-color: #f1f2f1; } `,
    swaggerOptions: {
      persistAuthorization: true, // this helps to retain the token even after refreshing the (swagger UI web page)
      // swaggerOptions: { defaultModelsExpandDepth: -1 } //uncomment this line to stop seeing the schema on swagger ui
    },
  });

Upvotes: 4

Related Questions