Steps

Create a repo

make a functions folder

make a public folder

npm init

add a build command to package.json

implement your functionality.

There may be a security reson not to but for the sake of this post ill be dumping the context to json output.

https://developers.cloudflare.com/pages/platform/functions/routing/

So first, great work everyone at cloud flare good work, but docs need simplification. hope your pricing model is forgiving.

Core components:

DNS

Cloud Flare requires control of your dns they the route and anonamastl track all trafic to your site and block maliciose request and provide builk DDoS protection. Yada Ya Cloud Flair = cf for notes :)

                                                  /=================mtls tunnel==[you server]
The point is [customer]->[isp]->[cf-dns]->[cf-edge]->[cf-db/kv]/
     ||             First round trip dnd
     ||                     Second round trip to establish ssl then
     ||                            Third round trip back to you server but this is started early or delayed till after return
     ||                              //
     ||                             //
     Finally html is piped back to the client and loaded
 

Note in the future the browser side client will then establish a secure web socket to our server/ peers

Pages

So pages have static html/ css hosted just specify a folder in the config

each function can be named like its route. you can put stuff in folders.

Function

Once you have deployed your page to cloudflair

Routing

• Cloud Flare allow file based routing to /api/myThing.js -> https://repo.workers.dev/api/myThing
• There is the option syntax of [] for params ie `/funtions/api/cat/[name].js
  • This allows you to access request.param.name
• Then there is the /functions/api/file/[[da_path]].js which matching any depth of route after /api/file/*
  • https://repo.workers.dev/api/file/path/to/file.jpg -> request.param.da_path: ["path", "to", "file.jpg"]
  • Note that i think these catch alls run first so make sure to call request.next();

Example Request object

{
  "request": {},
  "functionPath": "/dumpContext",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {},
    "CF_PAGES": "1",
    "CF_PAGES_BRANCH": "main",
    "CF_PAGES_COMMIT_SHA": "16fdcce6006ed3525820f99188f09cd954cda3fc",
    "CF_PAGES_URL": "https://0858e522.sgol-pub.pages.dev"
  }
}

Example minimal function template

// // Configuring request handling
// onRequest(context) // Invoked on all requests
// onRequestGet(context) // Invoked on all GET requests
// onRequestPost(context) // Invoked on all POST requests
// onRequestPatch(context) // Invoked on all PATCH requests
// onRequestPut(context) // Invoked on all PUT requests
// onRequestDelete(context) // Invoked on all DELETE requests
// onRequestHead(context) // Invoked on all HEAD requests
// onRequestOptions(context) // Invoked on all OPTIONS requests
// export async function onRequest(context) {
// }
// // Fetching assets
// env.ASSETS.fetch() // Fetches a static asset from your Pages project
//
// // EventContext properties
// request // The incoming Request
// functionPath // The path of the request
// waitUntil(promise) // Holds the request until the promise is resolved
// passThroughOnException() // Continues to the next function on an exception
// next(input?, init?) // Passes the request to the next function or the asset server
// env // Environment variables for the project
// params // Values from dynamic routing
//
// // Example of using params for dynamic routing
// file names /functions/users/[user].js -> .../users/bob
// export function onRequest(context) {
//     return new Response(`Hello ${context.params.user}`);
// } // Hello bob


export function onRequest(request, env) {
    const response = new Response(request, {
     headers: { 'Content-Type': 'application/json' },
   })
   return response
}

https://developers.cloudflare.com/workers/runtime-apis/nodejs/

So the pros of cloud flair worker are that they can be deployed anywhere

Barinstomring

THings

Frontends - html css and js frameworks for displaying a visually stunning UX

• Frontends are fully browser based but served on the edge

Apis - helper functions to simplify the frontends and provide access to data/ offload compute

• Apis belong on the edge for caching and speed

Backends - heavy liffing and durable stroage. offer secure enviroment to run trusted code and deliver data to apis

• Backend is HAPI a spide web of intagrations and platforms

WHat belongs in the browser

What Belongs on the edge

What belongs in our servers

todo polish this page :)