By default, the `Request` type doesn't have a parsed body. This allows you to skip reading it if you

HHello, I’m Allie!By default, the `Request` type doesn't have a parsed body. This allows you to sk...

T

Tincan•4/2/24, 9:57 AM

ah right cool, that makes sense

T

Tincan•4/2/24, 9:58 AM

thanks

V

vimo•4/2/24, 1:33 PM

I am a little confused about pages function, is it just like clouldflare workers and can be fetched?
so

functions/hello.ts

functions/hello.ts

functions/hello.ts

functions/hello.ts can be fetched like

fetch('/hello')

fetch('/hello')

fetch('/hello')

fetch('/hello') in my fullstack app?
Because when I do that in my remix app and try running it locally using wrangler, I can access directly via

http://127.0.0.1:8787/hello

http://127.0.0.1:8787/hello

http://127.0.0.1:8787/hello

http://127.0.0.1:8787/hello but fetching it gives an error

Invalid URL string. checkURL

Invalid URL string. checkURL

Invalid URL string. checkURL

Invalid URL string. checkURL

Vvimo I am a little confused about pages function, is it just like clouldflare workers...

R

Ruxorly•4/2/24, 2:12 PM

try to use the full path

R

Ruxorly•4/2/24, 2:12 PM

so in your fetch do “http://127.0.0.1:8787/hello” as the url

R

Ruxorly•4/2/24, 2:12 PM

obviously in a production app you’d change that tho

V

vimo•4/2/24, 2:13 PM

thanks. let me try that.

V

vimo•4/2/24, 2:14 PM

found an example https://developers.cloudflare.com/pages/tutorials/build-an-api-with-pages-functions/ they use relative url in it.

RRuxorly try to use the full path

V

vimo•4/2/24, 2:17 PM

thanks. absolute url works. makes me wonder is this just a wrangler local dev thing? and on deployment relative should work?

Vvimo thanks. absolute url works. makes me wonder is this just a wrangler local dev th...

R

Ruxorly•4/2/24, 2:23 PM

although i’m not well versed in remix, they could have a check to see if it’s a valid full url

R

Ruxorly•4/2/24, 2:24 PM

you might be able to use an environment variable to see if it’s running on prod and if it is, use that base url, otherwise use 127.0.0.1

V

vimo•4/2/24, 2:30 PM

You are not wrong to assume that but relative urls in Remix works.
Yes, I guess for now I will use a local env to concatenate it with the cf pages endpoint in my fetch calls. Will figure it out later when deploying if theres a better way or just if local concatenate else relative.
I hope relative url on deployment works.
Thanks for the help and env suggestion. Really appreciate it.

V

vimo•4/3/24, 9:27 AM

Are pages functions by default CORS protected? Since the function route works like an endpoint, do I have to worry about CORS protection?
Edit: Ah I see https://developers.cloudflare.com/pages/functions/examples/cors-headers/

L

Laurent Pellegrino•4/3/24, 9:51 AM

Hey there!

Using Cloudflare pages functions, local building works great.

Everything compile with

wrangler pages dev  dist/

wrangler pages dev dist/

wrangler pages dev  dist/

wrangler pages dev dist/. Same using

wrangler pages functions build

wrangler pages functions build

. This last says

Compiled Worker successfully.

If I compile locally and deploy with the next command, again the app is compiled and deployed with success :

wrangler pages deploy  dist/ --project-name my-project

wrangler pages deploy dist/ --project-name my-project

wrangler pages deploy  dist/ --project-name my-project

wrangler pages deploy dist/ --project-name my-project.

However, if a page build is triggered on Cloudflare based on git push, then the build fails with errors like the following:

11:31:45.603 Found Functions directory at /functions. Uploading.
11:31:46.776    ✘ [ERROR] 26 error(s) and 0 warning(s) when compiling Worker.
...
11:31:46.810      [[route]].ts:6:30: ERROR: Could not resolve "hono"
11:31:46.810      [[route]].ts:9:23: ERROR: Could not resolve "hono/cloudflare-pages"
11:31:46.810      [[route]].ts:10:21: ERROR: Could not resolve "hono/html"

