<https://developers.cloudflare.com/fundamentals/get-started/reference/http-request-headers/#cf-worke

K

kianOP•8/14/23, 12:56 AM

It's just a guess - it could also just be that you're not including a

User-Agent

User-Agent

.

C

Cretezy•8/14/23, 12:57 AM

For the future, would be great if this page was linked from https://developers.cloudflare.com/workers/runtime-apis/fetch/

Fetch · Cloudflare Workers docs

The Fetch API provides an interface for asynchronously fetching resources via HTTP requests inside of a Worker.

Kkian Are you stripping the CF-Worker request header in your proxy?

C

Cretezy•8/14/23, 12:59 AM

Yes, this was it! Thank you so much.

Kkian <https://developers.cloudflare.com/fundamentals/get-started/reference/http-reque...

C

Cretezy•8/14/23, 3:00 AM

It is possible to strip this at the fetch level? E.g. By settings it in the headers param

K

kianOP•8/14/23, 3:00 AM

Nope, it's there intentionally to identify Workers.

C

Cretezy•8/14/23, 3:55 AM

Got it, thank you!

O

os•8/14/23, 5:06 AM

Hello.
https://r2-books.oster.dev/ta-today/004.png

by public link i can get metadata in response header?

O

os•8/14/23, 5:10 AM

I will display images on pre-generated pages
pages private used zero trust
image public

S

Sehban•8/14/23, 12:32 PM

Hi, Greetings of the day,

I have a SPA written in angular deployed on cloudflare pages. The root has "main.js" which should be served when called the domain. It is working flawlessly. Now, I am trying to implement Server Side Rendering on it using cloudflare functions. Can anyone share a short code snippet of cloudflare functions, where for every HTTP request, a rendered version of "main.js" is served. Please note I am trying to render it first on functions itself.
I am trying to achieve what is mentioned here: https://blog.cloudflare.com/pages-full-stack-frameworks/
Thanks in advance..

The Cloudflare Blog

Server-side render full stack applications with Pages Functions

Page Functions are now out of beta, bringing the ability to add dynamic server-side rendering to your applications. Pages makes it easy to deploy applications built using all the major frameworks.

YYoavBls Hi there, since the function folder combines the functions into the same worker,...

H

Hello, I’m Allie!•8/14/23, 1:09 PM

You cannot, no

YYoavBls Thanks So if my project nearly exceeds the size limit, should I create another p...

H

Hello, I’m Allie!•8/14/23, 1:21 PM

There isn't really an easy way to merge two projects together at the moment. Are you currently approaching a 5 MB script?

J

James•8/14/23, 2:06 PM

Your best option for something like that will probably be creating a bunch of Workers and service binding to each of them. https://blog.cloudflare.com/better-micro-frontends/ has an example of this kind of application design.

The Cloudflare Blog

Cloudflare Workers and micro-frontends: made for one another

In this blog-post we demonstrate how hosting and combining multiple server-side rendered micro-frontends on Cloudflare Workers offer a highly scalable, high performance solution to these problems

S

Sehban•8/15/23, 8:16 AM

Hi, Can anyone share any tutorial or article or Code Snippet for rendering an Angular Application using cloudflare functions. I am trying to achieve what is mentioned here: https://blog.cloudflare.com/pages-full-stack-frameworks/

The Cloudflare Blog

Server-side render full stack applications with Pages Functions

Page Functions are now out of beta, bringing the ability to add dynamic server-side rendering to your applications. Pages makes it easy to deploy applications built using all the major frameworks.

C

Cretezy•8/15/23, 9:40 PM

Hi! Is

botManagement.score

botManagement.score

always 99 for non-pro accounts?

CCretezy Hi! Is `botManagement.score` always 99 for non-pro accounts?

D

Dahoom•8/16/23, 12:17 AM

yes, apparently that's a placeholder since they had problems keeping it empty. I think you can only get access to botManagement.score if you have enterprise

D

dave•8/16/23, 5:45 PM

How do I create a function that intercepts all HTML requests to my SPA?

D

dave•8/16/23, 5:45 PM

do I create

[[catchall]].html

[[catchall]].html

?

J

James•8/16/23, 5:47 PM

You would probably need a generic

[[catchall]]

[[catchall]]

, run

next()

next()

and then check the content-type

D

dave•8/16/23, 5:47 PM

what's

next()

next()

?

J

James•8/16/23, 5:48 PM

https://developers.cloudflare.com/pages/platform/functions/api-reference/#eventcontext

runs the next middleware, or finally asset server

J

James•8/16/23, 5:48 PM

so you could,

const asset = await next();

const asset = await next();

, check

asset.headers

asset.headers

for HTML, and do something, or just return early

D

dave•8/16/23, 5:49 PM

and what do I return?

J

James•8/16/23, 5:49 PM

a

Response

Response

D

dave•8/16/23, 5:49 PM

export function onRequest(context) {
  // return new Response(JSON.stringify(context.params.catchall))
  return next();
}

export function onRequest(context) {
  // return new Response(JSON.stringify(context.params.catchall))
  return next();
}

