How to deploy a full stack app using cloudflare workers with astro as frontend and hono as backend?

I used

npm create cloudflare@latest -- my-astro-app --framework=astro

npm create cloudflare@latest -- my-astro-app --framework=astro

to create my starter template, then I create an

api/workers.js

api/workers.js

with

import { Hono } from 'hono'
const app = new Hono()

app.get('/hono', (c) => c.text('Hono!'))

export default app

import { Hono } from 'hono'
const app = new Hono()

app.get('/hono', (c) => c.text('Hono!'))

export default app

and updated my wrangler.jsonc

"main"="./api/workers.js"

"main"="./api/workers.js"

I am able to build using

npm run preview

npm run preview

, and then if I go to

localhost:8787

localhost:8787

I can see the static assets, and if I go to

localhost:8787/hono

localhost:8787/hono

I can see the reply from hono.

But my question is, how do I access

/hono

/hono

within Astro? It seems to be all API endpoint or actions doesnt work well... any pointers?