createIPXWebServer seems to have trouble with Hono basePaths

[ndom91]

Environment

• node@22.4.1
• ipx@3.0.1
• hono@4.5.2

Reproduction

import { Hono } from "hono";
import { cors } from "hono/cors";
import { logger } from "hono/logger";
import {
  createIPX,
  createIPXWebServer,
  ipxFSStorage,
  ipxHttpStorage,
} from "ipx";

const ipx = createIPX({
  storage: ipxFSStorage({
    dir: "./public",
  }),
  httpStorage: ipxHttpStorage({
    allowAllDomains: true,
  }),
});

const app = new Hono().basePath("/worker/v1")

app.use(logger());
app.use(cors());

app.use("/*", (c) => createIPXWebServer(ipx)(c.req.raw));

export default {
  port: process.env.PORT ?? 8080,
  fetch: app.fetch,
};

Describe the bug

As you can see in the example above, I'm using a basepath of /worker/v1.

When attempting to visit the following URL: http://localhost:8000/worker/v1/grayscale/butt.png

I get the following error:

{
  "error": {
    "message": "[404] [IPX_FILE_NOT_FOUND] File not found: /v1/grayscale/butt.png"
  }
}

However, if I remove the basePath option on the Hono instantiation everythign does work. For example, then when visiting http://localhost:8000/grayscale/butt.png I get a grayscale version of the image.

---

In addition, passing a path section to the app.use() call doesn't seem to work as expected either. So for example, a Hono instance setup like this:

const app = new Hono() // No basePath
app.use("/img/*", (c) => createIPXWebServer(ipx)(c.req.raw)); // However, with a path segment defined here

Throws the same "File not found" error when visitng, for example: http://localhost:8000/img/grayscale/butt.png

Oddly, http://localhost:8000/img/butt.png does load the raw original image then, but I can't apply any operations via a path segment.

Additional context

Maybe I'm missing something, but it seems that my usage of the basePath / path sections should work, no?

Logs

No response

[ndom91]

I was able to get it to work finally with a bit of a hacky workaround. Even without defining a basePath on the root Hono instance, it didnt' like any path sections being in front of it.

What I ended up doing was stripping out the "base path" from the Request being passed into the createIPXWebServer function, i.e.

const img = new Hono()
img.use("/img/*", c => createIPXWebServer(ipx)(new Request(c.req.raw.url.replace(/\/img/, ""))))

const app = new Hono()
app.route('/', img)

const BASE_PATH = "/worker/v1"
app.route(`${BASE_PATH}/bookmark`, bookmark)
app.route(`${BASE_PATH}/feed`, feed)

[tunnckoCore]

Hey @ndom91 noticed the same thing, and my solution is

export const app = createApp().use("/optimize", createIPXH3Handler(ipx));
const handler = toWebHandler(app);

and then detect if it's /optimize and use the handler

// Bun's fetch, but should work for whatever
Bun.serve({
  port: 3000,
  async fetch(req) {
    let url = new URL(req.url);
    if (url.pathname.startsWith("/optimize")) {
      return handler(req);
    }

    return honoApp.fetch(req);
  }
});