Hey there! Quick question about Functions built with `onRequestPost`. I need to retrieve the header

Hey there! Quick question about Functions built with

onRequestPost

onRequestPost

onRequestPost

onRequestPost. I need to retrieve the header sent but nothing is mentioned on the Pages Functions doc... I tried applying the Workers doc suggestion but when I do so on Wrangler:

export async function onRequestPost(context) {
  const customHeader = await context.headers.get('my-custom-header')
...
}

export async function onRequestPost(context) {
  const customHeader = await context.headers.get('my-custom-header')
...
}

export async function onRequestPost(context) {
  const customHeader = await context.headers.get('my-custom-header')
...
}

export async function onRequestPost(context) {
  const customHeader = await context.headers.get('my-custom-header')
...
}

I get a

Could not resolve "crypto"

Could not resolve "crypto"

Could not resolve "crypto"

Could not resolve "crypto"

Any body tried and achieve this using Pages Functions?

Thanks!

Rregis Hey there! Quick question about Functions built with `onRequestPost`. I need to ...

Isaac McFadyen•5/25/22, 7:37 PM

Crypto? That seems like a completely seperate issue from the code snippet you sent. Are you importing anything by chance?

IIsaac McFadyen Crypto? That seems like a completely seperate issue from the code snippet you se...

regisOP•5/25/22, 7:39 PM

Oh yeah... my IDE added a require in there. I can get the headers now using: const customHeader = await context.request.headers.get('my-custom-header') const customHeader = await context.request.headers.get('my-custom-header') Thanks for your quick wits

FFayaz nvm found it

amorfati•5/27/22, 2:59 AM

where did you find it? I have a vitejs project and struggling to run functions locally

amorfati•5/27/22, 3:00 AM

do you mind sharing your

wrangler.toml

wrangler.toml

and vite.config.jsvite.config.js? Been trying to get this to work for an embarrassing amount of time

amorfati•5/27/22, 3:02 AM

if anyone has any vitejs project that has Cludflare Functions integration please bless me with a link

amorfati•5/27/22, 4:13 AM

-the function
-the file in /functions/api
-wrangler cli: wrangler pages dev functionswrangler pages dev functions
-the request: http://127.0.0.1:8788/api/pinghttp://127.0.0.1:8788/api/ping
-the response

what am I doing wrong? '

amorfati•5/27/22, 4:18 AM

amorfati•5/27/22, 4:18 AM

sorry don't mean to spam. Forgot to attach a screenshot

amorfati•5/27/22, 6:44 AM

the pain is no more. I switched from default export to named export and it magically worked. I had the compiled file opened on the side and saw it was missing one API route. Updating the file with the missing route I noticed the compiled file does live update reflecting changes I make

amorfati•5/27/22, 6:45 AM

i actually don't like default exports and rarely ever export default but this time I did and i'm never doing it again lol

Erwin•5/27/22, 7:06 AM

Haha..

sumit•5/27/22, 11:46 AM

can I look at a github repo with functions actually deployed? I wanna look at the directory structure etc

sumit•5/27/22, 4:33 PM

Please help me debug this hello world functions error. Logs in comment ->

Ssumit Please help me debug this hello world functions error. Logs in comment ->

sumit•5/27/22, 4:33 PM

Finished
22:01:39.225

