Hono Static Assets

rob · 2023-09-05T22:21:06.538Z

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

J

JustinNoel•9/5/23, 10:22 PM

is that

wrangler.toml

wrangler.toml

? If so, pages doesn't use that.

E

Erisa•9/5/23, 10:23 PM

That'll be Workers Sites

J

JustinNoel•9/5/23, 10:23 PM

Oh! That's an R2 bucket?

E

Erisa•9/5/23, 10:23 PM

Not R2

EErisa That'll be Workers Sites

J

JustinNoel•9/5/23, 10:23 PM

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

E

Erisa•9/5/23, 10:24 PM

@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' }))

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' }))

R

robOP•9/5/23, 10:24 PM

i have that

R

robOP•9/5/23, 10:24 PM

already

R

robOP•9/5/23, 10:24 PM

// serve static files from assets/static directory
app.get('/static/*', serveStatic({ root: '/' }))

R

robOP•9/5/23, 10:24 PM

so the fules serve fine

R

robOP•9/5/23, 10:24 PM

its just fetching those inside another route

R

robOP•9/5/23, 10:24 PM

to load them in edge

E

Erisa•9/5/23, 10:25 PM

A Worker cannot fetch itself or another Worker that is on the same zone over a HTTPS URL

E

Erisa•9/5/23, 10:25 PM

You would need to use service bindings for the two Workers to communicate

R

robOP•9/5/23, 10:27 PM

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

R

robOP•9/5/23, 10:27 PM

Can they ?

E

Erisa•9/5/23, 10:28 PM

They can do that as well

E

Erisa•9/5/23, 10:29 PM

Bind the two workers together with this: https://developers.cloudflare.com/workers/configuration/bindings/about-service-bindings/

Then you can run

example.com/worker1/*

example.com/worker1/*

example.com/worker1/*

example.com/worker1/* and

example.com/worker2/*

example.com/worker2/*

example.com/worker2/*

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

R

robOP•9/5/23, 10:29 PM

ahhh i see

R

robOP•9/5/23, 10:29 PM

so i gotta rewrite my whole script then

E

Erisa•9/5/23, 10:29 PM

Ideally you just need to swap out

fetch

fetch

for

bindingName.fetch

bindingName.fetch

bindingName.fetch

bindingName.fetch

E

Erisa•9/5/23, 10:30 PM

Shouldnt be an entire rewrite

R

robOP•9/5/23, 10:30 PM

i need to make a whol enew worker then

E

Erisa•9/5/23, 10:30 PM

Why?

R

robOP•9/5/23, 10:30 PM

u said i need two workers now

R

robOP•9/5/23, 10:30 PM

one to fetch the other

E

Erisa•9/5/23, 10:31 PM

I thought you already had two workers. Could you provide more details about the current setup then?

E

Erisa•9/5/23, 10:31 PM

A Worker is fetching itself, right?

R

robOP•9/5/23, 10:34 PM

yea i got one worker only

E

Erisa•9/5/23, 10:38 PM

I would have expected Hono would have a built-in function to fetch its own static assets but I don't think so

E

Erisa•9/5/23, 10:39 PM

On that note, more of a workaround than a solution but you can actually service bind a worker to itself

R

robOP•9/5/23, 10:46 PM

how?

R

robOP•9/5/23, 10:47 PM

i might just re-do this whole thing.. im trying to make an ad-servee that can serve html ads and image ads

R

robOP•9/5/23, 10:47 PM

storing assets in the [site] static was my approach but ig iuess now its biting me a bit

E

Erisa•9/5/23, 10:53 PM

Normally you wouldn't have issues with it, it's just what appears to be Hono's implementation

E

Erisa•9/5/23, 10:53 PM

If you rely heavily on assets I would recommend at least looking into Pages

Rrob how?

E

Erisa•9/5/23, 10:54 PM

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

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

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

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

where

<BINDING_NAME>

<BINDING_NAME>

<BINDING_NAME>

<BINDING_NAME> is what you call the binding as it appears in

env

env

and

service

service

service

service is the workers own name

R

robOP•9/5/23, 10:55 PM

so what do i do

R

robOP•9/5/23, 10:55 PM

in wrangler

E

Erisa•9/5/23, 10:55 PM

Put the above in

wrangler.toml

wrangler.toml

R

robOP•9/5/23, 10:55 PM

which bart

R

robOP•9/5/23, 10:56 PM

part

R

robOP•9/5/23, 10:56 PM

if its the same worker?

R

robOP•9/5/23, 10:56 PM

i can still jut use one worker?

R

robOP•9/5/23, 10:57 PM

i see

R

robOP•9/5/23, 10:57 PM

so i can use one worker?

R

robOP•9/5/23, 10:59 PM

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' } });
            }

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' } });
            }

R

robOP•9/5/23, 10:59 PM

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

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

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

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

R

robOP•9/5/23, 11:00 PM

So that should work ?

R

robOP•9/5/23, 11:00 PM

or dont put the full path

Similar Threads

Similar Threads

Similar Threads