Add H3 adapter

[genu]

Resolves #623

Usage:

import { createApp, createRouter } from 'h3';
import { createBullBoard } from '@bull-board/api';
import { H3Adapter } from '@bull-board/h3';

const serverAdapter = new H3Adapter();
serverAdapter.setBasePath('/ui');

createBullBoard({
  queues: [...],
  serverAdapter,
});

export const app = createApp();

// your app router
const router = createRouter();
router.use(...)

app.use(router);

// Add the bullboard handlers
app.use(serverAdapter.registerHandlers());

[genu]

@felixmosh I would consider this complete, let me know if there are any other changes needed.

[AidanHibbard]

@genu Are you able to spin-up an example repository with this? I'm trying to test this by copying the libs over to my repo here

But I'm running into errors when I try to set up the route following your example...

There's a good chance I'm missing something.

[genu]

@genu Are you able to spin-up an example repository with this? I'm trying to test this by copying the libs over to my repo here -> https://github.com/AidanHibbard/bull-board-h3-test/

But I'm running into errors when I try to set up the route following your example...

There's a good chance I'm missing something.

The example that I provided in this PR is for h3. In your repository, you're trying to applying it in a Nuxt context.

Because Nuxt hijacks the routing, you can't really use the example I provided as is.

For nuxt, you have to

1. Define your route path as:

server
--- routes
------ bullboard-ui.ts
------ bullboard-ui
--------- [...].ts

2. In your [...]ts route and your bullboard-ui.ts route you have to forward the event to the server adapter. This is a design choice, but you can put the event handler in a new file and re-use it in both places:

import { redirectToBullboard } from "~/server/bullmq/h3-adapter/nitro-handler";

export default defineEventHandler(redirectToBullboard);

3. Nitro handler:

import { createBullBoard } from "@bull-board/api";
import { BullMQAdapter } from "@bull-board/api/bullMQAdapter";
import { Queue } from "bullmq";
import { H3Adapter } from "~/server/bullmq/h3-adapter";
import { H3Event } from "h3";

const {
  redis: { host, password, port },
} = useRuntimeConfig();

const createQueue = (name: string) =>
  new Queue(name, {
    connection: {
      host,
      port,
      password,
    },
  });

const serverHandler = new H3Adapter();
serverHandler.setBasePath("/bullboard-ui");

createBullBoard({
  queues: [...],
  serverAdapter: serverHandler,
});

const uiHandler = serverHandler.registerHandlers();

export const redirectToBullboard = async (event: H3Event) => {
  return await uiHandler.handler(event);
};

The redirectToBullboard is key here, as we're forwarding the same event from nitro to the bullboard uiHandler. This allows you to integrate well with nitro's other features.

NOTE: You have to ensure that your route (in this case /bullboard-ui matches the basePath in the serverAdapter

[genu]

If you still have trouble with it in Nuxt, I can have a look at your test repo tomorrow and suggest some changes.

My plan is, after this is merged, to build a nuxt module on top of this to simplify the nuxt integration further.

[AidanHibbard]

@genu That worked swimmingly, thanks

[genu]

Excellent! 😎

[felixmosh]

Thank you for you contribution 🙏🏽

[felixmosh]

Released in v5.13.0 🎊

[genu]

@AidanHibbard If you are using nuxt, I've created a module that abstracts a lot of what this adapter is doing.

Have a look at: https://github.com/genu/nuxt-concierge

[AidanHibbard]

@genu This looks great! Looks pretty similar to the module @productdevbook wrote for Pergel.