fix: dev server now correctly handles basePath root index

- Set devApp basePath to "/" for consistent routing
- Add displayBasePath option for correct startup message
- Simplify middleware URL checks
- Add regression test for basePath root index access

Author: yukitaka

packages/fresh/src/app.ts

@@ -69,6 +69,8 @@ export type ListenOptions =
   >
   & {
     remoteAddress?: string;
+    /** Base path to display in startup message (defaults to config.basePath) */
+    displayBasePath?: string;
   };
 function createOnListen(
   basePath: string,
@@ -446,7 +448,8 @@ export class App<State> {
    */
   async listen(options: ListenOptions = {}): Promise<void> {
     if (!options.onListen) {
-      options.onListen = createOnListen(this.config.basePath, options);
+      const displayBasePath = options.displayBasePath ?? this.config.basePath;
+      options.onListen = createOnListen(displayBasePath, options);
     }
 
     const handler = this.handler();

packages/fresh/src/app_basepath_index_test.tsx

@@ -183,6 +183,9 @@ export class Builder<State = any> {
 
     const appHandler = app.handler();
 
+    // Store original basePath for display purposes
+    const originalBasePath = app.config.basePath;
+
     const devConfig = { ...app.config, basePath: "/" };
     const devApp = new App<State>(devConfig)
       .use(liveReload())
@@ -203,7 +206,7 @@ export class Builder<State = any> {
     // Boot in parallel to spin up the server quicker. We'll hold
     // requests until the required assets are processed.
     await Promise.all([
-      devApp.listen(options),
+      devApp.listen({ ...options, displayBasePath: originalBasePath }),
       this.#build(buildCache, true),
     ]);
     return;

packages/fresh/src/dev/builder.ts

@@ -397,7 +397,7 @@ Deno.test({
     const tmp = _tmp.dir;
 
     const app = new App({ basePath: "/foo/bar" })
-      .get("/", () => new Response("ok"))
+      .get("/", () => new Response("root index"))
       .get("/asdf", () => new Response("ok"));
 
     const builder = new Builder({
@@ -414,10 +414,17 @@ Deno.test({
       },
     });
 
-    const res = await fetch(`${address}/foo/bar/asdf`);
+    // Test regular route
+    const res1 = await fetch(`${address}/foo/bar/asdf`);
+    const text1 = await res1.text();
+    expect(text1).toEqual("ok");
 
-    const text = await res.text();
-    expect(text).toEqual("ok");
+    // Test root index with basePath (without trailing slash)
+    // This was the main issue - accessing /foo/bar should work
+    const res2 = await fetch(`${address}/foo/bar`);
+    const text2 = await res2.text();
+    expect(res2.status).toEqual(200);
+    expect(text2).toEqual("root index");
 
     controller.abort();
   },

packages/fresh/src/dev/builder_test.ts

@@ -6,8 +6,9 @@ import { ErrorOverlay } from "./overlay.tsx";
 
 export function devErrorOverlay<T>(): Middleware<T> {
   return async (ctx) => {
-    const { config, url } = ctx;
-    if (url.pathname === config.basePath + DEV_ERROR_OVERLAY_URL) {
+    const { url } = ctx;
+    // In dev mode, basePath is always "/" so we check the URL directly
+    if (url.pathname === DEV_ERROR_OVERLAY_URL) {
       return ctx.render(<ErrorOverlay url={url} />);
     }
 

packages/fresh/src/dev/middlewares/error_overlay/middleware.tsx

@@ -6,11 +6,10 @@ export function liveReload<T>(): Middleware<T> {
   const revision = Date.now();
 
   return (ctx) => {
-    const { config, req, url } = ctx;
+    const { req, url } = ctx;
 
-    const aliveUrl = config.basePath + ALIVE_URL;
-
-    if (url.pathname === aliveUrl) {
+    // In dev mode, basePath is always "/" so we check the URL directly
+    if (url.pathname === ALIVE_URL) {
       if (req.headers.get("upgrade") !== "websocket") {
         return new Response(null, { status: 501 });
       }