Good evening my good buddies, I have tried backreading this channel for related topics as well as fo

Good evening my good buddies, I have tried backreading this channel for related topics as well as following the instructions here:
https://hono.dev/getting-started/cloudflare-workers#serve-static-files,
https://www.answeroverflow.com/m/1148745533649866762
https://developers.cloudflare.com/workers/configuration/sites/start-from-worker/#add-static-assets-to-an-existing-workers-project

but to no avail, I still can't make it to work..

I want to serve my static files.. I am using Hono with cloudflare workers

hover error:

Cannot find module '__STATIC_CONTENT_MANIFEST' or its corresponding type declarations.ts(2307)

Cannot find module '__STATIC_CONTENT_MANIFEST' or its corresponding type declarations.ts(2307)

// src/index.ts

import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST"; //Cannot find module '__STATIC_CONTENT_MANIFEST' or its corresponding type declarations.ts(2307)


const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));
app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;

// src/index.ts

import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST"; //Cannot find module '__STATIC_CONTENT_MANIFEST' or its corresponding type declarations.ts(2307)


const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));
app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;

// src/index.ts

import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST"; //Cannot find module '__STATIC_CONTENT_MANIFEST' or its corresponding type declarations.ts(2307)


const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));
app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;

// src/index.ts

import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST"; //Cannot find module '__STATIC_CONTENT_MANIFEST' or its corresponding type declarations.ts(2307)


const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));
app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;

#wrangler.toml

name = "hono-htmx"
compatibility_date = "2023-12-01"

main = "src/index.ts"

[site]
bucket = "./assets"

#wrangler.toml

name = "hono-htmx"
compatibility_date = "2023-12-01"

main = "src/index.ts"

[site]
bucket = "./assets"

#wrangler.toml

name = "hono-htmx"
compatibility_date = "2023-12-01"

main = "src/index.ts"

[site]
bucket = "./assets"

#wrangler.toml

name = "hono-htmx"
compatibility_date = "2023-12-01"

main = "src/index.ts"

[site]
bucket = "./assets"

I appreciate the help in advanced!

DDenver James Duran Good evening my good buddies, I have tried backreading this channel for related ...

Denver James DuranOP•2/24/24, 2:05 AM

I devised a silly workaround for this, in case that anyone is experiencing the same, the alternate method I made was to import them as .txt files

now I can serve my static files.. If anybody knows the correct solution, it would be highly appreciated!

DDenver James Duran Good evening my good buddies, I have tried backreading this channel for related ...

Isaac McFadyen•2/24/24, 2:07 AM

This is likely an editor-only error.

Isaac McFadyen•2/24/24, 2:07 AM

The __STATIC_CONTENT_MANIFEST is injected at build-time and isn't typed with Typescript, which means your editor doesn't know about it and gives an error.

Isaac McFadyen•2/24/24, 2:07 AM

If you were to actually deploy the Worker I believe it would work.

Isaac McFadyen•2/24/24, 2:17 AM

You want to create a file called

env.d.ts

env.d.ts

with the content:

declare module '__STATIC_CONTENT_MANIFEST' {
  const manifest: string
  export default manifest
}

declare module '__STATIC_CONTENT_MANIFEST' {
  const manifest: string
  export default manifest
}

IIsaac McFadyen The __STATIC_CONTENT_MANIFEST is injected at build-time and isn't typed with Typ...

Denver James DuranOP•2/24/24, 2:17 AM

that makes sense.. so here's what I did just now, so I simply declared the module in my custom.d.ts so that typescript will know what it is. The red swiggly line disappeared. AND wow it worked! it didn't serve my files yesterday I wonder why!

anyway, I only had one minor problem now... Do I really have to type in all files I want to serve statically? it can't be like everything on that folder?

//custom.d.ts
declare module "__STATIC_CONTENT_MANIFEST" {
    const content: string;
    export default content;
}

//custom.d.ts
declare module "__STATIC_CONTENT_MANIFEST" {
    const content: string;
    export default content;
}

// src/index.ts
import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./lib/templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST";

