vite-plugin-solid-d1

Zero-config Vite plugin for SolidStart with Cloudflare D1 and Drizzle ORM.

Features

• Zero Configuration: Just add the plugin to your app.config.ts and you're ready to go
• Automatic Middleware Generation: Generates Cloudflare environment initialization middleware
• Auto-detect Local D1 Database: Automatically finds and configures local D1 database paths
• Unified Environment: Same code works in both development and production
• Type Safety: Full TypeScript support with @cloudflare/workers-types

Installation

pnpm add -D vite-plugin-solid-d1
pnpm add -D @cloudflare/workers-types
pnpm add drizzle-orm @libsql/client
pnpm add -D drizzle-kit wrangler

Quick Start

1. Add Plugin to app.config.ts

import { defineConfig } from "@solidjs/start/config";
import solidD1 from "vite-plugin-solid-d1";

export default defineConfig({
  server: {
    preset: "cloudflare-pages",
  },
  middleware: "src/middleware.d1.ts",
  vite: {
    plugins: [solidD1()],
  },
});

2. Configure wrangler.toml

name = "my-app"
compatibility_date = "2025-02-24"

[[d1_databases]]
binding = "DB"
database_name = "my-database"
database_id = "your-database-id"

3. Create drizzle.config.ts

import { defineConfig } from "drizzle-kit";

export default defineConfig(
  process.env.LOCAL_DB_PATH
    ? {
        // Local development (automatically configured by the plugin)
        out: "./drizzle",
        schema: "./src/db/schema.ts",
        dialect: "sqlite",
        dbCredentials: {
          url: process.env.LOCAL_DB_PATH,
        },
      }
    : {
        // Remote environment
        out: "./drizzle",
        schema: "./src/db/schema.ts",
        dialect: "sqlite",
        driver: "d1-http",
        dbCredentials: {
          accountId: process.env.CLOUDFLARE_ACCOUNT_ID ?? "",
          databaseId: process.env.CLOUDFLARE_D1_DATABASE_ID ?? "",
          token: process.env.CLOUDFLARE_TOKEN ?? "",
        },
      },
);

4. Define Your Database Schema

// src/db/schema.ts
import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const users = sqliteTable("users", {
  id: int().primaryKey({ autoIncrement: true }),
  name: text("name").notNull(),
  email: text("email").notNull(),
});

5. Initialize Database

# Create D1 database
pnpm wrangler d1 create my-database

# Generate migration
pnpm drizzle-kit generate

# Apply migration locally
pnpm wrangler d1 migrations apply my-database --local

# Start development server
pnpm dev

On first run, the plugin will automatically generate src/middleware.d1.ts.

6. Use in Server Actions

import { action } from "@solidjs/router";
import { drizzle } from "drizzle-orm/d1";
import { getRequestEvent } from "solid-js/web";
import { users } from "~/db/schema";

const getUsers = action(async () => {
  "use server";

  const db = drizzle(
    getRequestEvent()?.nativeEvent.context.cloudflare.env.DB
  );

  return await db.select().from(users);
});

Plugin Options

interface SolidD1PluginOptions {
  /**
   * Middleware file output path
   * @default "src/middleware.d1.ts"
   */
  middlewarePath?: string;

  /**
   * D1 binding name (defined in wrangler.toml)
   * @default "DB"
   */
  binding?: string;

  /**
   * Local D1 database search path
   * @default ".wrangler/state/v3/d1"
   */
  dbSearchPath?: string;

  /**
   * Automatically generate middleware file
   * @default true
   */
  autoGenerateMiddleware?: boolean;
}

Example with Custom Options

import solidD1 from "vite-plugin-solid-d1";

export default defineConfig({
  vite: {
    plugins: [
      solidD1({
        binding: "MY_DATABASE",
        middlewarePath: "src/my-middleware.ts",
      }),
    ],
  },
});

How It Works

This plugin automates three key tasks:

1. Middleware Generation

Generates src/middleware.d1.ts with Cloudflare environment initialization:

import { createMiddleware } from "@solidjs/start/middleware";

export default createMiddleware({
  onRequest: async (event) => {
    if (process.env.NODE_ENV === "development") {
      const { context } = event.nativeEvent;

      if (!context?.cloudflare) {
        const { getPlatformProxy } = await import("wrangler");
        const cloudflare = await getPlatformProxy();
        context.cloudflare = cloudflare;
      }
    }
  },
});

2. Local DB Path Detection

Automatically finds the local D1 SQLite file in .wrangler/state/v3/d1/miniflare-D1DatabaseObject/ and sets LOCAL_DB_PATH environment variable for Drizzle Kit.

3. SSR Configuration

Extends Vite's SSR configuration to properly bundle Wrangler in development mode.

Troubleshooting

"Local D1 database not found"

Initialize your local database first:

pnpm wrangler d1 migrations create my-database init
pnpm wrangler d1 migrations apply my-database --local

Middleware not Applied

Check your app.config.ts:

1. preset: "cloudflare-pages" is set
2. middleware: "src/middleware.d1.ts" is configured
3. src/middleware.d1.ts file exists

Production Errors

Ensure your wrangler.toml binding name matches the plugin's binding option (default: "DB").

Development Workflow

Schema Changes

# 1. Edit src/db/schema.ts
# 2. Generate migration
pnpm drizzle-kit generate

# 3. Apply to local DB
pnpm wrangler d1 migrations apply my-database --local

# 4. Test in dev server
pnpm dev

Deploy to Production

# 1. Apply migration to production
pnpm wrangler d1 migrations apply my-database --remote

# 2. Build and deploy
pnpm build
pnpm wrangler pages deploy

Credits

This plugin is based on the best practices from cytometa-entry-form, which successfully implements "same code for local and production" approach with SolidStart, Cloudflare D1, and Drizzle ORM.

License

MIT