11:31:45.603 Found Functions directory at /functions. Uploading.
11:31:46.776    ✘ [ERROR] 26 error(s) and 0 warning(s) when compiling Worker.
...
11:31:46.810      [[route]].ts:6:30: ERROR: Could not resolve "hono"
11:31:46.810      [[route]].ts:9:23: ERROR: Could not resolve "hono/cloudflare-pages"
11:31:46.810      [[route]].ts:10:21: ERROR: Could not resolve "hono/html"

11:31:45.603 Found Functions directory at /functions. Uploading.
11:31:46.776    ✘ [ERROR] 26 error(s) and 0 warning(s) when compiling Worker.
...
11:31:46.810      [[route]].ts:6:30: ERROR: Could not resolve "hono"
11:31:46.810      [[route]].ts:9:23: ERROR: Could not resolve "hono/cloudflare-pages"
11:31:46.810      [[route]].ts:10:21: ERROR: Could not resolve "hono/html"

11:31:45.603 Found Functions directory at /functions. Uploading.
11:31:46.776    ✘ [ERROR] 26 error(s) and 0 warning(s) when compiling Worker.
...
11:31:46.810      [[route]].ts:6:30: ERROR: Could not resolve "hono"
11:31:46.810      [[route]].ts:9:23: ERROR: Could not resolve "hono/cloudflare-pages"
11:31:46.810      [[route]].ts:10:21: ERROR: Could not resolve "hono/html"

Here is the link to the build in question: https://dash.cloudflare.com/ffba33b855ee4ded76deff01907fee6a/pages/view/ipregistry-landing/009a6e06-f999-4277-8c76-f70b96e3a734

I have no idea about what's the issue is. Did you already experience something similar?

L

Laurent Pellegrino•4/3/24, 10:44 AM

I had to update my build command to run npm install in functions directory :X

Z

zhen•4/4/24, 5:08 AM

Hello, workers now supports Python. Does anyone know if we can use Python in pages/functions yet?

Zzhen Hello, workers now supports Python. Does anyone know if we can use Python in pag...

I

Isaac McFadyen•4/4/24, 12:50 PM

I don't believe you can, and I don't think it will be coming. Pages relies on bundling your Functions into one big Worker at deploy time, which wouldn't really work with some being Python and some not - plus they inject custom code which is written in JS, which also wouldn't really work.

I

IEatBeans•4/8/24, 2:57 AM

I see that pages now supports a wrangler.toml. This is great, but what happens if you already have one for workers in the same project? I am using pages functions primarily, but workers for a few cron tasks. Do I need to move all the workers stuff into a subrepo, or can they both share a toml file?

I

i.wont.tell•4/8/24, 11:29 PM

guys I've added a turnstile widget to my site and depending if it's successful (both challengeand verification) an element is shown, the first time it worked well, then I reloaed the page and now I'm getting:

Request for the Private Access Token challenge.
The next request for the Private Access Token challenge may return a 401 and show a warning in console.

Request for the Private Access Token challenge.
The next request for the Private Access Token challenge may return a 401 and show a warning in console.

I

i.wont.tell•4/8/24, 11:29 PM

But the verification is passed

I

i.wont.tell•4/8/24, 11:29 PM

Why?

I

i.wont.tell•4/8/24, 11:30 PM

What I'm also curious about is why it warns that I'm going to get a 401, like it knows about it before hand, why is this happening?

