@Isaac McFadyen Thanks for the example. If I'm not mistaken thats not quite the same as the Vercel l

@Isaac McFadyen Thanks for the example. If I'm not mistaken thats not quite the same as the Vercel link. SvelteKit just seem to be using the version to decide whether they should reload the app or not. By contrast Vercel seem to be tracking the function version that the app is served from so that any subsequent requests can be made in a way that they get routed to the same function. Even if this can be handled at a framework level, I would expect that within the pages function that serves the app initially, you would need to access the id of the function(and consequently the preview url) so that you had a way to force the routing of subsequent requests.

Nnjdancer @Isaac McFadyen Thanks for the example. If I'm not mistaken thats not quite the ...

Isaac McFadyen•11/11/24, 12:57 AM

So yeah, when I linked to Vercel's link I just meant that that's the kind of feature you're looking for. But you'll likely need to do a full reload—I don't believe (although I might be wrong) that assets from a past deployment will be available on Pages once you've pushed a new version, so you'll likely need to reload the page.

njdancerOP•11/11/24, 1:07 AM

yeah, I think as long as you had the preview url for the current deployment you could work around that by using the preview url as your base url for everything after the initial load(although you might not want to expose that url). With that said, look's like you need the version metadata api to get the deployment id which is not currently available in pages functions by the looks. Thanks for your help.

blaze•11/13/24, 2:30 AM

Bit of a beginner's question, but how do I use pages plugins? My site is static, so no node or wrangler or anything. I have a script that runs in the build, but currently no workers or functions. If I add functions/_middleware.tsfunctions/_middleware.ts the build fails trying to import the package, but I'm not sure where the packages for functions are meant to be set up The docs say using wrangler.toml will likely overwrite settings that I have in the dashboard, which I'd prefer to avoid. Can I specify plugins from the dashboard? Or if not, is there a specific location where I should put package requirements for functions, rather than a general application sort of build? Thanks

JosiahBartlet•11/15/24, 10:15 PM

Uncaught SyntaxError: Identifier '__cf_cjs' has already been declaredUncaught SyntaxError: Identifier '__cf_cjs' has already been declared has anyone seen this?

Ricky U•11/25/24, 5:39 AM

