felixmosh / bull-board

🎯 Queue background jobs inspector
MIT License
2.26k stars 359 forks source link

Working with bull-board in Nextjs #722

Closed GodsonAddy closed 5 months ago

GodsonAddy commented 5 months ago

I would be glad if anyone could help implement the bull-board in the Nextjs app. I can't seem to make it work.

This is my code:

pages/api/auth/admin/queues

import { createRouter, expressWrapper } from "next-connect";
import { post } from "../../../../queue.js";
import { createBullBoard } from "@bull-board/api";
import { BullAdapter } from "@bull-board/api/bullAdapter";
import { ExpressAdapter } from "@bull-board/express";
const router = createRouter();

const serverAdapter = new ExpressAdapter();

createBullBoard({
  queues: [new BullAdapter(post)],
  serverAdapter: serverAdapter,
});

serverAdapter.setBasePath("/api/auth/admin/queues");

router
  .use(expressWrapper(serverAdapter.getRouter()))
  .get(async (req, res, next) => {
    return res.status(200).json();
  });

export default router.handler({
  onError: (err, req, res) => {
    console.error(err.stack);
    res.status(500).json({ message: `Bullboard Error` });
  },
  onNoMatch: (req, res) => {
    res.status(404).json({ message: "Bullboard not found" });
  },
});
./queue.js

import Queue from "bull";
import dotenv from "dotenv";

dotenv.config();

const post = new Queue("post", {
  redis: process.env.REDIS_URL,
});

export {
post
};
GodsonAddy commented 5 months ago

So this is how I solved it. I downloaded express and changed the basePath of the bull-board UI from pages/api/auth/admin/queues.js to pages/api/auth/admin/queues/[[...index]].js

/pages/api/auth/admin/queues/[[...index]].js

import { post } from "../../../../../queue.js";
import { createBullBoard } from "@bull-board/api";
import { BullAdapter } from "@bull-board/api/bullAdapter";
import { ExpressAdapter } from "@bull-board/express";
import express from "express";

const app = express();

const serverAdapter = new ExpressAdapter();

createBullBoard({
  queues: [new BullAdapter(post)],
  serverAdapter: serverAdapter,
});

serverAdapter.setBasePath("/api/auth/admin/queues");

app.use("/api/auth/admin/queues", serverAdapter.getRouter());

export default app;
smoothdvd commented 1 month ago

Is it possible to integrate with NextJS App Router?