H
Hono•3mo ago
stryche.

basePath as route path

How to use basePath as route path? 
const route = new Hono().basePath("/api/file");
const server = new Hono();
server.route((route as any)._basePath, route); // tried this but doesn't work
server.route((route as any)._basePath, route.basePath("/")); // also this not work
server.route("/", route); // this works but i don't want it cu'z on `c.req.path` it will be `/api/file/blabla`
const route = new Hono().basePath("/api/file");
const server = new Hono();
server.route((route as any)._basePath, route); // tried this but doesn't work
server.route((route as any)._basePath, route.basePath("/")); // also this not work
server.route("/", route); // this works but i don't want it cu'z on `c.req.path` it will be `/api/file/blabla`
22 Replies
stryche.
stryche.OP•3mo ago
use-case, recursive add routes 
    for (const file of this.#files.get()) {
      const app = file.app ?? (file.default as any);
      const route = app?._basePath;
      if (route) {
        Log.info(`> Loaded Route: ${route} (${file.fileObj.name})`);
        this.#hono.route("/", app); // <- i don't want to use `/` as route path
      }
    }
    for (const file of this.#files.get()) {
      const app = file.app ?? (file.default as any);
      const route = app?._basePath;
      if (route) {
        Log.info(`> Loaded Route: ${route} (${file.fileObj.name})`);
        this.#hono.route("/", app); // <- i don't want to use `/` as route path
      }
    }
// routes/api/version.ts
import { Hono } from "hono";

const vars = {};

export const app = new Hono().basePath("/api/version");

app.use(async (c, next) => {
  if (c.req.method !== "GET") {
    await next();
    return;
  }

  return c.json(vars);
});
// routes/api/version.ts
import { Hono } from "hono";

const vars = {};

export const app = new Hono().basePath("/api/version");

app.use(async (c, next) => {
  if (c.req.method !== "GET") {
    await next();
    return;
  }

  return c.json(vars);
});
Arjix
Arjix•3mo ago
uhhhh, can you explain in words what your goal is? btw, c.req.path is not determined by your routes, it is taken from the actual Request.url using getPath, and you can provide an override to that function by passing it to the top-level Hono instance (doesn't work on sub-instances) https://hono.dev/docs/api/routing#routing-with-host-header-value
stryche.
stryche.OP•3mo ago
the goal is to use _basePath as route path,. yea, just noticed it
Arjix
Arjix•3mo ago
that is already done by you routing on / the sub-routes and you said you didn't want that so I am asking what do you want, if not that?
stryche.
stryche.OP•3mo ago
yeah, when i compare the routePath 
//basePath -> /test
server.route((route as any)._basePath, route); // /test/test/*
server.route((route as any)._basePath, route.basePath("/")); // /test/test/*
server.route("/", route); // /test/* 
//basePath -> /test
server.route((route as any)._basePath, route); // /test/test/*
server.route((route as any)._basePath, route.basePath("/")); // /test/test/*
server.route("/", route); // /test/*
Arjix
Arjix•3mo ago
give a full code example I understand nothing from that
stryche.
stryche.OP•3mo ago
    const app = new Hono().basePath("/test");
    app.use((ctx, next) => {
      const path = ctx.req.path;
      const routePath = ctx.req.routePath;
      console.log("path", path);
      console.log("routePath", routePath);
      return next();
    });
    this.#hono.route("/", app);
    const app = new Hono().basePath("/test");
    app.use((ctx, next) => {
      const path = ctx.req.path;
      const routePath = ctx.req.routePath;
      console.log("path", path);
      console.log("routePath", routePath);
      return next();
    });
    this.#hono.route("/", app);
Arjix
Arjix•3mo ago
are you reading the file system on runtime to dynamically register routes?
stryche.
stryche.OP•3mo ago
yes
Arjix
Arjix•3mo ago
do you dislike re-exporting your routes in an index file?
stryche.
stryche.OP•3mo ago
yea, cu'z it's hassle to manually add it, and it will make the code long
Arjix
Arjix•3mo ago
it being a hassle I can understand, but how can it make the code long? let me give you an example > src/controllers/Users.ts 
export const Users = new Hono().basePath("/users");
export const Users = new Hono().basePath("/users");
> src/controllers/Posts.ts 
export const Posts = new Hono().basePath("/posts");
export const Posts = new Hono().basePath("/posts");
> src/controllers/index.ts 
export { Users } from "./Users.ts";
export { Posts } from "./Posts.ts";
export { Users } from "./Users.ts";
export { Posts } from "./Posts.ts";
> src/main.ts 
import * as Controllers from "./controllers";

const app = new Hono();
for (const controller of Object.values(Controllers)) {
    // @ts-expect-error typescript is confused
    app.route("/api", controller);
}

export default app;
import * as Controllers from "./controllers";

const app = new Hono();
for (const controller of Object.values(Controllers)) {
    // @ts-expect-error typescript is confused
    app.route("/api", controller);
}

export default app;
the code doesn't get "long", for each new file, you simply add a new line to the src/controllers/index.ts file a minor hassle indeed but how often do you add new controllers? --- if your use case requires dynamic route registration then I concede
stryche.
stryche.OP•3mo ago
this looks messy for me.. because i don't do controllers
Arjix
Arjix•3mo ago
if the name bothers you, then don't name it that way nothing changes tho
stryche.
stryche.OP•3mo ago
yes, but that's the way of controllers
Arjix
Arjix•3mo ago
it's just a way of structuring your sub-routes, you are already doing smth similar by reading a folder and dynamically adding each file as a sub-route
stryche.
stryche.OP•3mo ago
anyways,. thanks for your time ❤️ gtg
Arjix
Arjix•3mo ago
unless I misunderstood you in which case I apologize for asserting my opinion like that and would like to continue helping you with other alternatives hmm, you mentioned recursive sub-routes, which means you have file-based routing as your goal? I understand what you meant by it not being a controller now
stryche.
stryche.OP•3mo ago
yes, when the app default is instanceof Hono then it will register as route
Arjix
Arjix•3mo ago
I see, similar to what HonoX is doing, but w/o any jsx?
stryche.
stryche.OP•3mo ago
hmm, yea
Arjix
Arjix•3mo ago
man, I got excited about this, I don't really need HonoX, but having an alternative for file-based routing in the form on a vite plugin sounds awesome. I'll go ahead and make such a plugin a reality myself :) I made this template https://github.com/ArjixWasTaken/vite-hono-file-based-routing doesn't play well with basePath, but hopefully you won't need it :) and hey, you can modify the virtual module to work the way you want, it's not smth published on npm, so you can modify it! you could remove ts-morph, I initially added it bc I planned to check the default export of each file to determine if it's a route or not, but honestly, you should not have random files lying alongside your routes in the first place, so I skipped that

Did you find this page helpful?