Using a hybrid static site generator + dynamic SSR approach via CF Pages and worker functions, proba

KKeavon Using a hybrid static site generator + dynamic SSR approach via CF Pages and wor...

D

Dahoom•7/18/23, 1:27 AM

My idea probably isn't the best but you could try to detect if the user has a JWT or something, and if so it sends a post request to a +server.ts file which attempts to authenticate it

D

Dahoom•7/18/23, 1:28 AM

Make sure you sanitize the token before attempting to authenticate

KKeavon Using a hybrid static site generator + dynamic SSR approach via CF Pages and wor...

D

Dahoom•7/18/23, 1:32 AM

But overall I suggest you skip the headache and just keep it all on cloudflare workers, it's only 0.5$/mil and it's not worth going through all these hoops which can potentially make the user experience worse. If you're scared of users infinitly reloading you can add rate limiting through WAF or create your own implementation

D

Dahoom•7/18/23, 1:34 AM

I went through the same thought process and decided it's not worth the hassle since for every page except for any docs you have you will have to run a serverside check to see if the user is logged in/valid, so why not just make the page all 1 worker function since it's already going to use a call anyways

B

brian•7/18/23, 11:40 AM

Is there some kind of "pass through" for Pages Functions that would allow me to get a request to the Zaraz HTTP endpoint?

W

Walshy•7/18/23, 1:26 PM

What do you mean?

W

Walshy•7/18/23, 1:27 PM

Could you not just fetch it?

B

brian•7/18/23, 3:31 PM

I am, but the request isn't reaching Zaraz. It's hitting functions again (the POST request shows in the log)

B

brian•7/18/23, 3:32 PM

in

_middleware.ts

_middleware.ts

_middleware.ts

_middleware.ts, I'm running this:

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

B

brian•7/18/23, 3:34 PM

that endpoint is what I have configured here

B

brian•7/18/23, 3:36 PM

it seems like Pages Functions is receiving the request, but there is no asset or function for the path I chose. Zaraz doesn't see the request

B

brian•7/18/23, 4:04 PM

