Questions: 1. How does cloudflare functions handle utility/helper .ts or .js functions in the functi

Questions:

How does cloudflare functions handle utility/helper .ts or .js functions in the functions directory when using file based routing?
Any way to see what our actual functions bundled build file that is going to be deployed will look like while developing? npx wrangler pages ... something

Have googled around, asked perplexity, etc but wasn't able to find this clearly referenced in the docs (ie: chatbots made things up without clear references lol).

Under the routing information in the docs, wasn't made explicit either regarding utility and helper funcs.

For EX: I have repeating code in multiple routes that are exporting onRequest that i would like to refactor out to to a single util module in the same directory, and not deploy that module as a route

Jjsk Questions: 1. How does cloudflare functions handle utility/helper .ts or .js fun...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/18/24, 6:26 PM

Answers to your first question: it will handle it as actual functions resulting in the

No routes detected when building functions directory

No routes detected when building functions directory

as these helper functions do not follow the functions format, you should just create a src folder in the output directory and have all your helper functions there, you can access them from your pages functions as follows:

import { sendEmail } from "/src/utils/email.js";

import { sendEmail } from "/src/utils/email.js";

Of course for example, and for the second question I do not believe you can see the bundled up functions build file.

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.Answers to your first question: it will handle it as actual functions resulting ...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/18/24, 6:27 PM

Nvm in this case (I didn't read the whole message at first), it will treat this as a functions file still.

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.Answers to your first question: it will handle it as actual functions resulting ...

jskOP•12/18/24, 7:44 PM

Hmm interesting!

So I have refactored my code and created two utility modules inside of the /functions directory:

One for mailing functionality
One for google oauth token fetching

I have exported async functions from both, importing into my actual api endpoints exporting onRequest() - and current functionality is as expected

I have also tested if there was any routes deployed in dev mode using npx wrangler pages dev out/ for the utility modules in /functions & am getting 404 errors for both but I'm not sure if this will replicate to prod

I did a search in this discord regarding 'utility functions' and seem to have found one screenshot discussing a similar problem, but I couldn't find any solid citations in the docs so I thought to double check here

So in general, is the correct way to handle utilities and helper methods in the /functions dir to define them outside of the /functions dir and import them in?
Or do we just trust that wrangler will appropriately deal with any code in the /functions dir that doesn't export onRequest?

Jjsk Hmm interesting! So I have refactored my code and created two utility modules ...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/18/24, 11:37 PM

Hello, sorry for the late reply, and yes the correct way to handle them is, infact putting them outside of the functions directory, but be sure not to put them in the root directory or put them in a root directory folder, they are not accessible for you on build, you should do what I said. Move those utility functions to a src folder in your output directory and access it using

"/src/theRestOfThePathToYourFile";

"/src/theRestOfThePathToYourFile";

Furthermore apparently what they state in the first picture is the helper functions will not be bundled unless there is a functions file that imports it.

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.Hello, sorry for the late reply, and yes the correct way to handle them is, infa...

jskOP•12/19/24, 3:59 AM

Understood, thank you so much for the help!

Do functions inside the /functions directory have access to files deployed in the static bundle in cf pages?

Couldn't find any documentation regarding this when i tried looking sadly

I am also using typescript --
so defining utility .ts files in my /output deploy directory and compiling them using /output/src/tsconfig.json is possible but not desirable

I guess I can also use different import paths from .ts and .js but thats also not desirable either lol

I guess I can just duplicate code and copy paste in all my api endpoints if cloudflare functions really doesn't support helper/util functions in a straightforward fashion which is honestly very tough lol

Jjsk Understood, thank you so much for the help! Do functions inside the /functions...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 9:10 AM

Okay so I just tested and no they don't even support external access, not even to the output directory... sorry for the misinformation, but yeah you aren't gonna be able to define helper functions.

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.Okay so I just tested and no they don't even support external access, not even t...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 9:12 AM

I mixed up server side rendering images from the build directory and being able to access it from the function, you actually can access that directory if you are using html (like if you are using ssr) but you can't really use any helper functions defined there.

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.I mixed up server side rendering images from the build directory and being able ...

jskOP•12/19/24, 5:22 PM

No worries! I appreciate the input regardless.

This really isn't great if that is the case!

I also combed through github repos since I'm sure I'm not the only one that has wanted to have utility modules and found stuff like:
1) https://github.com/Charca/cloudflare-pages-auth
User has defined utils.ts in /functions and has exported the functionality into api endpoints

2) https://github.com/whyun-pages/docker-registry

Another repo that has defined a util file in /functions and exports functionality to use in onRequest endpoints

Further Q's:

I guess what really even happens to the /functions dir when you say something like "npx wrangler pages publish out/"?

Because my local functions build is just "npm install && npx tsc"