'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose
22:01:39.266 ✘ [ERROR] Transforming async functions to the configured target environment ("es5") is not supported yet
22:01:39.266
22:01:39.266 ../../../buildhome/repo/functions/api/hello.js:2:7:
22:01:39.267 2 │ export async function onRequestPost(request) {
22:01:39.267 ╵ ~
22:01:39.267
22:01:39.267 The target environment was set to "es5" here:
22:01:39.267
22:01:39.267 ../../../buildhome/repo/tsconfig.json:3:14:
22:01:39.267 3 │ "target": "es5",
22:01:39.267 ╵ ~
22:01:39.268
22:01:39.270
22:01:39.364 [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mBuild failed with 1 error:[0m
22:01:39.365
22:01:39.365 ../../../buildhome/repo/functions/api/hello.js:2:7: ERROR: Transforming async functions to the configured target environment ("es5") is not supported yet
22:01:39.365
22:01:39.365
22:01:39.365 [32mIf you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new.[0m
22:01:39.377 Failed building Pages Functions from /functions.
22:01:40.224 Failed: an internal error occurred

sumit•5/27/22, 4:40 PM

is es6 ok?

sumit•5/27/22, 4:44 PM

yeah es6 ok

sumit•5/27/22, 8:35 PM

Thanks

sumit•5/27/22, 9:03 PM

Here's an error on my console:

GET https://mydomain.com/api/hello 404

Response {type: 'basic', url: 'https://mydomain.com/api/hello', redirected: false, status: 404, ok: false, …}

The function:

addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
return new Response('Hello worker!');
}

The frontend code:

async function fetchMovies() {
const response = await fetch('/api/hello');
// waits until the request completes...
console.log(response);
}

fetchMovies();

sumit•5/27/22, 9:04 PM

Why the 404? I guess I'm missing something obvious?

James•5/27/22, 9:10 PM

Functions need to export things like onRequestGetonRequestGet to handle requests: https://developers.cloudflare.com/pages/platform/functions/

James•5/27/22, 9:11 PM

The addEventListener('fetch', event => {addEventListener('fetch', event => { syntax looks like a normal service worker Worker format - perhaps you're not using Functions and this is just a worker?

JJames The `addEventListener('fetch', event => {` syntax looks like a normal service wo...

sumit•5/27/22, 9:14 PM

I'm using functions but using workers code (I asked if workers and pages are same, didn't know the code isn't interchangeable)

sumit•5/27/22, 9:18 PM

functions

Isaac McFadyen•5/27/22, 9:19 PM

Anything that runs in Workers can run in Functions.

Isaac McFadyen•5/27/22, 9:19 PM

They just have different APIs.

James•5/27/22, 9:20 PM

Yeah you can do almost all of the same stuff, but the syntax for how you export and run them is a little different. Functions uses file-based routing for example, whereas you're left to handle that yourself in a Worker

Isaac McFadyen•5/27/22, 9:20 PM

And even then you can use "Advanced Mode" to directly move code over if you wish.

James•5/27/22, 9:20 PM

Yeah what Isaac said

sumit•5/27/22, 9:21 PM

Sound awesome. Maybe I'm asking for too much but can I get some sort of 1-on-1 for a bit to get basics going for like 10 or 15 mins? I've been trying to use functions for long!

Stewart@Art.Page•5/28/22, 12:05 AM

Does anyone know when the functions limit is increased, should that reflect on the pages dashboard?
Spoke with Nevica yesterday and they said it'd be updated, but not sure if the UI stays the same or if it's still pending to go through

SStewart@Art.Page Does anyone know when the functions limit is increased, should that reflect on t...

James•5/28/22, 12:06 AM

The UI does update, yes

It may take up to 24 hours for the actual usage counter to allow more than the default 100k though, if I recall

JJames The UI does update, yes 🙂 It may take up to 24 hours for the actual usage count...

Stewart@Art.Page•5/28/22, 12:07 AM

Ah okay, hopefully tomorrow mine will show x / <higher number> then, thanks!

amorfati•5/28/22, 1:34 AM

if one were to do this but as a function in the /functions, I would need to convert the syntax and test it. anything else? https://github.com/cloudflare/templates/blob/main/examples/fast-google-fonts/fast-google-fonts.js

GitHub

templates/fast-google-fonts.js at main · cloudflare/templates

A collection of stater templates and examples for Cloudflare Workers and Pages - templates/fast-google-fonts.js at main · cloudflare/templates

amorfati•5/28/22, 1:34 AM

or are these workers examples not applicable to /functions?

nitsky•5/28/22, 3:17 AM

Hey, is there support for rust+wasm in pages functions?

sumit•5/28/22, 10:14 PM

What's the equivalent of functions that is more google-friendly?

For example, in its early days, GitHub might not have been popular so it would have been better if you searched by mentioning git rather than GitHub on the search engine.

Ssumit What's the equivalent of functions that is more google-friendly? For example, i...

Isaac McFadyen•5/28/22, 10:18 PM

Cloudflare Functions, basically.

Isaac McFadyen•5/28/22, 10:18 PM

Or Cloudflare Pages but Pages didn't use to be dynamic so you'll get results for static sites mostly.

Chaika•5/28/22, 10:20 PM

or depending on what you're looking for, searching for cloudflare workers solutions (i.e "how to post a tweet using cloudflare workers"), and in most cases you can port the code over to functions. Probably would find a lot more code examples/etc that use CF Workers right now

IIsaac McFadyen Cloudflare Functions, basically.

sumit•5/29/22, 3:28 PM

Thanks, no equivalent outside CF ecosystem?

sumit•5/29/22, 3:29 PM

btw, is this code ok?

// Reacts to POST /api/hello
export async function onRequest(request) {
  // ...

  const body = { "products" : [
    { "Name": "Cheese", "Location": "Refrigerated foods"},
    { "Name": "Crisps", "Location": "the Snack isle"},
    { "Name": "Pizza", "Location": "Refrigerated foods"},
  ]}
  
  const headers = {
    'Access-Control-Allow-Origin': '*',
    'Content-type': 'application/json',
  };
  return new Response(body, { headers });
};

// Reacts to POST /api/hello
export async function onRequest(request) {
  // ...

  const body = { "products" : [
    { "Name": "Cheese", "Location": "Refrigerated foods"},
    { "Name": "Crisps", "Location": "the Snack isle"},
    { "Name": "Pizza", "Location": "Refrigerated foods"},
  ]}
  
  const headers = {
    'Access-Control-Allow-Origin': '*',
    'Content-type': 'application/json',
  };
  return new Response(body, { headers });
};

James•5/29/22, 3:38 PM

You'll want to JSON.stringifyJSON.stringify the

body

body

, but otherwise yes

JJames You'll want to `JSON.stringify` the `body`, but otherwise yes 🙂

sumit•5/29/22, 3:43 PM

Thanks, while sending (in this code) or while receiving?

Isaac McFadyen•5/29/22, 3:44 PM

Sending.

sumit•5/29/22, 3:44 PM

cool

Isaac McFadyen•5/29/22, 3:44 PM

You can't directly put an Object body into a response, you'll need to JSON.stringify(body)JSON.stringify(body)

sumit•5/29/22, 3:44 PM

so the new body will be this?
body = JSON.stringify(body)

Isaac McFadyen•5/29/22, 3:48 PM

Yup.

IIsaac McFadyen Yup.

sumit•5/29/22, 3:48 PM

also, what is the widest possible class of this code that I can google so that I can find reusable code?

JS functions? Node.js functions? What should give me reusable code while also ensuring max possible userbase?

sumit•5/29/22, 3:50 PM

i feel really awkward asking everything on this channel even though y'all are really nice

Hey there! Quick question about Functions built with `onRequestPost`. I need to retrieve the header

Similar Threads

Similar Threads

Similar Threads