But how I'm supposed to access them from a static web page(I don't want to access them in developmen

SSonyC But how I'm supposed to access them from a static web page(I don't want to acces...

H

Hard@Work•6/25/24, 12:45 PM

From a completely static page? You can't

H

Hard@Work•6/25/24, 12:45 PM

Bindings are available at runtime

S

SonyCOP•6/25/24, 12:57 PM

So I have a react static page, built with vite(rollup), I need to create a functions folder and listen to fetch events like this:

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

In this example, MY_WORKER_SERVICE is the name I gave to the service binding in the Cloudflare Pages dashboard.
using the SERVICE and in the static code just request to localhost/api.....?

SSonyC So I have a react static page, built with vite(rollup), I need to create a funct...

H

Hard@Work•6/25/24, 1:21 PM

You probably want this instead:

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

S

SonyCOP•6/25/24, 1:40 PM

so, a [route].ts file for each endpoint?

SSonyC so, a [route].ts file for each endpoint?

H

Hard@Work•6/25/24, 1:41 PM

No, the above should catch anything on

/api

/api

H

Hard@Work•6/25/24, 1:41 PM

https://developers.cloudflare.com/pages/functions/routing/#dynamic-route-examples

Cloudflare Docs

Routing · Cloudflare Pages docs

Functions utilize file-based routing. Your /functions directory structure determines the designated routes that your Functions will run on. You can …

S

SonyCOP•6/25/24, 1:41 PM

Thanks!

KKynson For anyone who encounters the same problem, it seems that page function does not...

D

Deo Kumar•6/29/24, 12:45 PM

try
https://www.npmjs.com/package/@cf-wasm/satori
https://www.npmjs.com/package/@cf-wasm/og

npm

@cf-wasm/satori

Enlightened library to convert HTML and CSS to SVG.. Latest version: 0.1.19, last published: a month ago. Start using @cf-wasm/satori in your project by running

npm i @cf-wasm/satori

npm i @cf-wasm/satori

npm i @cf-wasm/satori

npm i @cf-wasm/satori. There is 1 other project in the npm registry using @cf-wasm/satori.

npm

@cf-wasm/og

Generate Open Graph Images dynamically from HTML/CSS without a browser.. Latest version: 0.1.27, last published: a day ago. Start using @cf-wasm/og in your project by running

npm i @cf-wasm/og

npm i @cf-wasm/og

npm i @cf-wasm/og

npm i @cf-wasm/og. There are no other projects in the npm registry using @cf-wasm/og.

D

Deo Kumar•6/29/24, 12:46 PM

its just a wrapper, you dont need to manually initialize the yoga

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

S

surgery18•6/30/24, 4:13 AM

Is there any way to make the page functions use all remote resources instead of local? Like for D1, R2, DO, KV, Queues, etc? Thanks.

Ssurgery18 Is there any way to make the page functions use all remote resources instead of ...

H

Hello, I’m Allie!•6/30/24, 4:43 AM

Not for Pages

HHello, I’m Allie!Not for Pages

S

surgery18•6/30/24, 4:46 AM

Any plans on adding the ability to use remote resources?

Ssurgery18 Any plans on adding the ability to use remote resources?

H

Hello, I’m Allie!•6/30/24, 4:48 AM

Maybe when Workers and Pages get merged into a single product?

V

valkyrie_pilot•6/30/24, 4:51 AM

is that in the roadmap?

W

Walshy•6/30/24, 9:28 AM

Converging the products? Yes, it's in active development

S

scruffy•7/1/24, 4:18 PM

Just ran into an issue where adding

wrangler.toml

wrangler.toml

and running a

wrangler pages dev

wrangler pages dev