Ii.wont.tell guys I've added a turnstile widget to my site and depending if it's successful (...

I

Isaac McFadyen•4/9/24, 12:07 AM

?PAT-401

F

Flare•4/9/24, 12:07 AM

Seeing a 401 error in your console during a Turnstile security check?
You can safely ignore the error, it's requesting a PAT but your device/browser does not support PATs yet, so you see the error.
Learn more: https://blog.cloudflare.com/eliminating-captchas-on-iphones-and-macs-using-new-standard/

I

Isaac McFadyen•4/9/24, 12:07 AM

TLDR: you can ignore the error, it's expected.

I

i.wont.tell•4/9/24, 12:08 AM

thanks!

C

cheshirecat•4/9/24, 1:23 AM

Hi All, I have a possibly very dumb question, but I'm trying to figure out how to do Server Side Includes work. Is there a doc I'm missing or something? Thanks

R

Ricky U•4/9/24, 6:47 AM

when installing packagines via npm within the /functions folder how will cloudflare pick up the js file and the route?

RRicky U when installing packagines via npm within the /functions folder how will cloudfl...

H

Hello, I’m Allie!OP•4/9/24, 6:49 AM

I would generally recommend installing the packages outside of the folder(in the root), then just

import

import

ing depencies in as necessary

R

Ricky U•4/9/24, 8:06 AM

@HardlyWorkin' so i would npm init within the /functions folder, i see. i was actually creating subfolders and installing the packages there. wasnt sure how the functions would be called though since they are not in each of their own folders..

R

Ricky U•4/9/24, 8:07 AM

also too, can i update a function without deploying to git everytime?

RRicky U @HardlyWorkin' so i would npm init within the /functions folder, i see. i was ac...

H

Hello, I’m Allie!OP•4/9/24, 8:09 AM

Something like this:

/
  functions/
    index.js
    thing.js
    ... etc
  /public
    index.html
    index.css
    ... etc
  package.json

/
  functions/
    index.js
    thing.js
    ... etc
  /public
    index.html
    index.css
    ... etc
  package.json

/
  functions/
    index.js
    thing.js
    ... etc
  /public
    index.html
    index.css
    ... etc
  package.json

/
  functions/
    index.js
    thing.js
    ... etc
  /public
    index.html
    index.css
    ... etc
  package.json

R

Ricky U•4/9/24, 8:10 AM

i see. i am sure this has asked before but currently in pages functions can i updat them without pushing to my git repo all the time?

RRicky U i see. i am sure this has asked before but currently in pages functions can i up...

H

Hello, I’m Allie!OP•4/9/24, 8:11 AM

Answered in https://canary.discord.com/channels/595317990191398933/789155108529111069/1227168299834675200

R

Ricky U•4/9/24, 10:01 AM

in cf workers functions, Do i need to allow cors for every function?

B

BiltongLover•4/10/24, 7:39 PM

Is there any update on the ETA for when we can expect logpush to be available for Pages? It's really difficult/impossible to monitor my Remix application running on Pages without logs

N

Nima•4/10/24, 7:48 PM

How do you read your environment variables from wrangler.toml in Cloudflare Functions?

When I run in the function I get:

const publishableKey = env.STRIPE_PUBLISHABLE_KEY

const publishableKey = env.STRIPE_PUBLISHABLE_KEY

const publishableKey = env.STRIPE_PUBLISHABLE_KEY

const publishableKey = env.STRIPE_PUBLISHABLE_KEY

I get:

[wrangler:err] TypeError: Cannot read properties of undefined (reading 'STRIPE_PUBLISHABLE_KEY')

[wrangler:err] TypeError: Cannot read properties of undefined (reading 'STRIPE_PUBLISHABLE_KEY')

[wrangler:err] TypeError: Cannot read properties of undefined (reading 'STRIPE_PUBLISHABLE_KEY')

[wrangler:err] TypeError: Cannot read properties of undefined (reading 'STRIPE_PUBLISHABLE_KEY')

The function format is as following:

export async function onRequestGet(res, env, ctx) {  
// Code
}

export async function onRequestGet(res, env, ctx) {  
// Code
}

export async function onRequestGet(res, env, ctx) {  
// Code
}

export async function onRequestGet(res, env, ctx) {  
// Code
}

NNima **How do you read your environment variables from wrangler.toml in Cloudflare Fu...

H

Hello, I’m Allie!OP•4/10/24, 8:03 PM

Can you share your

wrangler.toml

wrangler.toml

? Feel free to replace the key with a random value.

H

Hello, I’m Allie!OP•4/10/24, 8:04 PM

Or if it is supposed to be a secret, you can use a

.dev.vars

.dev.vars

file

HHello, I’m Allie!Or if it is supposed to be a secret, you can use a `.dev.vars` file

N

Nima•4/10/24, 8:06 PM

name = "name"
pages_build_output_dir = "./dist"
compatibility_date = "2023-10-21"
compatibility_flags = ["nodejs_compat"]


[vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

[env.production.vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

name = "name"
pages_build_output_dir = "./dist"
compatibility_date = "2023-10-21"
compatibility_flags = ["nodejs_compat"]


[vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

[env.production.vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

name = "name"
pages_build_output_dir = "./dist"
compatibility_date = "2023-10-21"
compatibility_flags = ["nodejs_compat"]


[vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

[env.production.vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

name = "name"
pages_build_output_dir = "./dist"
compatibility_date = "2023-10-21"
compatibility_flags = ["nodejs_compat"]


[vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

[env.production.vars]
STRIPE_PUBLISHABLE_KEY = "sdfsf"
STRIPE_SECRET_KEY = "sdfsfds"
STRIPE_WEBHOOK_SECRET = "asdad"

N

Nima•4/10/24, 10:03 PM

i fixed it by using:

addEventListener('fetch', event => {
    event.respondWith(onRequestGet(event))
})
export async function onRequestGet(event) {  
  const { env } = event
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestGet(event))
})
export async function onRequestGet(event) {  
  const { env } = event
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestGet(event))
})
export async function onRequestGet(event) {  
  const { env } = event
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestGet(event))
})
export async function onRequestGet(event) {  
  const { env } = event
  // other code
}

N

Nima•4/10/24, 10:19 PM

But I still don't get it, the post equivalent does not work when i do the same:

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event.request, event.env))
})
export async function onRequestGet(req,env) {  
  const requestBody = await req.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event.request, event.env))
})
export async function onRequestGet(req,env) {  
  const requestBody = await req.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event.request, event.env))
})
export async function onRequestGet(req,env) {  
  const requestBody = await req.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event.request, event.env))
})
export async function onRequestGet(req,env) {  
  const requestBody = await req.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

Or:

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event))
})
export async function onRequestGet(event) {  
  const { request, env } = event;
  const requestBody = await request.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event))
})
export async function onRequestGet(event) {  
  const { request, env } = event;
  const requestBody = await request.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event))
})
export async function onRequestGet(event) {  
  const { request, env } = event;
  const requestBody = await request.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

addEventListener('fetch', event => {
    event.respondWith(onRequestPost(event))
})
export async function onRequestGet(event) {  
  const { request, env } = event;
  const requestBody = await request.json();
  const key = env.STRIPE_SECRET_KEY;
  // other code
}

both of these will give a error.

W

Walshy•4/10/24, 10:21 PM

functions doesn't have

addEventListener

addEventListener

W

Walshy•4/10/24, 10:21 PM

it's just onRequestX

W

Walshy•4/10/24, 10:22 PM

And yeah, the second one is right there because the param passed to onRequest is a context not a req, env like in normal Workers

W

Walshy•4/10/24, 10:22 PM

https://developers.cloudflare.com/pages/functions/get-started/

WWalshy And yeah, the second one is right there because the param passed to onRequest is...

N

Nima•4/10/24, 10:40 PM

Ah, thanks, I can go sleep now

M

Marcel Overdijk•4/11/24, 11:44 AM

I was wondering if

_routes.json

_routes.json

(https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) is supported in Functions

Advanced mode

Advanced mode

?
It's not stated explicitly , but I read it is not in normal standalone Workers, that's why I'm asking.

Same for using TypeScript in Advanced mode, having a

./_worker.js

./_worker.js

folder with a

index.ts

index.ts

seems to be automatically transpiled and it works. But is this expected behavior?
Don't want to use in in a way that later might break...

MMarcel Overdijk I was wondering if `_routes.json` (https://developers.cloudflare.com/pages/funct...

H

Hello, I’m Allie!OP•4/11/24, 12:46 PM

Yes & Yes

M

Marcel Overdijk•4/11/24, 12:51 PM

thx for confirming

By default, the `Request` type doesn't have a parsed body. This allows you to skip reading it if you

Similar Threads

Similar Threads

Similar Threads