Setting up Drizzle with SvelteKit

Drizzle is a lightweight and type-safe ORM for TypeScript. This tutorial will show you how to integrate it with a SvelteKit application.

1. Project Setup:

   npm create svelte@latest my-drizzle-app
   cd my-drizzle-app
   npm install drizzle-orm @drizzle/kit @drizzle/cli pg # Or your preferred database client

2. Database Setup: Create a PostgreSQL database (or your chosen database). Note down the connection string.

3. Drizzle Configuration: Create a drizzle.config.ts file at the root of your project:

   import type { Config } from 'drizzle-kit';
   
   export default {
     schema: './src/schema.ts', // Path to your schema
     out: './drizzle', // Output directory for migrations
     driver: 'pg', // Your database driver
     dbCredentials: {
       connectionString: process.env.DATABASE_URL || 'your_connection_string', // Use environment variables!
     },
   } satisfies Config;

4. Schema Definition: Create src/schema.ts:

   import { pgTable, serial, varchar } from 'drizzle-orm/pg-core';
   
   export const users = pgTable('users', {
     id: serial('id').primaryKey(),
     name: varchar('name', { length: 256 }),
   });

5. Generate Migrations:

   npx drizzle-kit generate

6. Apply Migrations:

   npx drizzle-kit push

7. Using Drizzle in SvelteKit: Create a src/routes/+page.server.ts file:

   import { db } from '$lib/server/db'; // Create this file (see next step)
   import { users } from '../../schema';
   
   export const load = async () => {
     const allUsers = await db.select().from(users);
     return { users: allUsers };
   };

8. Database Instance: Create src/lib/server/db.ts:

   import { drizzle } from 'drizzle-orm/node-postgres'; // Or your client adapter
   import pg from 'pg';
   import { DATABASE_URL } from '$env/static/private'; // Import from env
   import * as schema from '../../schema'; // Import your schema
   
   const pool = new pg.Pool({ connectionString: DATABASE_URL });
   export const db = drizzle(pool, { schema });

9. Displaying Data: In your src/routes/+page.svelte:

   <script>
     export let data;
   </script>
   
   {#each data.users as user}
     <p>{user.name}</p>
   {/each}

This sets up a basic SvelteKit application with Drizzle ORM. Remember to set your DATABASE_URL environment variable. This example shows how to read data; you can extend it to include create, update, and delete operations.