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

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

H

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

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

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

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

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

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

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

./_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

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

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

vimo•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.

Oom Idk how to setup DO in pages. How to export

H

Hello, I’m Allie!•4/15/24, 2:07 PM

You need a Worker to export the DO

H

Hello, I’m Allie!•4/15/24, 2:08 PM

As for RPC, it should work

Vvimo I know not an ideal solution but when using functions I let wrangler do its thin...

I

IEatBeans•4/15/24, 3:33 PM

I thought about that but won’t the frontend try to use the 5173 port when fetching data, or do just just manually specify the 8788 port for all fetch’s?

IIEatBeans I thought about that but won’t the frontend try to use the 5173 port when fetchi...

V

vimo•4/15/24, 3:45 PM

yes manually specify it. using a .env.local file as a proxy of sorts in development. its cumbersome but works.

Vvimo Yes, when theres a 500 internal error it can't send a response. I am fetching f...

I

IEatBeans•4/15/24, 4:29 PM

So when the api you are calling from within the function is offline, it fails to fetch, and the worker is just returning 500 because the response never exists.

If this is the case then I think you can use a .catch() after the fetch and put a callback that returns whatever error you want your function to return when that happens.

I

IEatBeans•4/15/24, 4:30 PM

In a .then() (or if using await) then you can do basically the same with the status codes.

IIEatBeans So when the api you are calling from within the function is offline, it fails to...

V

vimo•4/15/24, 4:41 PM

Thanks for still thinking about it. Unfortunately, that doesn't work or not at least locally.
It does not return anything as the fetch never completes, so the function just shows 500 internal error on the server but doesn't execute any further. I tried shortcircuit with datares.status to check for 500 but it doesn't work that way as by that time the function errors out and not the origin server (for which datares checks for).
The 500 error is the function error but nothing is checking for the function error itself.
I am not sure if I am explaining it well.

I found out this, apparently the 500 error will only be returned if its timeout by due to DNS error https://community.cloudflare.com/t/community-tip-fixing-error-500-internal-server-error/44453 but other reasons it will not return anything like in my case where the origin server does not respond. The linked docs page in that article seems helpful for all the possible CF error codes

Vvimo Thanks for still thinking about it. Unfortunately, that doesn't work or not at l...

I

IEatBeans•4/15/24, 4:43 PM

Sorry but im still not sure I’m understanding.

I

IEatBeans•4/15/24, 4:44 PM

Maybe you could share some code around this spot?

K

kajuwa•4/16/24, 6:03 AM

hello everyone where can i ask about cloudflare calls beta about inactivity calls to disconnect as i cannot find any snippet code to do this

E

Erisa•4/16/24, 10:48 AM

#stream

P

Paolo•4/18/24, 12:39 PM

Is there some authentication support for Functions? what I've seen for Okta seems to require express

PPaolo Is there some authentication support for Functions? what I've seen for Okta seem...

I

IEatBeans•4/18/24, 4:37 PM

Lucia Auth library supports functions I think, though it definitely requires more work on your end than a paid solution

S

sudo__su--•4/18/24, 7:11 PM

does cloudflare offer a way to run a nest.js backend serverless to conenct to like a gitlab (i was thinking of doing vercel but i like whats in CF capabilitys

A

Akash•4/20/24, 2:24 PM

I have created a pages function with following code in a file called index.js and put it directly under the functions folder -

export async function onRequestGet(context) {
    console.log('Inside index.html proxy function ..')
    return context.next()
}

export async function onRequestGet(context) {
    console.log('Inside index.html proxy function ..')
    return context.next()
}

export async function onRequestGet(context) {
    console.log('Inside index.html proxy function ..')
    return context.next()
}

export async function onRequestGet(context) {
    console.log('Inside index.html proxy function ..')
    return context.next()
}

The idea behind this function is to execute it before serving index.html file ONLY and to avoid it for other static assets from pages application. This is something which I could not achieve with worker or functions middleware. While this works in local setup, this is not getting executed when deployed on cloudflare. So my question is which behavior (local or cloudflare) is correct?

AAkash I have created a pages function with following code in a file called index.js an...

H

Hello, I’m Allie!•4/20/24, 4:59 PM

It should just work? Just published https://functest.pages.dev/ to test, and only the index should have the header