I think was a file size issue! This is a Remix Vite app. I turned on `build.minify` in my vite confi

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 MOP•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 MOP•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 MOP•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

L

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

What I don't understand is, it is every alternate request...

L

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

If I change my Functions code to:

const res = new Response("Test", { status: 200 });
res.headers.set("Access-Control-Allow-Origin", "http://127.0.0.1:8788");
return res;

const res = new Response("Test", { status: 200 });
res.headers.set("Access-Control-Allow-Origin", "http://127.0.0.1:8788");
return res;

const res = new Response("Test", { status: 200 });
res.headers.set("Access-Control-Allow-Origin", "http://127.0.0.1:8788");
return res;

const res = new Response("Test", { status: 200 });
res.headers.set("Access-Control-Allow-Origin", "http://127.0.0.1:8788");
return res;

It does fix it, however, I feel like (I'm 99% sure anyway) I never had to do this before

L

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

I think it's a caching issue on my browser, nevermind

I

IEatBeans•3/10/24, 6:43 AM

Hey, I was wondering if its possible to use logpush with R2 on pages functions? Theres some documentation for using it with workers, but is it possible with pages functions or do they not support tail workers?

IIEatBeans Hey, I was wondering if its possible to use logpush with R2 on pages functions? ...

C

Chaika•3/10/24, 6:39 PM

Pages does not support workers logpush or tail functions at this time

CChaika Pages does not support workers logpush or tail functions at this time

I

IEatBeans•3/10/24, 6:56 PM

Alright that’s what I thought. Is there another recommended way to do logging with pages functions?

P

Paolo•3/11/24, 10:14 AM

is there an example to receive a file uploads via POST? and maybe uploading it to R2? can anyone share a snippet please?

PPaolo is there an example to receive a file uploads via POST? and maybe uploading it t...

H

Hello, I’m Allie!•3/11/24, 10:21 AM

Like this?

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

HHello, I’m Allie!Like this? ```ts export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = as...

P

Paolo•3/11/24, 10:22 AM

perfect, but how do i know if ctx.request.body is a file and get the file name?

PPaolo perfect, but how do i know if ctx.request.body is a file and get the file name?

H

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

How are the uploads created?

H

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

Is it with a form?

HHello, I’m Allie!How are the uploads created?

P

Paolo•3/11/24, 10:24 AM

I haven't decided, I'm writing it up now

P

Paolo•3/11/24, 10:24 AM

I'm open to suggestions

P

Paolo•3/11/24, 11:17 AM

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

P

Paolo•3/11/24, 11:18 AM

for some reason I never ever handled image upload in my life

M

Marius Gundersen•3/11/24, 11:27 AM

Have a look at the request in your browsers devtools when you upload, you'll see that it starts with some plain text then it is followed by the actual image bytes. You can use ctx.request.text() to parse this yourself or look for a library that can handle multipart form content for you

PPaolo ``` let photo = document.getElementById("image-file").files[0]; let formData = n...

H

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

You can use https://developer.mozilla.org/en-US/docs/Web/API/Request/formData to get a

formData

formData

formData

formData object from the

Response

Response

Response

Response

MDN Web Docs

Request: formData() method - Web APIs | MDN

The formData() method of the Request interface
reads the request body and returns it as a promise that resolves with a FormData object.

L

Lambo•3/11/24, 11:48 AM

Hello,

I'm trying to disable local mode so that I can access my production D1 instance via my Pages Function.

I had originally expected there to just be the option to press

l

l like when running workers in dev to disable this, but there isn't. This led me to discover the

--local false

--local false

--local false

--local false flag. However, this doesn't do anything. I can see my binding is still referencing a local miniflare database.

When running

npx wrangler pages dev public --local false

npx wrangler pages dev public --local false

npx wrangler pages dev public --local false

npx wrangler pages dev public --local false I see:

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Any ideas? Thanks

LLambo Hello, I'm trying to disable local mode so that I can access my production D1 ...

H

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

Pages Dev is local-only at the moment

L

Lambo•3/11/24, 11:50 AM

That's annoying, I don't suppose there's any form of workaround?

L

Lambo•3/11/24, 11:51 AM

or a way I can set a worker I have to be local, and have the pages function access that?

LLambo or a way I can set a worker I have to be local, and have the pages function acce...

H

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

Maybe adapting https://www.npmjs.com/package/cf-bindings-proxy to use Workers instead of Pages?

npm

cf-bindings-proxy

Experimental proxy for interfacing with bindings in projects targeting Cloudflare Pages. Latest version: 0.7.1, last published: 4 months ago. Start using cf-bindings-proxy in your project by running

npm i cf-bindings-proxy

npm i cf-bindings-proxy

npm i cf-bindings-proxy

npm i cf-bindings-proxy. There are no other projects in the npm registry using cf-bindings-proxy.

L

Lambo•3/11/24, 11:51 AM

I'll investigate. Thanks

L

Lambo•3/11/24, 11:52 AM

Is non-local mode for pages dev planned?

I think was a file size issue! This is a Remix Vite app. I turned on `build.minify` in my vite confi

Similar Threads

Similar Threads

Similar Threads