command results in a hanging browser. Raised it on GitHub (https://github.com/cloudflare/workers-sdk/issues/6173), then noticed the message on https://developers.cloudflare.com/pages/functions/wrangler-configuration/ that said to come here... does anyone know if this is expected behaviour or am I doing something wrong?

GitHub

Issues · cloudflare/workers-sdk

Home to Wrangler, the CLI for Cloudflare Workers® - Issues · cloudflare/workers-sdk

Cloudflare Docs

Configuration · Cloudflare Pages docs

If your project contains an existing wrangler.toml file that you previously used for local development, make sure you verify that it matches your …

Sscruffy Just ran into an issue where adding `wrangler.toml` and running a `wrangler page...

H

Hard@Work•7/2/24, 9:11 AM

Does it work if you place

index.html

index.html

in a directory, then run

wrangler pages dev <directory>

wrangler pages dev <directory>

wrangler pages dev <directory>

wrangler pages dev <directory>?

HHard@Work Does it work if you place `index.html` in a directory, then run `wrangler pages ...

S

scruffy•7/2/24, 9:21 AM

i'm out at the moment, will check once i'm back in a few hours. thanks for the suggestion

HHard@Work Does it work if you place `index.html` in a directory, then run `wrangler pages ...

S

scruffy•7/2/24, 12:01 PM

Just went and checked... was about to say that problem remained when using a sub-directory when I fumbled switching apps and landed in my browser and saw the correct content... it appears that the issue (whether content is at root or in a subdirectory) is that it takes time for wrangler to get itself into a position where it can respond (on my machine that seems to often take 11 or 12ish seconds). At that point, I get the following in the console (which seems to be the same time when the browser returns content):

S

scruffy•7/2/24, 12:01 PM

✘ [ERROR] Failed to register worker in local service registry TypeError: fetch failed

      at fetch
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:17209:19)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async registerWorker
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:203827:12)
      at async Object.announceAndOnReady [as onReady]
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:206237:7)
  {
    cause: ConnectTimeoutError: Connect Timeout Error
        at onConnectTimeout
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6031:29)
        at
  /Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:5987:51
        at Immediate._onImmediate
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6019:13)
        at process.processImmediate (node:internal/timers:478:21)
        at process.topLevelDomainCallback (node:domain:160:15)
        at process.callbackTrampoline (node:internal/async_hooks:128:24) {
      code: 'UND_ERR_CONNECT_TIMEOUT'
    }
  }


[wrangler:inf] GET / 200 OK (5989ms)

✘ [ERROR] Failed to register worker in local service registry TypeError: fetch failed

      at fetch
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:17209:19)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async registerWorker
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:203827:12)
      at async Object.announceAndOnReady [as onReady]
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:206237:7)
  {
    cause: ConnectTimeoutError: Connect Timeout Error
        at onConnectTimeout
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6031:29)
        at
  /Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:5987:51
        at Immediate._onImmediate
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6019:13)
        at process.processImmediate (node:internal/timers:478:21)
        at process.topLevelDomainCallback (node:domain:160:15)
        at process.callbackTrampoline (node:internal/async_hooks:128:24) {
      code: 'UND_ERR_CONNECT_TIMEOUT'
    }
  }


[wrangler:inf] GET / 200 OK (5989ms)

✘ [ERROR] Failed to register worker in local service registry TypeError: fetch failed

      at fetch
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:17209:19)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async registerWorker
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:203827:12)
      at async Object.announceAndOnReady [as onReady]
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:206237:7)
  {
    cause: ConnectTimeoutError: Connect Timeout Error
        at onConnectTimeout
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6031:29)
        at
  /Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:5987:51
        at Immediate._onImmediate
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6019:13)
        at process.processImmediate (node:internal/timers:478:21)
        at process.topLevelDomainCallback (node:domain:160:15)
        at process.callbackTrampoline (node:internal/async_hooks:128:24) {
      code: 'UND_ERR_CONNECT_TIMEOUT'
    }
  }


[wrangler:inf] GET / 200 OK (5989ms)

✘ [ERROR] Failed to register worker in local service registry TypeError: fetch failed

      at fetch
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:17209:19)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async registerWorker
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:203827:12)
      at async Object.announceAndOnReady [as onReady]
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:206237:7)
  {
    cause: ConnectTimeoutError: Connect Timeout Error
        at onConnectTimeout
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6031:29)
        at
  /Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:5987:51
        at Immediate._onImmediate
  (/Users/andy/=/quests/delete-me-pages/node_modules/.pnpm/wrangler@3.62.0/node_modules/wrangler/wrangler-dist/cli.js:6019:13)
        at process.processImmediate (node:internal/timers:478:21)
        at process.topLevelDomainCallback (node:domain:160:15)
        at process.callbackTrampoline (node:internal/async_hooks:128:24) {
      code: 'UND_ERR_CONNECT_TIMEOUT'
    }
  }


[wrangler:inf] GET / 200 OK (5989ms)

S

scruffy•7/2/24, 12:02 PM

in this instance, it looks like it was relatively quick, just under six seconds

MMarcel Overdijk I was wondering if `_routes.json` (https://developers.cloudflare.com/pages/funct...

C

Chinoman10•7/2/24, 9:48 PM

wth is 'Advanced mode'? Lol

Edit: Found the docs for it.

In advanced mode, your Function will assume full control of all incoming HTTP requests to your domain. Your Function is required to make or forward requests to your project’s static assets. Failure to do so will result in broken or unwanted behavior. Your Function must be written in Module syntax.

Well, there goes my curiosity out the window :wave_animated:

C

Chinoman10•7/2/24, 10:14 PM

Meanwhile... I'm not sure how I can write the

_routes.json

_routes.json

_routes.json

_routes.json to exclude all paths except the ones I define explicitly (such as

/api/*

/api/*

/api/*

/api/*).
Seems like the file is meant to work the other way around... since excludes takes precendence over includes... so I can't do

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*"]
}

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*"]
}

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*"]
}

{
    "version": 1,
    "include": ["/api/*"],
    "exclude": ["/*"]
}

Right?

J

jjjrmy•7/2/24, 10:26 PM

Error: Failed to publish your Function. Got error: No such compatibility flag: experimental:nodejs_compat_v2

Error: Failed to publish your Function. Got error: No such compatibility flag: experimental:nodejs_compat_v2

Error: Failed to publish your Function. Got error: No such compatibility flag: experimental:nodejs_compat_v2

Error: Failed to publish your Function. Got error: No such compatibility flag: experimental:nodejs_compat_v2

HHard@Work Does it work if you place `index.html` in a directory, then run `wrangler pages ...

S

scruffy•7/4/24, 6:19 AM

@Hard@Work | R2 sorry to ping, but does the output above prompt any other suggestions?

Sscruffy @Hard@Work | R2 sorry to ping, but does the output above prompt any other sugges...

H

Hard@Work•7/4/24, 8:06 AM

Hm, looks like the dev registry is stuck. Can you stop the

dev

dev

session, then check if there are any other

wrangler

wrangler

processes, and stop them?

HHard@Work Hm, looks like the dev registry is stuck. Can you stop the `dev` session, then c...

S

scruffy•7/4/24, 8:17 AM

Oh my! I'd been checking visually across terminals for running processes, but

ps aux | grep wrangler

ps aux | grep wrangler

ps aux | grep wrangler

ps aux | grep wrangler revealed a handful of instances knocking round in the background... killed them all and problem solved! Thanks so much for your help!

Sscruffy Oh my! I'd been checking visually across terminals for running processes, but `p...

H

Hard@Work•7/4/24, 8:19 AM

Yeah, sometimes a

wrangler

wrangler

process(or two or three) get stuck, and don't shut down when they are supposed to, which can gum up everything else

S

scruffy•7/4/24, 8:21 AM

Yeah, had run into similar problems a while back and started getting into the habit of running

lsof -i :8787

lsof -i :8787

lsof -i :8787

lsof -i :8787 or 8788, but these ones were on dynamic ports

S

scruffy•7/4/24, 8:22 AM

Thanks so so much for your help

は

はるか•7/5/24, 7:35 PM

Is it possible to get the visitor's IP through functions? It seems I only get CF's IP in sub requests from functions

ははるか Is it possible to get the visitor's IP through functions? It seems I only get CF...

H

Hello, I’m Allie!•7/5/24, 7:41 PM

Can you see it in cf-connecting-ip?

HHello, I’m Allie!Can you see it in cf-connecting-ip?

は

はるか•7/5/24, 7:43 PM

Nope, and xff has the same IP but two of them

C

Chinoman10•7/6/24, 11:18 PM

k, I give up... I've just spent the last 3h trying to debug this BS with no results whatsoever... perhaps I should've come here sooner to avoid such amount of frustration...

C

Chinoman10•7/6/24, 11:20 PM

folderRoot/
└── functions/
    └── api/
        └── hotels/
            └── index.ts

folderRoot/
└── functions/
    └── api/
        └── hotels/
            └── index.ts

folderRoot/
└── functions/
    └── api/
        └── hotels/
            └── index.ts

folderRoot/
└── functions/
    └── api/
        └── hotels/
            └── index.ts

With the following folder structure, and with a

onRequestPost

onRequestPost

onRequestPost

onRequestPost on the

index.ts

index.ts

, no matter WTF I try, I always get a

[wrangler:inf] POST /api/hotels 405 Method Not Allowed (4ms)

[wrangler:inf] POST /api/hotels 405 Method Not Allowed (4ms)

[wrangler:inf] POST /api/hotels 405 Method Not Allowed (4ms)

[wrangler:inf] POST /api/hotels 405 Method Not Allowed (4ms) :shrugg: it doesn't even go in (neither is my code returning this).

C

Chinoman10•7/6/24, 11:21 PM

Tried:

searching this Discord up & down for all mentions of 'method not allowed';
searching the Pages Functions docs for anything that could help; I've already re-read it 3-4x in the past months of developing anyway...
asked ChatGPT 4o, the only useful thing it did was create that pretty folder structure for me :shrugg:
I have like 30 other endpoints on the same project, and they "all" work (I haven't tested all of them, but there's 5-10 that I have to use while testing and they work just fine, there are no differences on their code).

C

Chinoman10•7/6/24, 11:22 PM

I'm dumbfounded and out of ideas.

C

Chinoman10•7/6/24, 11:27 PM

PS: I'm running

wrangler pages dev _site

wrangler pages dev _site

wrangler pages dev _site

wrangler pages dev _site while in the root folder, I'm not a directory up or down, like this guy: https://community.cloudflare.com/t/cf-pages-functions-wrangler-dev-405-method-not-allowed-locally/442767/14 besides, even if I were, my other functions would've have worked anyway.

C

Chinoman10•7/6/24, 11:32 PM

Oh and, I've already checked for other zombie processes, there are none running either.

CChinoman10 I'm dumbfounded and out of ideas.

N

Nob•7/6/24, 11:33 PM

go sleep come back tomorrow

N

Nob•7/6/24, 11:33 PM

sleeping is a good idea to fix bugs

C

Chinoman10•7/6/24, 11:34 PM

Can't... I need to finish this now... tomorrow is the start of EthCC and I won't be sitting on my computer for another week... except to launch this project to PRD if the tests go well for the next couple days while I'm at the events.

C

Chinoman10•7/6/24, 11:34 PM

Been developing from 9-11am to 2-5am for the past ~2 weeks... I'm 99% there; just need to populate my D1.

CChinoman10 Can't... I need to finish this now... tomorrow is the start of EthCC and I won't...

N

Nob•7/6/24, 11:35 PM

name it post.ts ?

C

Chinoman10•7/6/24, 11:36 PM

why? for debug, or?
I never named files 'get', 'post' or anything, just

index

index

, or with path placeholders like

[id]

[id]

, or dedicated endpoints like

/instagram

/instagram

/instagram

/instagram. I have more than one file with 'onRequestGet' and 'onRequestPost' on them, and they work just fine.

CChinoman10 why? for debug, or? I never named files 'get', 'post' or anything, just `index`,...

N

Nob•7/6/24, 11:36 PM

idk, have you cleared wrangler cache ?

But how I'm supposed to access them from a static web page(I don't want to access them in developmen

Similar Threads

Similar Threads

Similar Threads