I'm interested in this concept as well - though I'm using React and not Vue, the principal is the sa

BBensTechLab I'm interested in this concept as well - though I'm using React and not Vue, the...

B

BensTechLabOP•5/30/22, 9:17 PM

Just thinking out loud here... I noticed for pages functions in "advanced mode", you have to serve your static assets in your functions with

return env.ASSETS.fetch(request);

return env.ASSETS.fetch(request);

return env.ASSETS.fetch(request);

return env.ASSETS.fetch(request); (see https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). So at least in advanced mode it seems you could also proxy asset requests to another local development server (ie: create-react-app dev server running on port 3000). It would be a neat idea to add to wrangler2 to provide a local dev server url where you could both be debugging pages functions and running a framework dev server locally (that will later be compiled/transpiled to a bundled/minified production build before being published to pages). This I think describes the ask for people using React/Vue/Angular/etc.

Functions (beta) · Cloudflare Pages docs

Documentation for Cloudflare Pages, the best way to deploy your static and JAMstack sites

BBensTechLab Are pages functions different than cloudflare workers? Ie: don't necessarily hav...

E

Erwin•5/30/22, 11:26 PM

They are mostly the same. Pages Functions basically compile/bundle down to Workers. The current limitations mean that you can't configure the Pages Functions Worker as completely yet as you can a regular Worker. So you can't yet set any compatibility date/flags..

And you can't deploy any Durable Objects inside your Pages repository. (Although you can bind a DO published by another Worker)..

BBensTechLab I'm interested in this concept as well - though I'm using React and not Vue, the...

S

sumit•5/31/22, 10:25 AM

I'm interested in this too, i think using Next.js but essentially the same question

Ssumit How does one protect against a theoretical DDoS on my function?

S

sumit•5/31/22, 10:26 AM

Also this

EElfhild how do i use prisma on cloudflare workers?

I

Isaac McFadyen•5/31/22, 6:52 PM

I'm assuming you mean on Functions. You can't currently use Prisma on Functions because it requires bundling with a bundler like WebPack or

esbuild

esbuild

esbuild

esbuild.

I

Isaac McFadyen•5/31/22, 6:52 PM

If you mean Workers then that's totally possible. But I assumed you meant Functions because this is #functions

A

amorfati•5/31/22, 7:26 PM

anyone experience this with

HTMLRewriter()

HTMLRewriter()

HTMLRewriter()

HTMLRewriter()?

log:

Trace: Response body object should not be disturbed or locked

Trace: Response body object should not be disturbed or locked

Trace: Response body object should not be disturbed or locked

Trace: Response body object should not be disturbed or locked

EElfhild Is D1 planned to work on functions too? do you know?

I

Isaac McFadyen•5/31/22, 7:27 PM

I would assume so, yes. But I doubt immediately after beta launch

IIsaac McFadyen I'm assuming you mean on Functions. You can't currently use Prisma on Functions ...

H

Hello, I’m Allie!•5/31/22, 7:33 PM

You can use a bundler with Functions, right?

