1. Complex answer haha. What's the code doing? Are you fetching external resources? 2. They're the s

WWalshy 1. Complex answer haha. What's the code doing? Are you fetching external resourc...

A

alok•2/28/24, 8:39 AM

The code isn't doing anything. It's instantiating two classes I use everywhere (the constructors just set a bunch of properties). Then returns with
```
Response.json()
```
```
Response.json()
```

WWalshy 1. Complex answer haha. What's the code doing? Are you fetching external resourc...

A

alok•2/28/24, 8:42 AM

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to

=> I do have a D1 binding.

A

alok•2/28/24, 8:42 AM

not all my requests need the D1 binding. I guess I should split things into two workers? Or two distinct pages projects.

S

saitama sendpie•2/28/24, 10:16 AM

I have a Hugo project with the following directories:

├─ functions
│  └─ get_info
│     └─ index.js

├─ functions
│  └─ get_info
│     └─ index.js

When I run

pnpx wrangler dev functions

pnpx wrangler dev functions

it keeps saying

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

When I run it using

pnpx wrangler dev functions/get_info/index.js

pnpx wrangler dev functions/get_info/index.js

my script works perfectly.

This also means, that my build logs show the following error because it can't find the index.js. How do I fix this?

P

poa•2/28/24, 5:45 PM

hi can anyone help me from logging in with only a id

In small web game?

P

poa•2/28/24, 5:45 PM

I got a code

P

poa•2/28/24, 5:45 PM

A public funtion but dont know how to use

L

Lambo•2/29/24, 7:18 PM

Hi, is it not possible to get query parameters via a Pages Function?

I am wanting to do a login callback via a Pages Function, which returns a token as a query parameter, however, my

context.request

context.request

object is completely empty?

I would have expected

context.request.url

context.request.url

to at least exist?

My

JSON.stringify(context)

JSON.stringify(context)

look like:

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

When going to

http://localhost:8788/api/auth-callback?token=aaabbb

http://localhost:8788/api/auth-callback?token=aaabbb

K

kian•2/29/24, 7:20 PM

Just an issue with

JSON.stringify

JSON.stringify

(and sometimes

console.log

console.log

) - it doesn't handle properties on most objects.

K

kian•2/29/24, 7:20 PM

Try logging

context.request.url

context.request.url

directly

L

Lambo•2/29/24, 7:20 PM

Aha!

L

Lambo•2/29/24, 7:20 PM

Thank you!

K

kian•2/29/24, 7:23 PM

fwiw, JSON.stringify is the culprit here

K

kian•2/29/24, 7:23 PM

Even on browsers, you can't stringify the Web API objects

L

Lambo•2/29/24, 7:23 PM

Interesting, good to know

K

kian•2/29/24, 7:23 PM

console.log is better, but still has some issues - util.inspect from the nodejs_compat compatibility flag is much better

L

Lambo•2/29/24, 7:23 PM

Cheers, will keep that in mind

K

kian•2/29/24, 7:23 PM

K

kian•2/29/24, 7:23 PM

It will actually recurse, show Header values, etc

L

Lambo•2/29/24, 7:23 PM

neat.

A

akazwz•3/1/24, 2:33 AM

how cloudflare pages set node_compat, i set nodejs_compat flag in dashboard, but it does not work
and cloudflare worker is normal when set in wrangler.toml

P

Patrick M•3/1/24, 1:12 PM

Would any Cloudflare staff be able to tell me why my deployment failed? Deployment id 8270b12c-f15e-4468-8072-04f3ef0862e9
The cli showed upload success but the dashboard says “failure”.
I changed some dependencies, maybe the bundle size got too large or they are not compatible with the runtime?

PPatrick M Would any Cloudflare staff be able to tell me why my deployment failed? Deployme...

P

Patrick M•3/1/24, 3:54 PM

Still can't figure it out. I tried a few different strategies to pin down the issue:

