what's the high(est) level difference between using a Function or a Pages Function for my API middle

D

DeepOP•1/28/24, 11:02 PM

er i'm sorry, a Worker*

DDeep what's the high(est) level difference between using a Function or a Pages Functi...

H

Hello, I’m Allie!•1/28/24, 11:02 PM

A Worker and a Function?

D

DeepOP•1/28/24, 11:02 PM

right,

DDeep right,

H

Hello, I’m Allie!•1/28/24, 11:03 PM

A Worker can do more. It’s usually the first to get new features/bindings. Functions are basically Workers with Pages integration. Functions are deployed as part of a Pages project, along with your static assets. Said assets are served for free

D

DeepOP•1/28/24, 11:04 PM

i see

D

DeepOP•1/28/24, 11:04 PM

so Workers == AWS Lambda and within the setup/config of a Worker, you can define your API domain / paths / routing / etc

DDeep so Workers == AWS Lambda and within the setup/config of a Worker, you can define...

H

Hello, I’m Allie!•1/28/24, 11:05 PM

Yes, sort of

H

Hello, I’m Allie!•1/28/24, 11:05 PM

Workers are also a lot cheaper, but restricted in what they can run

D

DeepOP•1/28/24, 11:05 PM

and a Pages function is part of a full stack deploy / repo / project where your site/pages/assets + some backend code that you need to be accessible by some endpoint would live all together as a project/repo and when you deploy that full stack, it's treated as CiCd pipeline, etc

D

DeepOP•1/28/24, 11:06 PM

ok, off to read Workers docs, thanks @HardlyWorkin'

S

Smr•1/29/24, 9:51 AM

Where can i ask about dns?

SSmr Where can i ask about dns?

H

Hello, I’m Allie!•1/29/24, 9:55 AM

#general-help or #general-discussions

S

Smr•1/29/24, 9:56 AM

Thanks

《

《 Sarge 》•2/1/24, 2:31 AM

Hi all, I'm just attempted a POC, and I'm running into a couple of problems around the functions.
I create a new nuxt app using the create-cloudflare CLI 'create-cloudflare nuxt3-poc-002 --framework nuxt --ts true', and I add the ./functions folder, and copied the helloworld.js file from the docs.
I ran npm run pages:dev, and navigated to localhost:3000/helloworld. The app keeps returning a 404, and not returning the expected response stated in the documentation here. https://developers.cloudflare.com/pages/functions/get-started/

Is there something I'm missing here? I assume the npm run pages:dev also hosts the functions worker as well?

EDIT:
I have created 2x POC now. One is purely the create-cloudflare built app. That returns a 200, and just returns a standard page.
I have a more advance version where I have added layouts, and pages, and that returns a 404. So I'm assuming the pages automated routes are handling/hijacking the API requests, and returning the 404... Still I would expect the pages:dev command to run the worker and proxies as it worked in the cloud.

If I take another approach, I run 'npx wrangler pages dev ./functions' within the root of the website, and it'll start hosting the functions worker on 127.0.0.1:8788.. and if I navigate to 'http://127.0.0.1:8788/helloworld' I see the results expected. So there is no problem compiling the functions code.. I assume the nuxt router is hijacking the handling of the request away from wrangler's worker hosting, and the functions logic never gets hit.

Again this doesn't make sense to me. I wouldn't want to need to make a proxy via axios or anything to get this working. As I would expect it to work out of the box as is. Since it's a create-cloudflare CLI generated project..
I really want to use the SSR features of Nuxt locally.

G

GAMUUz•2/2/24, 4:35 AM

Hi there. Can someone provide me a simple code on how to access env variables that is already set in CF dashboard and return it using Functions.

Thanks in advance.

GGAMUUz Hi there. Can someone provide me a simple code on how to access env variables th...

《

《 Sarge 》•2/2/24, 8:09 AM

export async function onRequest(context) {
   const myVar =  constext.env.[your-envirment-variable];
   console.log("myvar = '${myVar}'");

   // Note: I'm not sure the console will return value because of security settings. So you might need to do some trick to get pass that. So it might seem like nothing is returned if your logging it out. But if you combine it into an other object it should get around it so you can see it in the logs.
}

export async function onRequest(context) {
   const myVar =  constext.env.[your-envirment-variable];
   console.log("myvar = '${myVar}'");

   // Note: I'm not sure the console will return value because of security settings. So you might need to do some trick to get pass that. So it might seem like nothing is returned if your logging it out. But if you combine it into an other object it should get around it so you can see it in the logs.
}

