https://dash.cloudflare.com/?to=/:account/workers/plans

DDaniFoldi https://dash.cloudflare.com/?to=/:account/workers/plans

V

vakno•2/23/24, 9:34 AM

thank you!

D

Denver James Duran•2/23/24, 1:58 PM

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 ...

D

Denver James Duran•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 ...

I

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

This is likely an editor-only error.

I

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.

I

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

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

I

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
}

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...

D

Denver James Duran•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;
}

//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;

// 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;

I

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.

D

Denver James Duran•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...

I

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

Yup, should be the same.

IIsaac McFadyen Yup, should be the same.

D

Denver James Duran•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 "/" ?

I

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?

D

Denver James Duran•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

I

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: /

I

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

(no dot)

IIsaac McFadyen (no dot)

D

Denver James Duran•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);
});

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

D

Denver James Duran•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

D

Denver James Duran•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: /...

D

Denver James Duran•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 }));

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.

K

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

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

A

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

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...

H

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

A

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...

H

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...

A

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

didn't know that!

D

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...

H

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?

U

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...

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....

T

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

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

T

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

using CF API is not convenient though

O

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

Question: do KV

delete

delete

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

T

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

I

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...

H

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

I

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...

H

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

I

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 ...

H

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

I

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

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

3

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?

C

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

Add

--local

--local

to the command

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

3

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

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

B

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

B

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

im not actually sure this is the case though

https://dash.cloudflare.com/?to=/:account/workers/plans

Similar Threads

Similar Threads

Similar Threads