```
wrangler pages functions build ...
```
```
wrangler pages functions build ...
```
then run the compiled file via plain
```
wrangler dev
```
```
wrangler dev
```
in local and remote mode and
```
wrangler deploy
```
```
wrangler deploy
```
All worked fine. Also the compiled script was 700kb minified gzipped.
`Tried reverting all the packages to the last known good packages. this didn't work too. Then I tried deleting some old deployments (maybe I have too many preview deployments??) Somehow it worked. Then I switched back to the latest main branch and it didn't work again.
Any other ideas of things I should check?

PPatrick M Still can't figure it out. I tried a few different strategies to pin down the is...

P

Patrick M•3/1/24, 4:15 PM

I think was a file size issue! This is a Remix Vite app. I turned on

build.minify

build.minify

in my vite config and it deployed. I guess I am closer to the 1mb limit than I thought.

Does

wrangler pages deploy

wrangler pages deploy

minify by default?

Feature request: Could
```
wrangler pages deploy
```
```
wrangler pages deploy
```
show the uploaded size of the worker bundle? (Right now it just shows
```
Uploading Functions bundle
```
```
Uploading Functions bundle
```
) (Edit I found an existing feature request)
I guess I will write myself a script to print my worker bundle script size and gzipped size to help keep better track of this in the future.

L

Lambo•3/1/24, 5:54 PM

Hey, I want to parse some HTML which I am scraping via a Pages Function. My initial thinking was

HTMLRewriter

HTMLRewriter

would be the way to do this, but I'm not sure now I'm actually trying to implement it.

Essentially, if I was querying on the client I would have something like:

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

If I try implement something similar via

HTMLRewriter

HTMLRewriter

I end up with:

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

However, because

Element

Element

doesn't (as far as I can tell) implement any methods to get the children elements, I'm not sure how I should progress.

Any pointers are greatly appreciated.

KKynson ```javascript export const onRequest: PagesFunction<{}> = async (context) => { ...

I

Isaac McFadyen•3/2/24, 3:42 PM

You are ignoring the fetch request.

I

Isaac McFadyen•3/2/24, 3:42 PM

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

Try this. If you want to modify the response you'll have to change this a bit.

PPatrick M I think was a file size issue! This is a Remix Vite app. I turned on `build.mini...

J

Jeff•3/3/24, 2:11 PM

Hey Patrick! I think I'm running into the same thing, any luck on the size monitoring?

P

Patrick M•3/3/24, 2:49 PM

Not yet, planning to take a look tomorrow. My thinking is to just add a step to my build script that will run the secret/unofficial command “wrangler pages functions build” to compile the workers function, then print the raw and gzipped size of this output. Hopefully this will be accurate enough to be useful but I’m not sure yet.

J

Jeff•3/3/24, 5:15 PM

In my case I forgot to pay for workers paid tier on the new account!

P

Patrick M•3/4/24, 4:34 AM

Here’s the script I came up with to show build stats:

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

P

Patrick M•3/4/24, 4:40 AM

In my case I got these results:

Raw: 6.07 MB
Gzipped: 1.05 MB
Minified: 2.23 MB
Minified & Gzipped: 655.69 kB

It seems like 1mb limit I passed was on the “gzipped” version. So even if secret command “wrangler pages function build —minify” exists “wrangler pages deploy” does in fact not seem to minify. I guess I can understand it because minifying will make the error logs harder to parse, so it should probably not be the default…

Secondly I realized that npm package I recently installed “effect” was 70kb. Removed that and my project seemed to deploy again.

Iits.jcw can service bindings be used to call a Function (Pages) from a worker?

H

Hello, I’m Allie!•3/5/24, 11:23 AM

No

H

Hello, I’m Allie!•3/5/24, 11:23 AM

Or at least not that I know of

H

Hello, I’m Allie!•3/5/24, 11:23 AM

Hm...

CChamp Has Pages Functions supported the Server-Sent Events web standard yet?

Z

zwily•3/9/24, 4:38 AM

You can stream HTTP from a function, which is all you need for SSE. you’ll return a readable stream as your body, and pump data into the stream in a function running in a context.waitUntil thingy

M

Marius Gundersen•3/9/24, 1:38 PM

Isn't there a max time for the function?

M

Marius Gundersen•3/9/24, 1:40 PM

Seems there isn't https://developers.cloudflare.com/workers/platform/limits/#duration

Cloudflare Docs

Limits · Cloudflare Workers docs

Cloudflare Workers plan and platform limits.

E

Erisa•3/9/24, 1:41 PM

There is no max duration

L

Lambo•3/9/24, 9:05 PM

Hello. I've seemingly some how managed to completely screw up CORS on my local environment.
I'm sending a request from a webpage powered by Pages to a Pages Function locally via Wrangler, but it gets blocked by CORS.
It was working just fine, then I started messing with the CORS headers on the Function to try proxy CORS on a third party, but now I can't even get the following to work without a CORS error:

export async function onRequest(context: EventContext<never, string, never>) {
    return new Response("Test", { status: 200 })
}

export async function onRequest(context: EventContext<never, string, never>) {
    return new Response("Test", { status: 200 })
}

export async function onRequest(context: EventContext<never, string, never>) {
    return new Response("Test", { status: 200 })
}

export async function onRequest(context: EventContext<never, string, never>) {
    return new Response("Test", { status: 200 })
}

What have I messed up?

L

Lambo•3/9/24, 9:06 PM

The client side request is simply:

const proxy = new URL(`http://localhost:8788/api/proxy`);
const res = await fetch(proxy);

const proxy = new URL(`http://localhost:8788/api/proxy`);
const res = await fetch(proxy);

const proxy = new URL(`http://localhost:8788/api/proxy`);
const res = await fetch(proxy);

const proxy = new URL(`http://localhost:8788/api/proxy`);
const res = await fetch(proxy);

L

Lambo•3/9/24, 9:08 PM

1. Complex answer haha. What's the code doing? Are you fetching external resources? 2. They're the s

Similar Threads

Similar Threads

Similar Threads