Attempt 1 - Next js🔗

Cant seem instantiate cloudflare with getRequestContext in a way that doesnt make it crash with:

[Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.

example project here uses a third party lib to bind next-on-cloudflare-example/src/bindings.ts at main · Rei-x/next-on-cloudflare-example (github.com)

Found this document hidden away next-on-pages/packages/next-on-pages/docs/supported.md at main · cloudflare/next-on-pages (github.com). There are just too many gotchas to make next.js viable on on cloudlflare for now … sad…

Attempt 2 - Astro🔗

Setting up Cloudflare Infra🔗

Setting up D1 with Drizzle

via CLI:

npx wrangler d1 create <DATABASE_NAME>

returns toml config which is placed in your wrangler.toml file.

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "test-db"
database_id = "d61ce790-55fd-4ec1-8b43-7d3617742a82"

Alternative its via the Cloudflare workers dashbordhttps://dash.cloudflare.com

setup drizzle schema then setup script to generate

{
    "scripts":{
        //...
        "generate": "drizzle-kit generate:sqlite --schema=./src/schema.ts",
        //...
    }
}

This creates SQL scripts to create the relevant tables. It does not execute it on the table. to do that we run:

npx wrangler d1 execute email-worker --local --file=./drizzle/<DRIZZLE-GENERATED-FILE>>.sql

We not have a fully setup D1 database running locally which we can access in next.js like so:

import { getRequestContext } from "@cloudflare/next-on-pages";
import { drizzle } from "drizzle-orm/d1";

const DB = getRequestContext().env.APP_DB;
const db = drizzle(DB);


export default async function Page(){

  const todos = await db.select().from(todo);

  return(
    <>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </>
  )
}

Images🔗

enable public access to your r2 bucket ( maybe work around this with signed urls?)
enable transformation on your cloudflare domain name a.k.a zone
forward your r2 images url into your transfomration zone via the transform via url API
use this url with https://unpic.pics/img/react/ and we have extremlely optimised images on your website

This was an absolute failure. Im moving on to Astro.js as a full-stack web dev solution. Especially with the announcement of Astro Actions, it feels like Astro can really stand its ground against the likes of Next.js

Code repo: https://github.com/chiubaca/fullstack-astro-cloudflare

Demo site: https://fullstack-astro-cloudflare.pages.dev/

see delete-fullstack-cloudflare-astro

References: