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