Cloudflare Developers•14mo ago

Hono Static Assets

they are in /assets/static and in wrangkler its [site] bucket = "./assets"

29 Replies

JustinNoel•14mo ago

is that wrangler.toml? If so, pages doesn't use that.

Erisa•14mo ago

That'll be Workers Sites

JustinNoel•14mo ago

Oh! That's an R2 bucket?

Erisa•14mo ago

Not R2

JustinNoel•14mo ago

Duh! I was thinking i was in the pages channel.

Erisa•14mo ago

@devivo Per https://hono.dev/getting-started/cloudflare-workers#serve-static-files

import { Hono } from 'hono'
import { serveStatic } from 'hono/cloudflare-workers'

const app = new Hono()

app.get('/static/*', serveStatic({ root: './' }))
app.get('/favicon.ico', serveStatic({ path: './favicon.ico' }))

import { Hono } from 'hono'
import { serveStatic } from 'hono/cloudflare-workers'

const app = new Hono()

app.get('/static/*', serveStatic({ root: './' }))
app.get('/favicon.ico', serveStatic({ path: './favicon.ico' }))

rob•14mo ago

i have that already // serve static files from assets/static directory app.get('/static/*', serveStatic({ root: '/' })) so the fules serve fine its just fetching those inside another route to load them in edge

Erisa•14mo ago

A Worker cannot fetch itself or another Worker that is on the same zone over a HTTPS URL You would need to use service bindings for the two Workers to communicate

rob•14mo ago

yah but the two workers cant share the same domain right? Can they ?

Erisa•14mo ago

They can do that as well Bind the two workers together with this: https://developers.cloudflare.com/workers/configuration/bindings/about-service-bindings/ Then you can run example.com/worker1/* and example.com/worker2/* or whatever routes you need. And when a Worker needs to fetch the other Worker, do not use the public URL through direct fetch, do it through the service binding instead

rob•14mo ago

ahhh i see so i gotta rewrite my whole script then

Erisa•14mo ago

Ideally you just need to swap out fetch for bindingName.fetch Shouldnt be an entire rewrite

rob•14mo ago

i need to make a whol enew worker then

Erisa•14mo ago

Why?

rob•14mo ago

u said i need two workers now one to fetch the other

Erisa•14mo ago

I thought you already had two workers. Could you provide more details about the current setup then? A Worker is fetching itself, right?

rob•14mo ago

yea i got one worker only

Erisa•14mo ago

I would have expected Hono would have a built-in function to fetch its own static assets but I don't think so On that note, more of a workaround than a solution but you can actually service bind a worker to itself

rob•14mo ago

how? i might just re-do this whole thing.. im trying to make an ad-servee that can serve html ads and image ads storing assets in the [site] static was my approach but ig iuess now its biting me a bit

Erisa•14mo ago

Normally you wouldn't have issues with it, it's just what appears to be Hono's implementation If you rely heavily on assets I would recommend at least looking into Pages

services = [
  { binding = "<BINDING_NAME>", service = "<WORKER_NAME>" }
]

services = [
  { binding = "<BINDING_NAME>", service = "<WORKER_NAME>" }
]

where <BINDING_NAME> is what you call the binding as it appears in env and service is the workers own name

rob•14mo ago

so what do i do in wrangler

Erisa•14mo ago

Put the above in wrangler.toml

rob•14mo ago

which bart part if its the same worker? i can still jut use one worker? i see so i can use one worker?

else if (ad.type === 'html') {
                console.log("HTML Ad: ", ad);
                const htmlUrl = `https://alveoplatform.com/static/${ad.asset}`; // The HTML URL is now relative to the /static directory
                console.log("HTML URL: ", htmlUrl);
                const response = await adWorker.fetch(`https://alveoplatform.com/static/${ad.asset}`);
                const htmlContent = await response.text();
                return c.text(htmlContent, { headers: { 'Content-Type': 'text/html' } });
            }

else if (ad.type === 'html') {
                console.log("HTML Ad: ", ad);
                const htmlUrl = `https://alveoplatform.com/static/${ad.asset}`; // The HTML URL is now relative to the /static directory
                console.log("HTML URL: ", htmlUrl);
                const response = await adWorker.fetch(`https://alveoplatform.com/static/${ad.asset}`);
                const htmlContent = await response.text();
                return c.text(htmlContent, { headers: { 'Content-Type': 'text/html' } });
            }

[[services]]
binding = "adWorker"
service = "round-hall-6886"

[[services]]
binding = "adWorker"
service = "round-hall-6886"

So that should work ? or dont put the full path in the adWorker.fetch ?

Erisa•14mo ago

Keep the full domain and path in it

rob•14mo ago

hmm

Erisa•14mo ago

assuming adWorker is available that will work but it will most likely be c.env.adWorker instead for hono

rob•14mo ago

Wait, it kinda worked but the images dont load example see here: https://alveoplatform.com/static/g/index.html but if <script src="https://alveoplatform.com/adServe/fzCZ3GQW"></script> When i put the adtag in

rob•14mo ago

rob•14mo ago

see the difference? So its serving the html but paths getting messed up, we're getting close lol TY both btw, so close lo I think i need to use direct absolute paths in the oriignak HTML file

Gaming

Programming

Hono Static Assets