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.

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

Core components:


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


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.


Once you have deployed your page to cloudflair


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": ""

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

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



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

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

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

WHat belongs in the browser

What Belongs on the edge

What belongs in our servers

todo polish this page :)