Aamorfati anyone experience this with `HTMLRewriter()`? log: `Trace: Response body object...

H

Hello, I’m Allie!•5/31/22, 7:33 PM

Did you read the body before you transform it?

HHello, I’m Allie!You can use a bundler with Functions, right?

I

Isaac McFadyen•5/31/22, 7:33 PM

You can but it negates all of what Functions does, and the command for it is pretty undocumented.

I

Isaac McFadyen•5/31/22, 7:34 PM

(Advanced Mode +

wrangler pages build

wrangler pages build

wrangler pages build

wrangler pages build I think? And then you have to call

next()

next()

next()

next() yourself and it's a mess rn)

HHello, I’m Allie!Did you read the body before you transform it?

A

amorfati•5/31/22, 7:34 PM

  const oldResponse = await next()
  const contentType = oldResponse.headers.get('Content-Type')
  if (contentType && contentType.startsWith('text/html')) {
    const newResponse = handler.transform(oldResponse)
    return oldResponse
  }

  const oldResponse = await next()
  const contentType = oldResponse.headers.get('Content-Type')
  if (contentType && contentType.startsWith('text/html')) {
    const newResponse = handler.transform(oldResponse)
    return oldResponse
  }

  const oldResponse = await next()
  const contentType = oldResponse.headers.get('Content-Type')
  if (contentType && contentType.startsWith('text/html')) {
    const newResponse = handler.transform(oldResponse)
    return oldResponse
  }

  const oldResponse = await next()
  const contentType = oldResponse.headers.get('Content-Type')
  if (contentType && contentType.startsWith('text/html')) {
    const newResponse = handler.transform(oldResponse)
    return oldResponse
  }

A

amorfati•5/31/22, 7:35 PM

It happens when returning the old response. I'm just using new response for logging

Aamorfati It happens when returning the old response. I'm just using new response for logg...

H

Hello, I’m Allie!•5/31/22, 7:35 PM

Once a Response is read, you cannot read it again. If you transform oldResponse, you cannot return it

A

amorfati•5/31/22, 7:36 PM

gotcha

EElfhild Is D1 planned to work on functions too? do you know?

W

Walshy•5/31/22, 7:37 PM

Of course. We will always support all the bindings Workers do. It's a little more complex so there is a delay but we will add it

A

amorfati•5/31/22, 7:38 PM

my end goal is to read the html, find a specific tag with id "article", inject new element under it. When I read the html, it always says "undefined" for the innerHTML even when I use *.

A

amorfati•5/31/22, 7:38 PM

Line 39 here always logs undefined:

K

kian•5/31/22, 7:40 PM

https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/#element

HTMLRewriter · Cloudflare Workers docs

Documentation for Cloudflare Workers, a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.

A

amorfati•5/31/22, 7:40 PM

when I log

console.log('Incoming element: ', JSON.stringify(element, null, 2))

console.log('Incoming element: ', JSON.stringify(element, null, 2))

console.log('Incoming element: ', JSON.stringify(element, null, 2))

console.log('Incoming element: ', JSON.stringify(element, null, 2))

I get:

Incoming element:  {
  "ptr": 1298176
}

Incoming element:  {
  "ptr": 1298176
}

Incoming element:  {
  "ptr": 1298176
}

Incoming element:  {
  "ptr": 1298176
}

K

kian•5/31/22, 7:40 PM

innerHTML doesn’t seem to be a property of element

A

amorfati•5/31/22, 7:43 PM

the first argument of

on()

on()

on()

on() is what the rewriter will read, everything else ignored. So if I do

HTMLRewriter().on('*', new ElementHandler())

HTMLRewriter().on('*', new ElementHandler())

HTMLRewriter().on('*', new ElementHandler())

HTMLRewriter().on('*', new ElementHandler()) then filter for element with tagName "article" inside the

ElementHandler

ElementHandler

ElementHandler

ElementHandler class, it's the same as

HTMLRewriter().on('article', new ElementHandler())

HTMLRewriter().on('article', new ElementHandler())

HTMLRewriter().on('article', new ElementHandler())

HTMLRewriter().on('article', new ElementHandler())?

A

amorfati•5/31/22, 7:44 PM

it's more computation passing

*

* then filtering (is my understanding)

Kkian innerHTML doesn’t seem to be a property of element

A

amorfati•5/31/22, 7:49 PM

thanks, this helps. I think the rest of my problems is the fact that the middleware reader reads the html before the content has been fully loaded.

N

nitsky•5/31/22, 8:07 PM

Hi, is there any support for Rust+WASM in functions?

Ggarrison My function is somehow causing an Error 1101: Worker threw exception, but I don'...

J

James•6/1/22, 2:00 AM

Unfortunately there aren’t any error logs for Functions yet, sorry!

Does your function work locally with pages dev? If so, could you possibly share it here so we can try and help you diagnose why it’s not working in production?

Ggarrison Thanks for the info! I actually don't even know how to test it locally, but I wi...

J

James•6/1/22, 2:04 AM

I’d definitely recommend testing locally first then: https://developers.cloudflare.com/pages/platform/functions/#develop-and-preview-locally
That should give you a pretty good representation of how things will run and should let you diagnose any major issues

Functions (beta) · Cloudflare Pages docs

Documentation for Cloudflare Pages, the best way to deploy your static and JAMstack sites

Ggarrison I'm running it locally. Where should I expect an error log to appear? (In the ...

J

James•6/1/22, 2:13 AM

Console, if there are any errors

J

James•6/1/22, 2:13 AM

Is it working fine locally?

J

James•6/1/22, 2:15 AM

Can you share the function code/repo? That seems odd

Ggarrison https://github.com/garrison/cloudflare-pages-shared-password/blob/main/functions...

J

James•6/1/22, 2:22 AM

Thanks. Couple of immediate things: the errors you're throwing aren't really errors, so they're being logged weirdly - that's why you're seeing the

object Object

object Object

object Object

object Object logs

J

James•6/1/22, 2:22 AM

Replace your errors with something like this (haven't solved any typescript things):

class UnauthorizedException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 401;
    this.statusText = 'Unauthorized';
    this.reason = reason;
  }
}

class BadRequestException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 400;
    this.statusText = 'Bad Request';
    this.reason = reason;
  }
}

class UnauthorizedException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 401;
    this.statusText = 'Unauthorized';
    this.reason = reason;
  }
}

class BadRequestException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 400;
    this.statusText = 'Bad Request';
    this.reason = reason;
  }
}

class UnauthorizedException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 401;
    this.statusText = 'Unauthorized';
    this.reason = reason;
  }
}

class BadRequestException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 400;
    this.statusText = 'Bad Request';
    this.reason = reason;
  }
}

class UnauthorizedException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 401;
    this.statusText = 'Unauthorized';
    this.reason = reason;
  }
}

class BadRequestException extends Error {
  constructor(reason) {
    super(reason);
    this.status = 400;
    this.statusText = 'Bad Request';
    this.reason = reason;
  }
}

I'm interested in this concept as well - though I'm using React and not Vue, the principal is the sa

Similar Threads