Giter VIP home page Giter VIP logo

Comments (9)

cerireyhan avatar cerireyhan commented on May 18, 2024 5

Is there any progress on this?

from nestjs-redoc.

ojoanalogo avatar ojoanalogo commented on May 18, 2024 4

I'll try to add support for Fastify in the upcoming days, first I need to learn how Fastify serves a static file

from nestjs-redoc.

AGPDev avatar AGPDev commented on May 18, 2024 1

@JoeyyT you dont need this.

see example:

main.ts

import { join } from 'path';
import { NestFactory } from '@nestjs/core';
import { ValidationPipe } from '@nestjs/common';
import {
  FastifyAdapter,
  NestFastifyApplication,
} from '@nestjs/platform-fastify';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );

  app.useGlobalPipes(
    new ValidationPipe({
      transform: true,
    }),
  );

  app.setGlobalPrefix('v1');

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

  app.setViewEngine({
    engine: {
      handlebars: require('handlebars'),
    },
    templates: join(__dirname, '..', 'views'),
  });

  const config = new DocumentBuilder()
    .setTitle('Title')
    .setDescription('API description')
    .setVersion('1.0')
    .build();
  const document = SwaggerModule.createDocument(app, config);

  document.info['x-logo'] = {
    url: '/public/logo-light.svg',
    backgroundColor: '#F0F0F0',
    altText: 'Logo',
  };

  document.info['x-tagGroups'] = [
    {
      name: 'Catalog resources',
      tags: ['catalog'],
    },
  ];

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

  await app.listen(3000, '0.0.0.0');
}
bootstrap();

app.controller.ts

import { Controller, Get, Header, Headers, Render } from '@nestjs/common';
import { ApiExcludeEndpoint, ApiTags } from '@nestjs/swagger';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  @ApiExcludeEndpoint()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('/docs')
  @Render('redoc.handlebars')
  @Header(
    'Content-Security-Policy',
    "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; child-src * 'unsafe-inline' 'unsafe-eval' blob:; worker-src * 'unsafe-inline' 'unsafe-eval' blob:; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';",
  )
  @ApiExcludeEndpoint()
  getDocs() {
    return {
      data: {
        docUrl: 'http://localhost:3000/api/json',
        favicon: '/public/icon.svg',
        options: JSON.stringify({
          theme: {
            logo: {
              gutter: '15px',
            },
          },
          sortPropsAlphabetically: true,
          hideDownloadButton: false,
          hideHostname: false,
          noAutoAuth: true,
          pathInMiddlePanel: true,
        }),
      },
    };
  }
}

views/redoc.handlebars

<!DOCTYPE html>
<html>

<head>
  <title>{{ data.title }}</title>
  <!-- needed for adaptive design -->
  <meta charset="utf-8" />
  {{#if data.favicon}}
  <link rel="shortcut icon" type="image/x-icon" href="{{ data.favicon }}" />
  {{/if}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
  <!--
    ReDoc doesn't change outer page styles
    -->
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <!-- we provide is specification here -->
  <div id="redoc_container"></div>
  <script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script>
  <script>
    Redoc.init(
      '{{ data.docUrl }}',
      JSON.parse('{{{ data.options }}}'),
      document.getElementById("redoc_container")
    );
  </script>
</body>

</html>

Just access /v1/docs and be happy

from nestjs-redoc.

red010182 avatar red010182 commented on May 18, 2024 1

any progress on this? 2 years have passed... please

from nestjs-redoc.

icereval avatar icereval commented on May 18, 2024

https://github.com/fastify/fastify-static

from nestjs-redoc.

AGPDev avatar AGPDev commented on May 18, 2024

nice

from nestjs-redoc.

JoeyyT avatar JoeyyT commented on May 18, 2024

Any updates regading the implementation of Fastify?

from nestjs-redoc.

elicobanksbridge avatar elicobanksbridge commented on May 18, 2024

@ojoanalogo is there any current progress or future road-map to support Fastify in nestjs-redoc ?

from nestjs-redoc.

julianpoemp avatar julianpoemp commented on May 18, 2024

Hi, I just created a library that supports Redoc using NestJS 10 and fastify: nestjs-redox

from nestjs-redoc.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.