export async function onRequest(context) {
   const myVar =  constext.env.[your-envirment-variable];
   console.log("myvar = '${myVar}'");

   // Note: I'm not sure the console will return value because of security settings. So you might need to do some trick to get pass that. So it might seem like nothing is returned if your logging it out. But if you combine it into an other object it should get around it so you can see it in the logs.
}

export async function onRequest(context) {
   const myVar =  constext.env.[your-envirment-variable];
   console.log("myvar = '${myVar}'");

   // Note: I'm not sure the console will return value because of security settings. So you might need to do some trick to get pass that. So it might seem like nothing is returned if your logging it out. But if you combine it into an other object it should get around it so you can see it in the logs.
}

freehanded that code, so just check it.
You'll also need to edit your wrangler.toml files to have the vars in there, even if you have configured them in the dashboard. That lets the services know it should look for them.

[./wrnagler.toml]

[vars]
myVar = "somthing"

[vars]
myVar = "somthing"

《《 Sarge 》Hi all, I'm just attempted a POC, and I'm running into a couple of problems arou...

《

《 Sarge 》•2/2/24, 8:21 AM

BUMP. Anyone know how to combine this hosting so I don't need to setup some weird proxy thing for local development?

《《 Sarge 》`export async function onRequest(context) { const myVar = constext.env.[your...

G

GAMUUz•2/2/24, 8:29 AM

I have tested this and it works even without updating toml files.

《《 Sarge 》Hi all, I'm just attempted a POC, and I'm running into a couple of problems arou...

H

Hello, I’m Allie!•2/2/24, 8:31 AM

As far as I'm aware, you can only use

wrangler

wrangler

or a framework's dev command. If you need bindings support, you either need to build your project then run

wrangler pages dev

wrangler pages dev

on the output, or use something like

cf-bindings-proxy

cf-bindings-proxy

npm

cf-bindings-proxy

Experimental proxy for interfacing with bindings in projects targeting Cloudflare Pages. Latest version: 0.7.1, last published: 3 months ago. Start using cf-bindings-proxy in your project by running

npm i cf-bindings-proxy

npm i cf-bindings-proxy

. There are no other projects in the npm registry using cf-bindings-proxy.

P

Paolo•2/3/24, 3:39 AM

I'm writing a native pages application and was wondering if it's possible to develop locally using SQLite file::memory:?cache=shared

P

Paolo•2/3/24, 3:39 AM

It's to make tests go faster

P

Paolo•2/3/24, 4:21 AM

Or if you can suggest how to mock D1

G

GAMUUz•2/3/24, 5:05 AM

Just to confirm. I cannot import NPM packages such as Stripe in Functions?

R

Register•2/5/24, 2:43 PM

Why am I getting this when I run wrangler pages dev?

✨ Compiled Worker successfully
 ⛅️ wrangler 3.26.0
-------------------
Your worker has access to the following bindings:
- D1 Databases:
  - DB: local-DB (DB)
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8080
X [ERROR] Your worker created multiple branches of a single stream (for instance, by calling `response.clone()` or `request.clone()`) but did not read the body of both branches. This is wasteful, as it forces the system to buffer the entire stream of data in memory, rather than streaming it through. This may cause your worker to be unexpectedly terminated for going over the memory limit. If you only meant to copy the request or response headers and metadata (e.g. in order to be able to modify them), use the appropriate constructors instead (for instance, `new Response(response.body, response)`, `new Request(request)`, etc).


[wrangler:inf] POST /api/v1/waitlist 200 OK (6ms)

✨ Compiled Worker successfully
 ⛅️ wrangler 3.26.0
-------------------
Your worker has access to the following bindings:
- D1 Databases:
  - DB: local-DB (DB)
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8080
X [ERROR] Your worker created multiple branches of a single stream (for instance, by calling `response.clone()` or `request.clone()`) but did not read the body of both branches. This is wasteful, as it forces the system to buffer the entire stream of data in memory, rather than streaming it through. This may cause your worker to be unexpectedly terminated for going over the memory limit. If you only meant to copy the request or response headers and metadata (e.g. in order to be able to modify them), use the appropriate constructors instead (for instance, `new Response(response.body, response)`, `new Request(request)`, etc).


[wrangler:inf] POST /api/v1/waitlist 200 OK (6ms)

✨ Compiled Worker successfully
 ⛅️ wrangler 3.26.0
-------------------
Your worker has access to the following bindings:
- D1 Databases:
  - DB: local-DB (DB)
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8080
X [ERROR] Your worker created multiple branches of a single stream (for instance, by calling `response.clone()` or `request.clone()`) but did not read the body of both branches. This is wasteful, as it forces the system to buffer the entire stream of data in memory, rather than streaming it through. This may cause your worker to be unexpectedly terminated for going over the memory limit. If you only meant to copy the request or response headers and metadata (e.g. in order to be able to modify them), use the appropriate constructors instead (for instance, `new Response(response.body, response)`, `new Request(request)`, etc).


[wrangler:inf] POST /api/v1/waitlist 200 OK (6ms)

✨ Compiled Worker successfully
 ⛅️ wrangler 3.26.0
-------------------
Your worker has access to the following bindings:
- D1 Databases:
  - DB: local-DB (DB)
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8080
X [ERROR] Your worker created multiple branches of a single stream (for instance, by calling `response.clone()` or `request.clone()`) but did not read the body of both branches. This is wasteful, as it forces the system to buffer the entire stream of data in memory, rather than streaming it through. This may cause your worker to be unexpectedly terminated for going over the memory limit. If you only meant to copy the request or response headers and metadata (e.g. in order to be able to modify them), use the appropriate constructors instead (for instance, `new Response(response.body, response)`, `new Request(request)`, etc).


[wrangler:inf] POST /api/v1/waitlist 200 OK (6ms)

R

Register•2/5/24, 2:43 PM

_middleware.ts

export async function onRequest(ctx: EventContext) {
  const response = await ctx.next();

  logRequest(ctx.env.DB, ctx.request);

  return response;
};

export async function onRequest(ctx: EventContext) {
  const response = await ctx.next();

  logRequest(ctx.env.DB, ctx.request);

  return response;
};

export async function onRequest(ctx: EventContext) {
  const response = await ctx.next();

  logRequest(ctx.env.DB, ctx.request);

  return response;
};

export async function onRequest(ctx: EventContext) {
  const response = await ctx.next();

  logRequest(ctx.env.DB, ctx.request);

  return response;
};

/api/v1/waitlist.ts

import EventContext from "@/types/EventContext";

export async function onRequestGet(ctx: EventContext) {
  console.log("test_get");
  return Response.json({
    "get": 404,
  });
}

export async function onRequestPost(ctx: EventContext) {
  console.log("test_post");
  return Response.json({
    "post": 404,
  });
}

import EventContext from "@/types/EventContext";

export async function onRequestGet(ctx: EventContext) {
  console.log("test_get");
  return Response.json({
    "get": 404,
  });
}

export async function onRequestPost(ctx: EventContext) {
  console.log("test_post");
  return Response.json({
    "post": 404,
  });
}

import EventContext from "@/types/EventContext";

export async function onRequestGet(ctx: EventContext) {
  console.log("test_get");
  return Response.json({
    "get": 404,
  });
}

export async function onRequestPost(ctx: EventContext) {
  console.log("test_post");
  return Response.json({
    "post": 404,
  });
}

import EventContext from "@/types/EventContext";

export async function onRequestGet(ctx: EventContext) {
  console.log("test_get");
  return Response.json({
    "get": 404,
  });
}

export async function onRequestPost(ctx: EventContext) {
  console.log("test_post");
  return Response.json({
    "post": 404,
  });
}

R

Register•2/5/24, 2:44 PM

I dont use

request.clone()

request.clone()

or

response.clone()

response.clone()

RRegister I dont use `request.clone()` or `response.clone()`

P

Paolo•2/5/24, 7:55 PM

It's a bug in Wrangler, it's been there for a while

PPaolo It's a bug in Wrangler, it's been there for a while

R

Register•2/5/24, 8:05 PM

Yeah I ended up downgrading to 3.22.0

K

Kiecooboi•2/6/24, 3:54 PM

Does anyone know how can I access or mock

platform.env

platform.env

in sveltekit? I've spend too much time in development setup

I want to know the current environment value named

ENVIRONMENT

ENVIRONMENT

in my api endpoint's +server.ts, im so stuck

Original message was deleted

R

Register•2/6/24, 8:44 PM

Understood, thanks!

T

tozz•2/7/24, 9:02 AM

I'm using TypeScript with the default tsconfig that is from the docs, I also have another tsconfig for the SPA part. This means that things like

Response

Response

will be different between the two, and any code placed outside of

functions

functions

will use that tsconfig. So my question is, where do people put things like helpers/utils for

functions

functions

specific things and not have them exposed as routes?

Ttozz I'm using TypeScript with the default tsconfig that is from the docs, I also hav...

H

Hello, I’m Allie!•2/7/24, 9:15 AM

Any files in functions that don’t export onRequest* won’t be bundled(unless they are imported by a file that does export onRequest*)

HHello, I’m Allie!Any files in functions that don’t export onRequest* won’t be bundled(unless they...

T

tozz•2/7/24, 9:16 AM

Ok, I'm only looking in dev-mode using wrangler and there they are exposed just as normal files, but makes sense that the bundle step would remove them

Original message was deleted

J

JustinNoel•2/7/24, 1:25 PM

It's been a while since i touched Remix, but i remember they believed middleware was an anti-pattern.

What I did to overcome this was put what I would consider "middleware" in utility functions. Then, in every loader, i would call those utility functions. That way, I was as DRY as possible.

Original message was deleted

M

Miyagi•2/7/24, 3:59 PM

Unsure of best practice, i call my middleware function in the root.tsx... So its always listening.
....

I haven't fully tried this method, but when i attempted... wrangler cli will load and recognize your rules by logging a message in the console on startup

/pages/functions/middleware/

also consider:

/pages/functions/routing/

(cloudflare dot com obviously....)

==========

Im currently using:

npm create cloudflare@latest my-remix-app -- --framework=remix

K

Kurzon•2/7/24, 8:31 PM

_middleware.js is not even running

K

Kurzon•2/7/24, 8:32 PM

Why is that

K

Kurzon•2/7/24, 8:32 PM

I use NextJS and cloudflare next on npm package

K

Kurzon•2/7/24, 8:32 PM

functions/_middleware.js

K

Kurzon•2/7/24, 8:33 PM

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

J

James•2/7/24, 9:56 PM

You can't use the functions directory if you're using next-on-pages. You should be using Next.js middleware and API route handlers.

B

brian•2/8/24, 7:56 AM

Hey All, I am trying to understand how wrangler page functions deploy works with domain aliases. I have used wrangler to successfully update my page function so when I use the pages.dev link it is working with the correct function, but when I access with the domain alias, sometimes I get the old page function behaviour and sometimes I get the new behaviour. I have tried a cache clear by hostname and it didn't clear out the old page function. Any ideas why the old page function would continue to serve?

L

localλorse•2/8/24, 10:21 PM

When import this

import consumers from 'stream/consumers'

import consumers from 'stream/consumers'

, miniflare complains:

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

BUT: This page says that both the

Buffer

Buffer

and

Streams

Streams

API are supported, and I have set

node_compat = true

node_compat = true

in my

wrangler.toml

wrangler.toml

.
So why doesn't it work? :)

(Same error if I try

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers'

instead btw.)
Do I also have to set

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

in addition to

node_compat = true

node_compat = true

?

Cloudflare Docs

Node.js compatibility · Cloudflare Workers docs

Implemented Node.js runtime APIs and enablement instructions for your Worker project.

Llocalλorse When import this `import consumers from 'stream/consumers'`, miniflare complains...

J

Julian•2/9/24, 12:15 AM

I'm not sure if you're running into the same problem as me, but what I'm actually seeing is that

wrangler

wrangler

's live reload function seems to break with these

nodejs_compat

nodejs_compat

imports. So what I'm seeing is that I can get the code to compile fine when I first run

wrangler dev

wrangler dev

but if I make any code changes at all and

wrangler

wrangler

does a live reload, it'll throw that error.

J

James•2/9/24, 12:46 AM

You need

nodejs_compat

nodejs_compat

compat flag, not

node_compat

node_compat

to import from any

node:

node:

namespace. But yes, the latest version of wrangler did break live reloads with

node:

node:

imports, and is being tracked here: https://github.com/cloudflare/workers-sdk/issues/4959

JJames You need `nodejs_compat` compat flag, not `node_compat` to import from any `node...

L

localλorse•2/9/24, 12:57 AM

wha's the diff between

nodejs_compat

nodejs_compat

and

node_compat

node_compat

flags?

Llocalλorse wha's the diff between `nodejs_compat` and `node_compat` flags?

J

James•2/9/24, 12:59 AM

tl;dr,

node_compat

node_compat

is old and polyfills a bunch of stuff. It's not great, a bit slow, adds to bundle size, and the polyfills aren't perfect.

nodejs_compat

nodejs_compat

is Cloudflare's actual Node.js compatibility built right into the

workerd

workerd

runtime. There's some DX pain aroound them both existing right now which I wrote up a bit at https://github.com/cloudflare/workers-sdk/issues/4082

JJames tl;dr, `node_compat` is old and polyfills a bunch of stuff. It's not great, a bi...

L

localλorse•2/9/24, 1:00 AM

so should I enable both or just one?

what's the high(est) level difference between using a Function or a Pages Function for my API middle

Similar Threads

Similar Threads

Similar Threads