const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));
app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
app.get("/simple.css", serveStatic({ path: "./simple.css", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;
import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./lib/templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST";

const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));  // This does NOT work...


// below get method should be typed individual files?

app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest })); 
app.get("/simple.css", serveStatic({ path: "./simple.css", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;

// src/index.ts
import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./lib/templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST";

const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));
app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
app.get("/simple.css", serveStatic({ path: "./simple.css", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;
import { Hono } from "hono";
import { serveStatic } from "hono/cloudflare-workers";
import Home from "./lib/templates/index.html";
import manifest from "__STATIC_CONTENT_MANIFEST";

const app = new Hono();

app.get("/static/*", serveStatic({ root: "./", manifest }));  // This does NOT work...


// below get method should be typed individual files?

app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest })); 
app.get("/simple.css", serveStatic({ path: "./simple.css", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

export default app;

Isaac McFadyen•2/24/24, 2:17 AM

That should allow VSCode to pick up on it.

IIsaac McFadyen That should allow VSCode to pick up on it.

Denver James DuranOP•2/24/24, 2:18 AM

It did thank you so much, I created the same thing but I used content instead of manifest I believe it's the same?

DDenver James Duran It did thank you so much, I created the same thing but I used content instead of...

Isaac McFadyen•2/24/24, 2:19 AM

Yup, should be the same.

IIsaac McFadyen Yup, should be the same.

Denver James DuranOP•2/24/24, 2:20 AM

got it.. On the get method.. Do I really have to type in all files I want to serve? I can not just declare that anything on my assets folder should be served on "/" ?

Isaac McFadyen•2/24/24, 2:20 AM

What happens with the first thing you tried? The

root

root

part? Does it just 404?

IIsaac McFadyen What happens with the first thing you tried? The `root` part? Does it just 404?

Denver James DuranOP•2/24/24, 2:22 AM

Yes, that's right

http://127.0.0.1:8787/static/htmx.js

http://127.0.0.1:8787/static/htmx.js

returns

404 Not Found

404 Not Found

Isaac McFadyen•2/24/24, 2:22 AM

It's probably looking in

./static/htmx.js

./static/htmx.js

which fails. You should try

root: /

root: /

Isaac McFadyen•2/24/24, 2:22 AM

(no dot)

IIsaac McFadyen (no dot)

Denver James DuranOP•2/24/24, 2:24 AM

same thing happens..

and when I comment out the specific paths, and go to

http://127.0.0.1:8787/htmx.js

http://127.0.0.1:8787/htmx.js

it now fails and sends

404 Not Found

404 Not Found

app.get("/static/*", serveStatic({ root: "/", manifest }));
// app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
// app.get("/simple.css", serveStatic({ path: "./simple.css", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

app.get("/static/*", serveStatic({ root: "/", manifest }));
// app.get("/htmx.js", serveStatic({ path: "./htmx.js", manifest }));
// app.get("/simple.css", serveStatic({ path: "./simple.css", manifest }));
app.get("/", (c) => {
    return c.html(Home);
});

Denver James DuranOP•2/24/24, 2:25 AM

http://127.0.0.1:8787/static/htmx.js

http://127.0.0.1:8787/static/htmx.js

does the same thing,

404 Not Found

404 Not Found

Denver James DuranOP•2/24/24, 2:25 AM

ahh what if I do it like
./*
./*
bad idea: it gave

500 Internal Server Error

500 Internal Server Error

lol

IIsaac McFadyen It's probably looking in `./static/htmx.js` which fails. You should try `root: /...

Denver James DuranOP•2/24/24, 2:34 AM

Hey I got it to work! Thanks a lot for your help! So what I eventually did was this:

app.get("/*", serveStatic({ root: "./", manifest }));

app.get("/*", serveStatic({ root: "./", manifest }));

so instead of following the docs where they add static, I just removed it all together, now it works just as what I expect. I didn't know how and why it worked, but Im glad lol.

kian•2/25/24, 9:16 PM

Have you given that interface to the 2nd parameter of the handler?

Advany•2/26/24, 1:12 AM

Can't seem to find it, if I add a KV using:

const readable_stream = new Response(JSON.stringify(res)).body;
await c.env.CACHE.put('key' + uuid, readable_stream, { type: "stream", expirationTtl: 86400 });

const readable_stream = new Response(JSON.stringify(res)).body;
await c.env.CACHE.put('key' + uuid, readable_stream, { type: "stream", expirationTtl: 86400 });

and return it using:

var cache = await c.env.CACHE.get('key' + uuid, { type: "stream" });
  if(cache && !reset) {
    console.log('Cached', sql)
    return new Response(cache, { status: 200, headers: { "Content-Type": "application/json" } });
  }

var cache = await c.env.CACHE.get('key' + uuid, { type: "stream" });
  if(cache && !reset) {
    console.log('Cached', sql)
    return new Response(cache, { status: 200, headers: { "Content-Type": "application/json" } });
  }

That would be the fastest way of returning a json thats streamed back right? or am I missing something?

AAdvany Can't seem to find it, if I add a KV using: ``` const readable_stream = new Res...

Hello, I’m Allie!•2/26/24, 6:14 AM

For the first one, you can just put the json string

HHello, I’m Allie!For the first one, you can just put the json string

Advany•2/26/24, 9:10 AM

"For large values, the choice of type can have a noticeable effect on latency and CPU usage. For reference, the type can be ordered from fastest to slowest as stream, arrayBuffer, text, and json."

would that not make it slower?

AAdvany "For large values, the choice of type can have a noticeable effect on latency an...

Hello, I’m Allie!•2/26/24, 9:13 AM

That's for retrieval. All values in KV are stored as

ArrayBuffers

ArrayBuffers

, then are streamed out as a

ReadableStream

ReadableStream

to your Worker, which is why it is fastest. A value stored as a

string

string

can still retrieve be retrieved as a

ReadableStream

ReadableStream

HHello, I’m Allie!That's for retrieval. All values in KV are stored as `ArrayBuffers`, then are st...

Advany•2/26/24, 8:57 PM

didn't know that!

Darick•2/27/24, 6:53 PM

We're planning on using KV as an immutable cache that's accessed by (multiple) Durable Objects in a single location. According to https://developers.cloudflare.com/kv/reference/how-kv-works/, KV data first gets written to a "central store". Is the location of this central store fixed or can it be selected? Ideally we'd want it to be in the same location as our DOs.

As a higher level question, is KV a good tool for this? We want fast / cheap storage in a single location ... the global replication feature of KV is not particularly useful for our case. Are there better alternatives?

DDarick We're planning on using KV as an immutable cache that's accessed by (multiple) D...

Hello, I’m Allie!•2/27/24, 6:56 PM

You can't configure the KV origins. As for an immutable Cache, would a single DO per region not work?

Unsmart•2/27/24, 6:59 PM

KV is not cheap on storage at all. Im confused why you would even introduce KV at all why not just use the durable object storage itself?

UUnsmart KV is not cheap on storage at all. Im confused why you would even introduce KV a...

aarhus•2/27/24, 8:26 PM

KV is much cheaper for larger key values - don't forget that the DO's are charged per 4KB block. Most of my values are in the 40-50KB size - it was much cheaper to switch to DO to be the "single source of truth", use it to coordinate the updates (i.e. replicate DO storage to KV) and then all of the reads are then from KV....

Tony Leung•3/1/24, 11:57 AM

hi guys is there any plan that cloudflare would support bulk put on KV Workers API?

Tony Leung•3/1/24, 11:57 AM

using CF API is not convenient though

ogshadowfiend•3/6/24, 4:00 PM

Question: do KV

delete

delete

calls fail if the key doesn't exist/was auto-expired?

Tyler Hillery•3/7/24, 2:33 AM

Anyone able to help me here?

I'm trying to get Static Form Pages Plugin working with KV on my Astro site. pages-helpTrouble getting Static Form Pages Plugin working with KV on Astro Site

iman•3/8/24, 9:06 AM

Hi everyone, I have two Cloudflare workers deployed on my account. Can I use a shared KV between them?

Iiman Hi everyone, I have two Cloudflare workers deployed on my account. Can I use a s...

Hello, I’m Allie!•3/8/24, 9:08 AM

Yes, if both Workers have a binding with the same ID, then they should write to the same Namespace

iman•3/8/24, 9:11 AM

@HardlyWorkin' Thanks for your response. Will tests and 'wrangler dev' work correctly with this configuration? I believe it only works on the server.

Iiman @HardlyWorkin' Thanks for your response. Will tests and 'wrangler dev' work corr...

Hello, I’m Allie!•3/8/24, 9:14 AM

wrangler dev

wrangler dev

uses local KV namespaces by default. These can be shared with other local instances, but will not affect the KV Namespaces in the cloud

iman•3/8/24, 9:16 AM

I think there might be an issue when two workers attempt to connect to the same shared KV on my local system. I use lerna to have two separate worker. each of them has its own KV storage.

Iiman I think there might be an issue when two workers attempt to connect to the same ...

Hello, I’m Allie!•3/8/24, 9:17 AM

You need to use

--persist-to

--persist-to

to ensure they are both pushing their data to the same directory

iman•3/8/24, 9:19 AM

OMG! I wasn't aware of that. Let me test it out. @HardlyWorkin' , Thank you so much!

39dylan•3/9/24, 12:49 AM

Is there a way for wrangler to

kv:bulk put

kv:bulk put

on local dev?

339dylan Is there a way for wrangler to `kv:bulk put` on local dev?

Cyb3r-Jak3•3/9/24, 12:51 AM

Add

--local

--local

to the command

CCyb3r-Jak3 Add `--local` to the command

39dylan•3/9/24, 12:58 AM

oh nice i must've missed that flag in the docs

bun•3/9/24, 3:22 AM

how much time does it take for kv to be replicated across all regions? seems like after one worker interacting with KV takes for the other worker ~20-ish seconds to get those changes

bun•3/9/24, 3:23 AM

im not actually sure this is the case though

bun•3/9/24, 3:25 AM

like, pages project puts a key, then worker tries to read that key, but it takes 10-20-30 seconds sometimes to changes to occur

Bbun how much time does it take for kv to be replicated across all regions? seems lik...

Chaika•3/9/24, 3:30 AM

It doesn't do replication (except across the two central stores), it works basically like CDN Cache being pull based. When you update a KV value, it will update it in the local cache of the location you updated it in, and also in the central stores.
For other locations, when the cacheTTL expires (default/min 60s), it will fetch from central store again

Good evening my good buddies, I have tried backreading this channel for related topics as well as fo

Similar Threads

Similar Threads

Similar Threads