export function onRequest(context) {
  // return new Response(JSON.stringify(context.params.catchall))
  return next();
}

export function onRequest(context) {
  // return new Response(JSON.stringify(context.params.catchall))
  return next();
}

J

James•8/16/23, 5:49 PM

yep

D

dave•8/16/23, 5:49 PM

Cannot find name 'next'.ts(2304)

Cannot find name 'next'.ts(2304)

J

James•8/16/23, 5:49 PM

It's on

context

context

```
context.next()
```
```
context.next()
```

J

James•8/16/23, 5:50 PM

The link above will show you everything on

context

context

via the

EventContext

EventContext

type

D

dave•8/16/23, 5:50 PM

export async function onRequest(context: EventContext) {
  console.log("hey")
  const asset = await context.next()
  return asset;
}

export async function onRequest(context: EventContext) {
  console.log("hey")
  const asset = await context.next()
  return asset;
}

export async function onRequest(context: EventContext) {
  console.log("hey")
  const asset = await context.next()
  return asset;
}

export async function onRequest(context: EventContext) {
  console.log("hey")
  const asset = await context.next()
  return asset;
}

J

James•8/16/23, 5:51 PM

there's a slightly nicer type, sec, but that looks fine yes

D

dave•8/16/23, 5:52 PM

ty! Yeah the type was my next question, since VS Code doesn't like

EventContext

EventContext

J

James•8/16/23, 5:52 PM

export const onRequestGet: PagesFunction<{}> = async (context) => {

export const onRequestGet: PagesFunction<{}> = async (context) => {

J

James•8/16/23, 5:52 PM

there's

PagesFunction

PagesFunction

J

James•8/16/23, 5:52 PM

Make you have

@cloudflare/workers-types

@cloudflare/workers-types

setup

J

James•8/16/23, 5:53 PM

PagesFunction

PagesFunction

is defined as such: https://github.com/Cloudflare-Mining/Cloudflare-Datamining/blob/0b79abe411f535f0f202aac4ec5fca1504c5d4aa/data/workers-types/experimental/index.ts#L3061

D

dave•8/16/23, 5:53 PM

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "types": ["@cloudflare/workers-types"]
  }
}

D

dave•8/16/23, 5:54 PM

    "@cloudflare/workers-types": "^4.20221111.1",

    "@cloudflare/workers-types": "^4.20221111.1",

D

dave•8/16/23, 5:54 PM

ah that might be why

J

James•8/16/23, 5:55 PM

PagesFunction

PagesFunction

should exist in that version too afaik

D

dave•8/16/23, 5:55 PM

Type '(context: EventContext<{}, any, Record<string, unknown>>) => Promise<void>' is not assignable to type 'PagesFunction<{}, any, Record<string, unknown>>'.
  Type 'Promise<void>' is not assignable to type 'Response | Promise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.ts(2322)
const onRequestGet: PagesFunction<{}, any, Record<string, unknown>>

Type '(context: EventContext<{}, any, Record<string, unknown>>) => Promise<void>' is not assignable to type 'PagesFunction<{}, any, Record<string, unknown>>'.
  Type 'Promise<void>' is not assignable to type 'Response | Promise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.ts(2322)
const onRequestGet: PagesFunction<{}, any, Record<string, unknown>>

Type '(context: EventContext<{}, any, Record<string, unknown>>) => Promise<void>' is not assignable to type 'PagesFunction<{}, any, Record<string, unknown>>'.
  Type 'Promise<void>' is not assignable to type 'Response | Promise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.ts(2322)
const onRequestGet: PagesFunction<{}, any, Record<string, unknown>>

Type '(context: EventContext<{}, any, Record<string, unknown>>) => Promise<void>' is not assignable to type 'PagesFunction<{}, any, Record<string, unknown>>'.
  Type 'Promise<void>' is not assignable to type 'Response | Promise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.ts(2322)
const onRequestGet: PagesFunction<{}, any, Record<string, unknown>>

D

dave•8/16/23, 5:55 PM

oh wait my bad

D

dave•8/16/23, 5:55 PM

yep fixed

D

dave•8/16/23, 5:56 PM

export const onRequestGet: PagesFunction<{}> = async (context) => {
  const asset = await context.next()
  return asset;
}

export const onRequestGet: PagesFunction<{}> = async (context) => {
  const asset = await context.next()
  return asset;
}

export const onRequestGet: PagesFunction<{}> = async (context) => {
  const asset = await context.next()
  return asset;
}

export const onRequestGet: PagesFunction<{}> = async (context) => {
  const asset = await context.next()
  return asset;
}

D

dave•8/16/23, 5:56 PM

nice, thank you!

J

James•8/16/23, 5:56 PM

sweet!

JJames You would probably need a generic `[[catchall]]`, run `next()` and then check th...

D

dave•8/16/23, 5:58 PM

should I be doing this as a middleware?

<https://developers.cloudflare.com/fundamentals/get-started/reference/http-request-headers/#cf-worke

Similar Threads