Sveltekit D1

ViggieM

A template for SvelteKit Projects with a Cloudflare D1 Database

Demo Download

SvelteKit on Cloudflare Worker with D1 Database (SQLite)

This is a template for the Cloudflare C3 CLI that initializes a new SvelteKit project with a D1 database.

Key Features:

connects to D1 database with Drizzle
authentication with Lucia
makes use of Remote functions in SvelteKit
DaisyUI for styling
valibot for form validation

Setup Instructions

1. Create a new project using this template

pnpm create cloudflare@latest --template [email protected]:ViggieM/sveltekit-d1.git [DIRECTORY] --git
cd [DIRECTORY]
pre-commit install

2. Add a new D1 database

pnpx wrangler d1 create --binding 'DB' [DATABASE_NAME]
# update types after db creation
pnpm wrangler types ./src/worker-configuration.d.ts

Set the "migrations_dir" of your recently created database in wrangler.jsonc to "drizzle".

// wrangler.jsonc

"d1_databases": [
  {
    // ...
    "migrations_dir": "drizzle"
  }
]

And generate the migrations for the tables 'user' and 'session':

pnpm run db:generate

3. Create an environment file `.env` with the following values (see `.env.example`)

CLOUDFLARE_ACCOUNT_ID

can be determined with `pnpx wrangler whoami`

CLOUDFLARE_DATABASE_ID

is the one from the previous step (in `wrangler.jsonc` "d1_databases" settings)

CLOUDFLARE_D1_TOKEN

Go to Account API tokens (or User API Tokens)
Under API Tokens, select Create Token.
Scroll to Custom token > Create custom token, then select Get started.
Under Token name, enter a descriptive token name. For example, Name-D1-Import-API-Token.
Under Permissions:
- Select Account.
- Select D1.
- Select Edit.
Select Continue to summary.
Select Create token.
Copy the API token and save it in a secure file. (i.e. in the .env file as CLOUDFLARE_D1_TOKEN)

4. Add these secrets also to your worker

npx wrangler secret put CLOUDFLARE_ACCOUNT_ID
npx wrangler secret put CLOUDFLARE_DATABASE_ID
npx wrangler secret put CLOUDFLARE_D1_TOKEN
# update types after secrets or env variables update
pnpm wrangler types ./src/worker-configuration.d.ts

5. Generate and apply database migrations

pnpm drizzle-kit push

# generate migrations in the /drizzle folder
pnpm drizzle-kit generate
pnpm drizzle-kit migrate

# apply migrations locally
pnpm wrangler d1 migrations apply [DATABASE_NAME] --local

6. Deploy your worker

pnpm build
pnpm wrangler deploy

# follow logs
pnpm wrangler tail

Where can we go from here?

Add GitHub / Google authentication
Add a 404/500 error page
Improve logout: ATM there are two ways it is done, but I didn't decide yet which one is better
In case you don't need any authentication, use the prompt misc/REMOVE_AUTHENTICATION_PROMPT.md

Troubleshooting

In case you encounter any issues with the worker, you can use

pnpm wrangler tail

to inspect logs.

Here are some errors I encountered and their solutions:

Note that these reports were written by Claude Code, so they might contain false informations and hints. :)

FAQ

Can anyone access my database?

No, since the access to the D1 database is configured in the drizzle.config.ts file as:

export default defineConfig({
    // ...
    dbCredentials: {
        accountId: process.env.CLOUDFLARE_ACCOUNT_ID!,
        databaseId: process.env.CLOUDFLARE_DATABASE_ID!,
        token: process.env.CLOUDFLARE_D1_TOKEN!
    }
    // ...
});

Top categories