("solved" over in #zaraz with a temporary solution until the Zaraz API can be contacted within its zone: zaraz)

C

Cryptic Jack•7/19/23, 4:21 AM

could someone help me with getting local dev with wragler working perhaps?

C

Cryptic Jack•7/19/23, 4:22 AM

i have the form action set and method

method="POST" action="/api/submit.js"

method="POST" action="/api/submit.js"

method="POST" action="/api/submit.js"

method="POST" action="/api/submit.js"

C

Cryptic Jack•7/19/23, 4:22 AM

C

Cryptic Jack•7/19/23, 4:23 AM

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

C

Cryptic Jack•7/19/23, 4:23 AM

i get this error

C

Cryptic Jack•7/19/23, 4:23 AM

this is the command

C

Cryptic Jack•7/19/23, 4:23 AM

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

C

Cryptic Jack•7/19/23, 6:12 AM

i figured it out

B

brian•7/19/23, 9:49 PM

Does

env.ASSETS.fetch

env.ASSETS.fetch

env.ASSETS.fetch

env.ASSETS.fetch return a 404 status code if the requested page is missing?

B

brian•7/19/23, 9:51 PM

or

ctx.next()

ctx.next()

ctx.next()

ctx.next()

B

brian•7/19/23, 9:51 PM

I suppose it must

E

Erisa•7/19/23, 9:53 PM

yeah

D

Dahoom•7/21/23, 12:43 AM

I have a question about the sveltekit building of a pages function, I have this very long array of 160k temp email domain strings that i use to check against in a signup api

D

Dahoom•7/21/23, 12:45 AM

I see that everything is compiled into 1 _worker.js file and this makes the file itself over 3.6MB, doesnt this slow down functions a lot? or does the _worker.js.map make this not much of a problem?

D

Dahoom•7/21/23, 12:47 AM

I've only tested this pages project locally so I just wanted to know if i should remedy this before implementing this signup system into my main project

R

Roman•7/24/23, 11:37 AM

Hi all,
my function log (sveltekit app) says exceededCpu/exceededMemory (free plan)
is there a way to tell how much mem/cputime would suffice? I am trying to see what quotas I am going to consume if I switch to paid plan.

RRoman Hi all, my function log (sveltekit app) says exceededCpu/exceededMemory (free pl...

D

Dahoom•7/24/23, 12:25 PM

Memory is always 128MB AFAIK

C

charl.dev•7/24/23, 12:56 PM

From memory, I should be able to access client ip from page function?

e.g.

export const onRequestPost: PagesFunction<Env> = async (context) => {
    const { id } = await context.request.json() as { id: string };
    const clientIp = await context.request.headers.get("CF-Connecting-IP");
    console.log('context', clientIp)

export const onRequestPost: PagesFunction<Env> = async (context) => {
    const { id } = await context.request.json() as { id: string };
    const clientIp = await context.request.headers.get("CF-Connecting-IP");
    console.log('context', clientIp)

export const onRequestPost: PagesFunction<Env> = async (context) => {
    const { id } = await context.request.json() as { id: string };
    const clientIp = await context.request.headers.get("CF-Connecting-IP");
    console.log('context', clientIp)

export const onRequestPost: PagesFunction<Env> = async (context) => {
    const { id } = await context.request.json() as { id: string };
    const clientIp = await context.request.headers.get("CF-Connecting-IP");
    console.log('context', clientIp)

however I cant seem to access any of the header props. This is when deving locally

K

kian•7/24/23, 2:37 PM

Local development doesn't go through Cloudflare so that header won't exist

S

Shy•7/25/23, 2:01 PM

Question on how to best setup a worker. I've got a get and a post method for a page. Should I put those in the same file or should I split them up?

S

Shy•7/25/23, 2:02 PM

the get method just grabs some real time data and replaces it in the static site. The post method updates a table in a DB.

D

designfirst•7/25/23, 11:01 PM

Wondering if anyone here might have some ideas that may help me with a file upload form I'm attempting to build with Remix on Cloudflare Pages and using a Function. I've posted details here https://discord.com/channels/595317990191398933/1133532844367552592/1133532844367552592

SShy Question on how to best setup a worker. I've got a get and a post method for a p...

D

Dahoom•7/26/23, 12:45 AM

depends on if youre using a framework, if youre using something like sveltekit there is a cloudflare adapter that will compile all your serverside files into 1 _worker.js file

D

Dahoom•7/26/23, 12:46 AM

without a framework i believe you have to create a functions folder at the root of your project and place your files there

V

valkyrie_pilot•7/26/23, 2:10 AM

the docs are very unclear: do i need a routes.json if i neither have middleware nor a _worker.js file?

V

valkyrie_pilot•7/26/23, 2:15 AM

also, why would i get this error:

✘ [ERROR] No matching export in "../node_modules/@cloudflare/workers-types/index.ts" for import "Response"

    api/[channel_id]/[attachment_id]/[filename].ts:1:24:
      1 │ import { PagesFunction, Response } from "@cloudflare/workers-types";

✘ [ERROR] No matching export in "../node_modules/@cloudflare/workers-types/index.ts" for import "Response"

    api/[channel_id]/[attachment_id]/[filename].ts:1:24:
      1 │ import { PagesFunction, Response } from "@cloudflare/workers-types";

✘ [ERROR] No matching export in "../node_modules/@cloudflare/workers-types/index.ts" for import "Response"

    api/[channel_id]/[attachment_id]/[filename].ts:1:24:
      1 │ import { PagesFunction, Response } from "@cloudflare/workers-types";

✘ [ERROR] No matching export in "../node_modules/@cloudflare/workers-types/index.ts" for import "Response"

    api/[channel_id]/[attachment_id]/[filename].ts:1:24:
      1 │ import { PagesFunction, Response } from "@cloudflare/workers-types";

? As far as i can tell, the type is there

Vvalkyrie_pilot the docs are very unclear: do i need a routes.json if i neither have middleware ...

D

Dahoom•7/26/23, 3:54 AM

_routes.json tells cloudflare which routes are to be used with workers and which shouldn't be

Vvalkyrie_pilot also, why would i get this error: ``` ✘ [ERROR] No matching export in "../node_...

D

Dahoom•7/26/23, 3:55 AM

What framework are you using

DDahoom What framework are you using

V

valkyrie_pilot•7/26/23, 3:59 AM

i wasn't using any... turns out not importing it worked fine

V

valkyrie_pilot•7/26/23, 3:59 AM

¯\_(ツ)_/¯

DDahoom _routes.json tells cloudflare which routes are to be used with workers and which...

V

valkyrie_pilot•7/26/23, 4:00 AM

yes, so if my route is just a static asset and no worker could possibly be invoked, is that fine?

D

Dahoom•7/26/23, 4:03 AM

I suppose so, in that case it would just be a static site i think

D

Dahoom•7/26/23, 4:04 AM

I recommend using a framework to simplify this process. I use sveltekit, it has the cloudflare adapter which converts any server files you have into a worker.js folder without needing to really think about routes that much

V

valkyrie_pilot•7/26/23, 2:13 PM

why would i use a framework to handle literally 13 lines of code

V

valkyrie_pilot•7/26/23, 2:13 PM

that's why i'm concerned- i only have one /functions/api/ route, and i don't want to be billed as if i'm using a framework

Vvalkyrie_pilot that's why i'm concerned- i only have one /functions/api/ route, and i don't wan...

D

Dahoom•7/26/23, 2:54 PM

you don't get billed extra for compiling it... using a framework can automatically create your

_headers

_headers

_headers

_headers

_routes

_routes

_routes

_routes

_worker.js

_worker.js

_worker.js.map

_worker.js.map

_worker.js.map

_worker.js.map files

D

Dahoom•7/26/23, 2:55 PM

sounds like your 13 lines of code could just be a turned into a regular cf worker? not a pages function so you can have more control over it

Using a hybrid static site generator + dynamic SSR approach via CF Pages and worker functions, proba

Similar Threads

Similar Threads

Similar Threads