[NestJs] Bull Board Ui gets stuck on loading

[coder797]

I tried to use bullboard and it worked fine when using localhost but when i deployed my nestjs application on my digital ocean server . The URL http://ip:3000/queues just shows Loading.. . Not sure whats the issue . Iam attaching my Appmodule file While the queues work fine if i try to run it just the UI is stuck . On my digital ocean sever I checked there is no firewall all ports are open

`import { CareProvidersModule } from "./modules/careproviders/careproviders.module";
import { AdminCsvGeneratorModule } from "./modules/admin-csv-generator/admin-csv-generator.module";
import { CommonModule } from "./modules/common/common.module";
import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { AppConfigModule } from "./config/app/config.module";
import { UsersModule } from "./modules/users/users.module";
import {ConfigModule, ConfigService} from "@nestjs/config";
import { ChartsModule } from "./modules/charts/charts.module";
import { MailModule } from "./modules/mail/mail.module";
import { BaseTaskService } from "./task/baseTask.service";
import { BullModule } from "@nestjs/bull";
import { baseTaskProcessor } from "./task/baseTask.processor";
import { FileUploadModule } from "./modules/fileupload/fileupload.module";
import { MealReviewModule } from "./modules/meal-review/meal-review.module";
import { AdminPanelModule } from "./modules/admin-panel/admin-panel.module";
import { DownloadsModule } from './modules/downloads/downloads.module';
import { AuthModule } from "./modules/auth/auth.module";
import { CustomPaymentsModule } from './modules/custom-payments/custom-payments.module';
import { SendbirdModule } from './modules/sendbird/sendbird.module';
import { SendbirdTypescriptModule } from './modules/sendbird-typescript/sendbird-typescript.module';
import {LoggerModule, Params} from "nestjs-pino";
import pino from "pino";
import {transportOptions} from "./config/logger/logger-config";
import { WebhooksModule } from './modules/webhooks/webhooks.module';
import { RazorpaySdkModule } from './modules/razorpay-sdk/razorpay-sdk.module';
import * as  moment from "moment-timezone";
import { PatientsModule } from './modules/patients/patients.module';
import { NpsModule } from './modules/nps/nps.module';
import { AppointmentsModule } from './modules/appointments/appointments.module';

import {TASK_CONSTANTS} from "./config/constants/Queue";
import {CareTrackerProcessor} from "./providers/queue/careTracker/careTracker.processor";
import {QueueService} from "./providers/queue/queue.service";
import {QueueHelper} from "./config/helpers/queue/queue.helper";
import {CareTrackerQueueService} from "./providers/queue/careTracker/careTrackerQueueService";
import {PrismaService} from "./prisma.service";
import { BullBoardModule } from "@bull-board/nestjs";
import {FastifyAdapter} from '@bull-board/fastify'
import {BullAdapter} from "@bull-board/api/bullAdapter";
/**
 * Import and provide app related classes.
 *
 * @module
 */
@Module({
  imports: [
    UsersModule,
    FileUploadModule,
    AppConfigModule,
    MailModule,
    ConfigModule.forRoot({
      isGlobal: true,
    }),
    LoggerModule.forRootAsync({
      imports: [ConfigModule],
      useFactory: (configService: ConfigService): Params | Promise<Params> => {
        return {
          pinoHttp: {
            level: configService.get<string>('NEST_ENV') !== 'production' ? 'debug' : 'info',
            autoLogging: false,
            transport: transportOptions,
            timestamp: () => `,"time":"${moment().tz('Asia/Kolkata').format("DD-MMM-YYYY HH:mm:ss.SSS")}"`,
            stream: pino.destination({
              minLength: 4096,
              sync: false,
            }),
          },
        };
      },
      inject: [ConfigService],
      providers: [],
    }),
    AppConfigModule,
    CommonModule,
    ChartsModule,
    BullModule.forRoot({
      redis: {
        host: 'localhost',
        port: 6379,
      },
    }),
    BullBoardModule.forRoot({
      route: "/queues",
      adapter:FastifyAdapter
    }),
      BullModule.registerQueue({
        name: "mainQueue"
      }),
      BullModule.registerQueue({
        name: TASK_CONSTANTS.CARE_TRACKER_QUEUE
      }),
    BullBoardModule.forFeature({
      name:TASK_CONSTANTS.CARE_TRACKER_QUEUE,
      adapter:BullAdapter
    }),
    MealReviewModule,
    AdminPanelModule,
    CareProvidersModule,
    AdminCsvGeneratorModule,
    DownloadsModule,
    AuthModule,
    CustomPaymentsModule,
    SendbirdModule,
    SendbirdTypescriptModule,
    WebhooksModule,
    RazorpaySdkModule,
    PatientsModule,
    NpsModule,
    AppointmentsModule
  ],
  controllers: [AppController],
  providers: [AppService, BaseTaskService, baseTaskProcessor,PrismaService,CareTrackerProcessor,QueueService,QueueHelper,CareTrackerQueueService],
})
export class AppModule {}`

[felixmosh]

Hi, any errors on the console on client / server side? Any network errors in the browser?

[coder797]

I was able to solve this apparently it needs SSl to be able to show its UI otherwise there is bunch of CORS errors and one other which was unique to my configuration is

    contentSecurityPolicy: {
      directives: {
        defaultSrc: [`'self'`],
        styleSrc: [`'self'`, `'unsafe-inline'`, `fonts.googleapis.com`],
        fontSrc: [`'self'`, `fonts.gstatic.com`],
        imgSrc: [`'self'`, "data:", "validator.swagger.io"],
        scriptSrc: [`'self'`, `https: 'unsafe-inline'`],
      },
    },
  });

in this, I had to add the fontSrc as its fetching google fonts So for me it didn't work without a domain and a SSL cerificate

[felixmosh]

Ok, sounds like it is not an issue of this lib, I will close this issue, feel free to reopen it.