H
Hono•3w ago
gave_one

Hono Client Double-Prefixing Issue

I'm running into a problem with my Hono-based project. On the server, I've set up a base path with: app.basePath('/AdminApi'); so all routes (like /AdminApi/test) are automatically prefixed. In my client code, I fixed the initialization by removing the extra /AdminApi: const client = hc<APIRoutes>("http://localhost:3000"); But even after reloading VS Code, restarting the TS server, and cleaning/rebuilding the project, the issue still persists. Has anyone experienced something similar or have any ideas on what else I might check?
No description
No description
No description
5 Replies
ambergristle
ambergristle•3w ago
Are you using built/generated types, or just typeof app? Generated types are recommended (read required) when using the client, especially with larger and/or monorepo projects
atoko
atoko•3w ago
Please follow up after going over https://hono.dev/docs/guides/rpc#compile-your-code-before-using-it-recommended
RPC - Hono
Web framework built on Web Standards for Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Node.js, and others. Fast, but not only fast.
gave_one
gave_oneOP•3w ago
No description
gave_one
gave_oneOP•3w ago
const app = new Hono();
// Logging middleware
app.use('*', logger());
// CORS middleware
app.use('*', cors());

// API route example
const apiRoutes = app.basePath('/api')
.route("/project" , ProjectRoute);
// app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));

apiRoutes.route("/project" , ProjectRoute);
// Serve frontend
app.use('*', serveStatic({ root: './frontend/dist' }));
app.use('*', serveStatic({ path: './frontend/dist/index.html' }));
const port = Number(process.env.PORT || 3000)
Bun.serve({
  hostname: '0.0.0.0',
  port,
  fetch: app.fetch,
})

console.log(`Server is listening at http://localhost:${port}`);
export type APIRoutes = typeof apiRoutes;
const app = new Hono();
// Logging middleware
app.use('*', logger());
// CORS middleware
app.use('*', cors());

// API route example
const apiRoutes = app.basePath('/api')
.route("/project" , ProjectRoute);
// app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));

apiRoutes.route("/project" , ProjectRoute);
// Serve frontend
app.use('*', serveStatic({ root: './frontend/dist' }));
app.use('*', serveStatic({ path: './frontend/dist/index.html' }));
const port = Number(process.env.PORT || 3000)
Bun.serve({
  hostname: '0.0.0.0',
  port,
  fetch: app.fetch,
})

console.log(`Server is listening at http://localhost:${port}`);
export type APIRoutes = typeof apiRoutes;
ambergristle
ambergristle•3w ago
@gave_one generating types will probably help, but you definitely need to chain any routes you want available to the client https://hono.dev/docs/guides/rpc#using-rpc-with-larger-applications

Did you find this page helpful?