From cloudflare functions docs: "Writing your Functions files in the /functions directory will automatically generate a Worker with custom functionality at predesignated routes."
From another users question here (https://community.cloudflare.com/t/cloudflare-pages-functions-bundled-or-not/577646): "They are indeed all bundled into a single Worker."

Not clear how this is going to treat functions/modules that are straight helper code and that don't define any onRequest handler -- are those two repos above dealing with utility methods/helpers incorrectly?

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.Okay so I just tested and no they don't even support external access, not even t...

jskOP•12/19/24, 5:41 PM

Also Unknown can you try defining a utility javascript file in the /functions directory and seeing if on prod it is treated as a proper route?

I also couldn't find how to see all deployed /functions routes on the cloudflare dashboard for a domain but i think that would be helpful here

jskOP•12/19/24, 5:43 PM

I think this screenshot may be relevant but we'll see

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:11 PM

I just tested, they are treated like relative file paths, I only tested with a simple

export function log() { console.log('So How Is Your Day?');

export function log() { console.log('So How Is Your Day?');

and it works so far.

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:12 PM

I imported the function using this:

import { log } from "./sendLog.js";

import { log } from "./sendLog.js";

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:12 PM

(Both files are in the same directory)

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:12 PM

I'll test with an onRequest now

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:13 PM

But I'm not sure how I'm gonna test an onRequest exactly...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:13 PM

Nvm

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.I just tested, they are treated like relative file paths, I only tested with a s...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:18 PM

Yeah they work

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:18 PM

As long as you don't export them as onRequest functions they work fine

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:19 PM

I only tested with a simple

export function handleEvent(context) { console.log(context.request.url);

export function handleEvent(context) { console.log(context.request.url);

tho and it works.

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:20 PM

But I'll making an onRequest utility function with that name, but it doesn't make any sense tbh

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:20 PM

Because onRequest (s) are always treated as pages functions

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:20 PM

But I'll try it out for ya

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:23 PM

Nvm it also works?...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:23 PM

Well it's maybe cuz I pass the context object from the main event to the helper function.

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:24 PM

But it's not recommended to name the helper an actual api method

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:24 PM

So ig you're in the clear

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.So ig you're in the clear

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 6:25 PM

@jsk

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.@jsk

jskOP•12/19/24, 6:54 PM

yeah I wouldn't overlap utility funcs names w/ onRequest but I think as long as say /functions/util.js or /functions/googleOauth.js isn't treated as an api endpoint on my actual cf pages site exporting functions like:

export function getTime() {
...
}

export function getGoogleOauthToken() {
..
}

Then it should be fine.

I think this ties into wrangler and esbuild in some way but im not really sure since its not documented for cf functions how the functions are built, ie: the treatment of utility and helper methods in the /functions dir

I also think this relates somewhat to 'npx wrangler pages functions build' to see what the actual build file being deployed actually is, how its compiled but im not certain about that either lol

Thanks for the input/feedback anyways @[@] ��.

Jjsk yeah I wouldn't overlap utility funcs names w/ onRequest but I think as long as ...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/19/24, 7:37 PM

You're welcome, happy to help.

jskOP•12/19/24, 8:13 PM

In the future, to help anybody struggling with similar questions, I've compiled some useful info below w/ citations that is ~correct!

Am open to corrections if there is a mistake in understanding

1) All .js/.ts files inside of the /functions dir is automatically bundled together on pages build/deploy into a single _worker file.

SOURCE: https://community.cloudflare.com/t/cloudflare-pages-functions-bundled-or-not/577646

2) All .js/.ts files inside of /functions that:

do NOT export any onRequest* handler
are imported into modules that DO export a onRequest* handler

Will be included in the final bundled code.

So this means if you have files like /functions/utils/*.ts, and do not export any onRequest handler inside of them --

But do use that code in your actual api endpoints, cf should bundle your functions code into a single file as expected on build/deploy
(ex. npx wrangler pages dev out/ or npx wrangler pages publish out/) --

Without ending up with api endpoints for utility modules like /functions/utils/helper.js

Can test this as well on dev/prod and make sure you end up with 404's for those endpoints + no functions usage.

SOURCE:
functions
functions

3) Because the /functions code is being bundled and generated into a single _worker file, imports from outside of the /functions directory may actually work
correctly in the final bundled file, as long as cf can find the code to bundle together, like from say '../utils/helper.js' as per:

SOURCE: functions

4) I believe CF functions are bundled together using esbuild during build/deploy but I am not sure about this. Extrapolating from https://developers.cloudflare.com/workers/wrangler/bundling/

Alex•12/20/24, 5:05 PM

I have a function that should trap /u//api requests and bypass anything else under /u.

```js
export function onRequest(context) {
var url = new URL(context.request.url);
if (pathname.match(//u/(\d+)/api./)) {
// proxy this works
}
return fetch(request); // this doesn't throws 500
}
```

How should i make original request that I don't want to modify from function? I tried
return fetch(request);
return fetch(request.url, request);
Neither works. Any insight would help. Thank you.

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/20/24, 11:24 PM

return fetch(new URL(request.url));

return fetch(new URL(request.url));

I don't know if it'll work but I don't even think you should just return a literal fetch

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.```js return fetch(new URL(request.url)); ``` I don't know if it'll work but I d...

Isaac McFadyen•12/21/24, 3:34 AM

This won't pass headers. The fetch with the full request should work, are you seeing anything in the Pages log tail?

IIsaac McFadyen This won't pass headers. The fetch with the full request *should* work, are you ...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/21/24, 9:32 AM

No no, I was replying to the person above

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.No no, I was replying to the person above

Isaac McFadyen•12/21/24, 3:10 PM

Yeah, I was following up on what you said. The person above's original method should work, by doing it the way you are no headers are going to be passed from the request.

Kholis•12/21/24, 4:06 PM

Hi, anyone ever success creating a integration between cloudflare websocket hibernation (durable object) with the cloudflare pages function? I got error when doing binding in local

service core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER: Worker "core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER"'s binding "$DurableObject" refers to a service "core:user:worker", but no such service is defined.

service core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER: Worker "core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER"'s binding "$DurableObject" refers to a service "core:user:worker", but no such service is defined.

IIsaac McFadyen Yeah, I was following up on what you said. The person above's original method sh...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/21/24, 4:07 PM

Ah well then, I beg your pardon, I have just started using cloudflare for about a month now so I'm still a bit new to all of this.

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.Ah well then, I beg your pardon, I have just started using cloudflare for about ...

Isaac McFadyen•12/21/24, 4:07 PM

No worries, just wanted to point that out

KKholis Hi, anyone ever success creating a integration between cloudflare websocket hibe...

Isaac McFadyen•12/21/24, 4:08 PM

Pages Functions can't define Durable Objects, you'd need to define the DO in a Worker and deploy it first

IIsaac McFadyen Pages Functions can't define Durable Objects, you'd need to define the DO in a W...

Kholis•12/21/24, 4:10 PM

its defined in https://developers.cloudflare.com/pages/functions/wrangler-configuration/#durable-objects

does it not working?

Cloudflare Docs

Configuration · Cloudflare Pages docs

Pages Functions can be configured two ways, either via the Cloudflare dashboard

or wrangler.toml, a configuration file used to customize the development and deployment setup for Workers and Pages Functions.

KKholis its defined in https://developers.cloudflare.com/pages/functions/wrangler-config...

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

You must create a Durable Object Worker and bind it to your Pages project using the Cloudflare dashboard or your Pages project's wrangler.toml. You cannot create and deploy a Durable Object within a Pages project.

It needs to be already defined/created in a Worker.

IIsaac McFadyen > You must create a Durable Object Worker and bind it to your Pages project usin...

Kholis•12/21/24, 4:13 PM

so we need 2 separate deployment / wrangler.toml ya? one for the workers and the other for the pages?

KKholis so we need 2 separate deployment / wrangler.toml ya? one for the workers and the...

Isaac McFadyen•12/21/24, 4:15 PM

Yeah. You need to deploy the Worker with the DO first, then the Pages project after the DO is deployed.

IIsaac McFadyen Yeah. You need to deploy the Worker with the DO first, then the Pages project af...

Kholis•12/21/24, 5:14 PM

If somehow I want to connect internally both of them using D1 does that possible, how to configure the wrangler toml? and on local developments?

HHello, I’m Allie!When using the Astro Adapter, you must use Astro’s Server Endpoints, not Functio...

Kevin•12/22/24, 11:07 AM

Thanks for this comment. It's not in the docs here (I guess it is in video, actually) https://developers.cloudflare.com/pages/framework-guides/deploy-an-astro-site

Caleb•12/22/24, 11:31 PM

Hey, does anyone know if it is possible to cache the response of a page function? I have a middleware function that modifies the meta tags for a dynamic route, but I don't want that function to be invoked everytime a request is made to it (it will be returning the same response everytime for a given path (username)).

CCaleb Hey, does anyone know if it is possible to cache the response of a page function...

Hello, I’m Allie!•12/23/24, 12:42 AM

You can generate them at build time, if that is what you mean?

Caleb•12/23/24, 12:46 AM

Well it’s a dynamic route not a pre-rendered one

HHello, I’m Allie!You can generate them at build time, if that is what you mean?

Caleb•12/23/24, 12:47 AM

But for a given dynamic route it would be awesome to cache the page function response if possible

CCaleb But for a given dynamic route it would be awesome to cache the page function res...

Hello, I’m Allie!•12/23/24, 12:53 AM

You can cache return values, but the Worker is still invoked

service core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER: Worker "core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER"'s binding "$DurableObject" refers to a service "core:user:worker", but no such service is defined.

Questions: 1. How does cloudflare functions handle utility/helper .ts or .js functions in the functi

Similar Threads

Similar Threads

Similar Threads