Do workers not support Mongodb driver as its based on v8.. The docs say to use Realm-Web (sdk) but it looks like a dated article, as i hear that library is now deprecated.. its been a few months, could cf update the doc to reflect that mongodb drivers are no longer support natively? (https://blog.cloudflare.com/workers-adds-support-for-two-modern-data-platforms-mongodb-atlas-and-prisma/)

RRicky U Do workers not support Mongodb driver as its based on v8.. The docs say to use R...

Isaac McFadyen•11/25/24, 6:34 PM

In general (sadly) CF doesn't usually update past blog posts.

Ricky U•11/26/24, 5:04 AM

sad, confuses a lot of customers thinking it does, and then building... and then ohh that was an old outdated post...

Ricky U•11/26/24, 8:20 AM

Hono with pages workers : I created a functions/api/test.js as follows:

import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hello Cloudflare Workers!'))

export default app

import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hello Cloudflare Workers!'))

export default app

when i try to go to /api/test the function is not picked up. I have created other routes that do work using the function systam, but with hono its a 404, what could i be dong wrong.

RRicky U sad, confuses a lot of customers thinking it does, and then building... and then...

Isaac McFadyen•11/26/24, 9:40 PM

MongoDB Realm is officially deprecated so theoretically anyone trying to use the SDK in the first place should run into many warnings (including on the MongoDB page itself) before even trying to deploy to Workers.

Rares•11/27/24, 5:47 PM

Hey, how do i add secrets for pages functions? should they be in the Variables and Secrets or in .dev.vars ? i build the app in ci/cd not in cloudflare

Walshy•11/27/24, 6:05 PM

dashboard

Walshy•11/27/24, 6:05 PM

or through wrangler pages secret putwrangler pages secret put

Rares•11/27/24, 6:10 PM

Thanks, also the wrangler is kind of messy cause for worker you get the list as json and for pages you get them as a text

zerochl•11/29/24, 7:42 AM

What changes did you make yesterday that caused our webpage to fail to compile?

Walshy•11/29/24, 1:09 PM

no release yesterday, can you expand?

pat me•11/30/24, 8:08 AM

can i use a node js server to test cf functions locally, or is the syntax wildly different? (hint: i don't know either well enough yet)
wrangler and miniflare don't seem to work on my platform, keep throwing errors when installing

Ppat me can i use a node js server to test cf functions locally, or is the syntax wildly...

TrueHeads•12/1/24, 4:50 AM

You can always just spin up a private test repo and create a random pages.dev site and test your functions routing and deployment there and remove it afterwards :shrugs:

TTrueHeads You can always just spin up a private test repo and create a random pages.dev si...

pat me•12/1/24, 9:33 AM

i mean... you aren't wrong, i will do that. well i am basically already doing that, it just.. sort of feels bad when i push it and see that there's a build time error because i forgot to close a (
but yeah, this is the fastest, they also have a log for functions in the dashboard itself. cloudflare also has a workers playground apparently but I don't know how to make it work for functions so

yeah, fastest way is making a random page

Ppat me i mean... you aren't wrong, i will do that. well i am basically already doing th...

TrueHeads•12/1/24, 9:35 AM

There are real time logs in the functions dashboard tab for your latest build.

You can also build more advanced logging into your functions so that your logging to the realtime functions is more verbose. I think, if you ever got wrangler working, you can log functions to that tool as well, its not just for workers.

TTrueHeads There are real time logs in the functions dashboard tab for your latest build. ...

pat me•12/1/24, 12:37 PM

it's really odd how cloudflare seems like a full blown host sometimes but other times it seems pre alpha stage

miljussss•12/2/24, 12:22 PM

I have a question about nodejs compatibility -- hope this is the right place to ask -- I'm trying to run metaplex (https://www.npmjs.com/package/@metaplex-foundation/js) on cloudflare pages functions, but the build fails because of missing nodejs apis, which to my understanding should be available because I'm using nodejs_compat... Any ideas how to resolve this, or approach this problem differently? Thanks

miljussss•12/2/24, 3:29 PM

FWIW I resolved it by upping the compat date and changing nodejs_compat to nodejs_compat_v2 , which I was under the impression should enable the same things, but I guess they do not

Walshy•12/2/24, 4:00 PM

there's a bug where it doesn't - fix coming soon

Matt•12/2/24, 4:43 PM

I'm struggling to use a page function (for a simple contact form) with Astro. I've put code in functions/contact.js but it fails to recognise the function when deployed with Pages.

xnslx•12/2/24, 6:00 PM

I am trying to deploy the Remix application to Cloudflare pages. Here is the structure and the error that I get when i run npm run startnpm run start after successfully running

npm run build

npm run build

Screenshot_2024-12-02_at_10.58.27_AM.png

Screenshot_2024-12-02_at_10.58.47_AM.png

xnslx•12/2/24, 6:01 PM

Here is the /functions/[[path]].ts/functions/[[path]].ts file

import { createRequestHandler } from "@remix-run/cloudflare-pages";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - the server build file is generated by `remix vite:build`
// eslint-disable-next-line import/no-unresolved
import * as build from "../build/server";

export const onRequest = createRequestHandler({
  //@ts-ignore
  build,
});

import { createRequestHandler } from "@remix-run/cloudflare-pages";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - the server build file is generated by `remix vite:build`
// eslint-disable-next-line import/no-unresolved
import * as build from "../build/server";

export const onRequest = createRequestHandler({
  //@ts-ignore
  build,
});

TrueHeads•12/4/24, 5:20 PM

Is there a general guide on how to view live function logs for your deployed cloudflare pages site with wrangler?

TrueHeads•12/4/24, 5:21 PM

Ive done some searching and cant find much that explains the process?

James•12/4/24, 5:29 PM

https://developers.cloudflare.com/workers/wrangler/commands/#deployment-tail

wrangler pages deployment tailwrangler pages deployment tail is probably what you're looking for

Foreignity•12/6/24, 3:10 PM

Hello everyone, I have a small question. I'm using Cheerio on Workers, I wanted to know if I could use it in the same way in Functions? And how I could include it in Functions. Thank you in advance for help.

Athestar•12/6/24, 5:35 PM

Hello everyone, I am a starter of Cloudflare and I am building a remix app with Cloudflare pages. I have a trouble matter now, so when I try 'wrangler pages dev', it's failed with error,
✘ [ERROR] "await" can only be used inside an "async" function

�

𝖆𝖚𝖙𝖎𝖘𝖙•12/6/24, 6:00 PM

Could you share a snippet where you encountering the issue?

Thiên•12/7/24, 12:50 AM

Hi guys, I’m trying to set up my site with Cloudflare Pages and Functions. First, I followed this guide - https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/

and succeeded to run locally. Then, I wanted to create a simple API served by a Worker, so I followed this guide - https://developers.cloudflare.com/pages/functions/get-started/ . But for some reason, my functionsfunctions folder always got ignored. I tried putting it at same level as
```
package.json
```
```
package.json
```
, under
```
src
```
```
src
```
, under src/appsrc/app, nothing worked. The build output (.vercel/output/.vercel/output/) doesn’t contain my function. When I run the website locally and try to call my API localhost:8788/api/helloworldlocalhost:8788/api/helloworld, I only see 404 Error. Do I need to declare anything in
```
wrangler.toml
```
```
wrangler.toml
```
or change my build command (currently it is like in the first guide) for my functionsfunctions folder to work? Thanks in advance!

Cloudflare Docs

Get started | Full-stack (SSR) | Next.js apps · Cloudflare Pages docs

Deploy a full-stack Next.js app to Cloudflare Pages

Cloudflare Docs

Functions - Get started · Cloudflare Pages docs

This guide will instruct you on creating and deploying a Pages Function.

TThiên Hi guys, I’m trying to set up my site with Cloudflare Pages and Functions. First...

Deo Kumar•12/7/24, 8:13 PM

If your nextjs app is static, you can use cloudflare pages' functionsfunctions directory api routing.
But for SSR, you need to use nextjs API routing with adapters like opennext-cloudflareopennext-cloudflare for cloudflare workers assets and next-on-pagesnext-on-pages for cloudflare pages

Deo Kumar•12/7/24, 8:18 PM

Cloudflare Pages (Next.js SSR): https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/

Cloudflare Workers + Assets (Next.js SSR): https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs/

Cloudflare Docs

Get started | Full-stack (SSR) | Next.js apps · Cloudflare Pages docs

Deploy a full-stack Next.js app to Cloudflare Pages

Cloudflare Docs

Next.js · Cloudflare Workers docs

Create an Next.js application and deploy it to Cloudflare Workers with Workers Assets.

Chris (stof) Langton•12/8/24, 8:56 AM

I'm coming from python and routers will generate the OpenAPI
Next.js has a way to do that too, but I'm not using next.js rather just regular CloudFlare pages functions native

Anyone know how to make the _middleware catch a route and generate the OpenAPI spec live?

A better question that may lead me to the answer - anyone know exactly which router functions was based on, so I can adapt some other middleware in that ecosystem, or is this an entire new router and no existing middleware ecosystem exists to leverage?

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/13/24, 11:37 AM

Hello! I have been trying to make a simple authentication system using pages functions (I'm using JavaScript) and in the build log it is saying this:

    ✘ [ERROR] No routes found when building Functions directory: /opt/buildhome/repo/functions

    ✘ [ERROR] No routes found when building Functions directory: /opt/buildhome/repo/functions

now in my repo, I have set up the functions as following:

Root directory:
   = dist
   = functions
   | - index.js
   | - auth
     | - login.js
     | - register.js
     | - resetpassword.js
   = src
   = _routes.json
   = wrangler.toml

Root directory:
   = dist
   = functions
   | - index.js
   | - auth
     | - login.js
     | - register.js
     | - resetpassword.js
   = src
   = _routes.json
   = wrangler.toml

So is there something I can do to fix that error?

�𝚄𝚗𝚔𝚗𝚘𝚠𝚗.Hello! I have been trying to make a simple authentication system using pages fun...

�

𝚄𝚗𝚔𝚗𝚘𝚠𝚗.•12/13/24, 1:31 PM

Nevermind my it was the structure of my files that was broken lol

iRazvan2745•12/15/24, 12:05 PM

pages-helpError: Failed to publish your Function. Got error: No such compatibility flag: nodejs_compact
any idea?

jsk•12/18/24, 5:21 PM

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 directoryNo 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 ...

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

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

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

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

@Isaac McFadyen Thanks for the example. If I'm not mistaken thats not quite the same as the Vercel l

Similar Threads