thanks. absolute url works. makes me wonder is this just a wrangler local dev thing? and on deployme

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

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

vimoOP•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/

. 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

.

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!•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!•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!•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!•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!•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!•4/11/24, 12:46 PM

Yes & Yes

M

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

thx for confirming

V

vimoOP•4/14/24, 5:08 AM

When Pages Function is faces an issue of getting a response from the external endpoint, it throws 500 Internal error which basically crashes my frontend. How can I capture this error and throw an appropriate error response to handle in my frontend?
when I try to fetch from the endpoint, I can't even get a res to do that. Or is there a way and I am missing something?

I

IEatBeans•4/14/24, 10:48 PM

I see that the -- and proxy options have been deprecated, but I cant find an alternative. Im using Vite and want the hot module refresh. If i jsut use a ./dist directory that wont happen...

Vvimo When Pages Function is faces an issue of getting a response from the external en...

I

IEatBeans•4/15/24, 2:46 AM

Are you wanting to capture the status code in your frontent, or are you using the function as middleware and want to just pass through to the static assets if the function fails?

IIEatBeans Are you wanting to capture the status code in your frontent, or are you using th...

I

IEatBeans•4/15/24, 2:49 AM

Also, are you calling an API from within the function, and when the fetch fails for any reason (non 200 status) you want to return a specific error message from your function, and is automatically displayed on the front end?

IIEatBeans I see that the -- and proxy options have been deprecated, but I cant find an alt...

H

Hello, I’m Allie!•4/15/24, 5:17 AM

Afaik the recommendation is to use a framework that supports dev bindings: https://blog.cloudflare.com/blazing-fast-development-with-full-stack-frameworks-and-cloudflare

The Cloudflare Blog

Blazing fast development with full-stack frameworks and Cloudflare

You can now use your framework’s development server while accessing D1 databases, R2 object stores, AI models, and more. Iterate locally in milliseconds to build sophisticated web apps that run on Cloudflare

HHello, I’m Allie!Afaik the recommendation is to use a framework that supports dev bindings: https...

I

IEatBeans•4/15/24, 5:52 AM

Does this work with React with Vite as the build tool? Sorry if I missed it on there

I

IEatBeans•4/15/24, 5:54 AM

Oh nvm I found it. Looks like it does. Thank you, I will try that out.

IIEatBeans Are you wanting to capture the status code in your frontent, or are you using th...

V

vimoOP•4/15/24, 9:59 AM

Yes, when theres a 500 internal error it can't send a response.
I am fetching from the function and returning some data. but when the source is not reachable, the function does not send anything. For now I am handling such kind of crashes on my frontend with a blanket error, so not knowing why it failed.

IIEatBeans I see that the -- and proxy options have been deprecated, but I cant find an alt...

V

vimoOP•4/15/24, 10:03 AM

I know not an ideal solution but when using functions I let wrangler do its thing to run the function with the ./dist but I also run a the vite server for my frontend on its own. And access the :5173 instead of the :87xx by wrangler.
This way when using the functions it uses the wrangler's endpoint to get the data but otherwise I take advantage of Vite's HMR for the frontend.
I am not sure how this will work for other CF services run through wrangler.

thanks. absolute url works. makes me wonder is this just a wrangler local dev thing? and on deployme

Similar Threads

Similar Threads

Similar Threads