feat: add drizzle

.changeset/fast-teachers-explain.md

@@ -0,0 +1,22 @@
+---
+"create-t3-app": patch
+---
+
+feat: add drizzle
+
+This release adds a new option to use [`drizzle-orm`](https://orm.drizzle.team/) as an alternative to Prisma.
+
+To make the different ORM options as similar as possible, some minor changes has also been made to the Prisma installer:
+
+- a new script `db:push` has been added and is included in both ORM options.
+- the prisma client has been renamed to `db` in the trpc context - you now access your database client like
+  ```ts
+  examples: publicProcedure.query((opts) => {
+     // prisma
+     opts.ctx.db.example.findMany()
+     // drizzle
+     opts.ctx.cb.query.example.findMany()
+  }),
+  ```
+
+You cannot choose the two options in the same app.

.github/workflows/e2e.yml

@@ -27,8 +27,9 @@ jobs:
         tailwind: ["true", "false"]
         nextAuth: ["true", "false"]
         prisma: ["true", "false"]
+        drizzle: ["true", "false"]
 
-    name: "Build and Start T3 App ${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}"
+    name: "Build and Start T3 App ${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}}"
     steps:
       - uses: actions/checkout@v3
         with:
@@ -65,7 +66,7 @@ jobs:
       # has to be scaffolded outside the CLI project so that no lint/tsconfig are leaking
       # through. this way it ensures that it is the app's configs that are being used
       # FIXME: this is a bit hacky, would rather have --packages=trpc,tailwind,... but not sure how to setup the matrix for that
-      - run: cd cli && pnpm start ../../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }} --noGit --CI --trpc=${{ matrix.trpc }} --tailwind=${{ matrix.tailwind }} --nextAuth=${{ matrix.nextAuth }} --prisma=${{ matrix.prisma }}
-      - run: cd ../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }} && pnpm build
+      - run: cd cli && pnpm start ../../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}} --noGit --CI --trpc=${{ matrix.trpc }} --tailwind=${{ matrix.tailwind }} --nextAuth=${{ matrix.nextAuth }} --prisma=${{ matrix.prisma }} --drizzle=${{ matrix.drizzle }}
+      - run: cd ../ci-${{ matrix.trpc }}-${{ matrix.tailwind }}-${{ matrix.nextAuth }}-${{ matrix.prisma }}-${{ matrix.drizzle}} && pnpm build
         env:
           NEXTAUTH_SECRET: foo

.vscode/settings.json

@@ -24,5 +24,8 @@
   "mdx.experimentalLanguageServer": true,
   "[astro]": {
     "editor.defaultFormatter": "astro-build.astro-vscode"
+  },
+  "[prisma]": {
+    "editor.defaultFormatter": "Prisma.prisma"
   }
 }

cli/package.json

@@ -52,6 +52,7 @@
     "sort-package-json": "^2.4.1"
   },
   "devDependencies": {
+    "@planetscale/database": "^1.7.0",
     "@prisma/client": "^4.14.0",
     "@t3-oss/env-nextjs": "^0.3.1",
     "@tanstack/react-query": "^4.29.7",
@@ -63,6 +64,7 @@
     "@types/gradient-string": "^1.1.2",
     "@types/inquirer": "^9.0.3",
     "@types/node": "^18.16.0",
+    "drizzle-orm": "^0.26.5",
     "next": "^13.4.1",
     "next-auth": "^4.22.1",
     "prettier": "^2.8.8",

cli/src/cli/index.ts

@@ -25,6 +25,8 @@ interface CliFlags {
   /** @internal Used in CI. */
   prisma: boolean;
   /** @internal Used in CI. */
+  drizzle: boolean;
+  /** @internal Used in CI. */
   nextAuth: boolean;
 }
 
@@ -45,6 +47,7 @@ const defaultOptions: CliResults = {
     tailwind: false,
     trpc: false,
     prisma: false,
+    drizzle: false,
     nextAuth: false,
     importAlias: "~/",
   },
@@ -103,6 +106,12 @@ export const runCli = async () => {
       (value) => !!value && value !== "false",
     )
     /** @experimental - Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
+    .option(
+      "--drizzle [boolean]",
+      "Experimental: Boolean value if we should install Drizzle. Must be used in conjunction with `--CI`.",
+      (value) => !!value && value !== "false",
+    )
+    /** @experimental - Used for CI E2E tests. Used in conjunction with `--CI` to skip prompting. */
     .option(
       "--trpc [boolean]",
       "Experimental: Boolean value if we should install tRPC. Must be used in conjunction with `--CI`.",
@@ -152,7 +161,16 @@ export const runCli = async () => {
     if (cliResults.flags.trpc) cliResults.packages.push("trpc");
     if (cliResults.flags.tailwind) cliResults.packages.push("tailwind");
     if (cliResults.flags.prisma) cliResults.packages.push("prisma");
+    if (cliResults.flags.drizzle) cliResults.packages.push("drizzle");
     if (cliResults.flags.nextAuth) cliResults.packages.push("nextAuth");
+
+    if (cliResults.flags.prisma && cliResults.flags.drizzle) {
+      console.warn(
+        "Incompatible combination Prisma + Drizzle. Falling back to Prisma only.",
+      );
+      cliResults.flags.drizzle = false;
+      cliResults.packages.splice(cliResults.packages.indexOf("drizzle"), 1);
+    }
   }
 
   // Explained below why this is in a try/catch block
@@ -264,6 +282,12 @@ const promptPackages = async (): Promise<AvailablePackages[]> => {
         name: pkgName,
         checked: false,
       })),
+    validate: (input: string[]) => {
+      if (input.includes("prisma") && input.includes("drizzle")) {
+        return "You cannot select both Prisma and Drizzle in the same app.";
+      }
+      return true;
+    },
   });
 
   return packages;

cli/src/helpers/logNextSteps.ts

@@ -23,10 +23,13 @@ export const logNextSteps = ({
   }
 
   if (packages?.prisma.inUse) {
-    logger.info(
-      `  ${pkgManager === "npm" ? "npx" : pkgManager} prisma db push`,
-    );
+    logger.info(`  ${pkgManager === "npm" ? "npm run" : pkgManager} db:push`);
   }
 
   logger.info(`  ${pkgManager === "npm" ? "npm run" : pkgManager} dev`);
+
+  logger.warn(
+    `\nThank you for trying out the new Drizzle option. If you encounter any issues, please open an issue!`,
+    `\nNote: We use the PlanetScale driver. If you want to use a different driver, you'll need to change it yourself.`,
+  );
 };

cli/src/installers/dependencyVersionMap.ts

@@ -11,6 +11,13 @@ export const dependencyVersionMap = {
   prisma: "^4.14.0",
   "@prisma/client": "^4.14.0",
 
+  // Drizzle
+  "drizzle-orm": "^0.26.3",
+  "drizzle-kit": "^0.18.1",
+  dotenv: "^16.1.4",
+  // REVIEW: Is it fine including pscale by default?
+  "@planetscale/database": "^1.7.0",
+
   // TailwindCSS
   tailwindcss: "^3.3.0",
   autoprefixer: "^10.4.14",

cli/src/installers/drizzle.ts

@@ -0,0 +1,52 @@
+import fs from "fs-extra";
+import path from "path";
+import { type PackageJson } from "type-fest";
+import { PKG_ROOT } from "~/consts.js";
+import { type Installer } from "~/installers/index.js";
+import { addPackageDependency } from "~/utils/addPackageDependency.js";
+
+export const drizzleInstaller: Installer = ({ projectDir, packages }) => {
+  addPackageDependency({
+    projectDir,
+    dependencies: ["drizzle-kit", "dotenv"],
+    devMode: true,
+  });
+  addPackageDependency({
+    projectDir,
+    dependencies: ["drizzle-orm", "@planetscale/database"],
+    devMode: false,
+  });
+
+  const extrasDir = path.join(PKG_ROOT, "template/extras");
+
+  const configFile = path.join(extrasDir, "config/drizzle.config.ts");
+  const configDest = path.join(projectDir, "drizzle.config.ts");
+
+  const schemaSrc = path.join(
+    extrasDir,
+    "src/server/db",
+    packages?.nextAuth.inUse
+      ? "drizzle-schema-auth.ts"
+      : "drizzle-schema-base.ts",
+  );
+  const schemaDest = path.join(projectDir, "src/server/db/schema.ts");
+
+  const clientSrc = path.join(extrasDir, "src/server/db/index-drizzle.ts");
+  const clientDest = path.join(projectDir, "src/server/db/index.ts");
+
+  // add db:push script to package.json
+  const packageJsonPath = path.join(projectDir, "package.json");
+
+  const packageJsonContent = fs.readJSONSync(packageJsonPath) as PackageJson;
+  packageJsonContent.scripts = {
+    ...packageJsonContent.scripts,
+    "db:push": "drizzle-kit push:mysql",
+  };
+
+  fs.copySync(configFile, configDest);
+  fs.copySync(schemaSrc, schemaDest);
+  fs.copySync(clientSrc, clientDest);
+  fs.writeJSONSync(packageJsonPath, packageJsonContent, {
+    spaces: 2,
+  });
+};

cli/src/installers/envVars.ts

@@ -6,16 +6,17 @@ import { type Installer } from "~/installers/index.js";
 export const envVariablesInstaller: Installer = ({ projectDir, packages }) => {
   const usingAuth = packages?.nextAuth.inUse;
   const usingPrisma = packages?.prisma.inUse;
+  const usingDrizzle = packages?.drizzle.inUse;
 
-  const envContent = getEnvContent(!!usingAuth, !!usingPrisma);
+  const envContent = getEnvContent(!!usingAuth, !!usingPrisma, !!usingDrizzle);
 
   const envFile =
     usingAuth && usingPrisma
       ? "with-auth-prisma.mjs"
       : usingAuth
       ? "with-auth.mjs"
-      : usingPrisma
-      ? "with-prisma.mjs"
+      : usingPrisma || usingDrizzle
+      ? "with-db.mjs"
       : "";
 
   if (envFile !== "") {
@@ -35,7 +36,11 @@ export const envVariablesInstaller: Installer = ({ projectDir, packages }) => {
   fs.writeFileSync(envExampleDest, exampleEnvContent + envContent, "utf-8");
 };
 
-const getEnvContent = (usingAuth: boolean, usingPrisma: boolean) => {
+const getEnvContent = (
+  usingAuth: boolean,
+  usingPrisma: boolean,
+  usingDrizzle: boolean,
+) => {
   let content = `
 # When adding additional environment variables, the schema in "/src/env.mjs"
 # should be updated accordingly.
@@ -50,6 +55,15 @@ const getEnvContent = (usingAuth: boolean, usingPrisma: boolean) => {
 DATABASE_URL="file:./db.sqlite"
 `;
 
+  if (usingDrizzle) {
+    content += `
+# Drizzle
+# Get the Database URL from the "prisma" dropdown selector in PlanetScale. 
+# Change the query params at the end of the URL to "?ssl={"rejectUnauthorized":true}"
+DATABASE_URL='mysql://YOUR_MYSQL_URL_HERE?ssl={"rejectUnauthorized":true}'
+`;
+  }
+
   if (usingAuth)
     content += `
 # Next Auth

cli/src/installers/index.ts

@@ -1,3 +1,4 @@
+import { drizzleInstaller } from "./drizzle.js";
 import { envVariablesInstaller } from "~/installers/envVars.js";
 import { nextAuthInstaller } from "~/installers/nextAuth.js";
 import { prismaInstaller } from "~/installers/prisma.js";
@@ -10,6 +11,7 @@ import { type PackageManager } from "~/utils/getUserPkgManager.js";
 export const availablePackages = [
   "nextAuth",
   "prisma",
+  "drizzle",
   "tailwind",
   "trpc",
   "envVariables",
@@ -44,6 +46,10 @@ export const buildPkgInstallerMap = (
     inUse: packages.includes("prisma"),
     installer: prismaInstaller,
   },
+  drizzle: {
+    inUse: packages.includes("drizzle"),
+    installer: drizzleInstaller,
+  },
   tailwind: {
     inUse: packages.includes("tailwind"),
     installer: tailwindInstaller,

cli/src/installers/nextAuth.ts

@@ -7,8 +7,12 @@ import { addPackageDependency } from "~/utils/addPackageDependency.js";
 
 export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
   const usingPrisma = packages?.prisma.inUse;
+  const usingDrizzle = packages?.drizzle.inUse;
+
   const deps: AvailableDependencies[] = ["next-auth"];
   if (usingPrisma) deps.push("@next-auth/prisma-adapter");
+  // This adapter is not yet available on npm so we have our own inhoused
+  // if (usingDrizzle) deps.push("@next-auth/drizzle-adapter");
 
   addPackageDependency({
     projectDir,
@@ -25,7 +29,11 @@ export const nextAuthInstaller: Installer = ({ projectDir, packages }) => {
   const authConfigSrc = path.join(
     extrasDir,
     "src/server/auth",
-    usingPrisma ? "with-prisma.ts" : "base.ts",
+    usingPrisma
+      ? "with-prisma.ts"
+      : usingDrizzle
+      ? "with-drizzle.ts"
+      : "base.ts",
   );
   const authConfigDest = path.join(projectDir, "src/server/auth.ts");
 

cli/src/installers/prisma.ts

@@ -26,16 +26,17 @@ export const prismaInstaller: Installer = ({ projectDir, packages }) => {
   );
   const schemaDest = path.join(projectDir, "prisma/schema.prisma");
 
-  const clientSrc = path.join(extrasDir, "src/server/db.ts");
+  const clientSrc = path.join(extrasDir, "src/server/db/db-prisma.ts");
   const clientDest = path.join(projectDir, "src/server/db.ts");
 
-  // add postinstall script to package.json
+  // add postinstall and push script to package.json
   const packageJsonPath = path.join(projectDir, "package.json");
 
   const packageJsonContent = fs.readJSONSync(packageJsonPath) as PackageJson;
   packageJsonContent.scripts = {
     ...packageJsonContent.scripts,
     postinstall: "prisma generate",
+    "db:push": "prisma db push",
   };
 
   fs.copySync(schemaSrc, schemaDest);

cli/src/installers/trpc.ts

@@ -20,6 +20,8 @@ export const trpcInstaller: Installer = ({ projectDir, packages }) => {
 
   const usingAuth = packages?.nextAuth.inUse;
   const usingPrisma = packages?.prisma.inUse;
+  const usingDrizzle = packages?.drizzle.inUse;
+  const usingDb = usingPrisma || usingDrizzle;
 
   const extrasDir = path.join(PKG_ROOT, "template/extras");
 
@@ -30,12 +32,12 @@ export const trpcInstaller: Installer = ({ projectDir, packages }) => {
   const utilsDest = path.join(projectDir, "src/utils/api.ts");
 
   const trpcFile =
-    usingAuth && usingPrisma
-      ? "with-auth-prisma.ts"
+    usingAuth && usingDb
+      ? "with-auth-db.ts"
       : usingAuth
       ? "with-auth.ts"
-      : usingPrisma
-      ? "with-prisma.ts"
+      : usingDb
+      ? "with-db.ts"
       : "base.ts";
   const trpcSrc = path.join(extrasDir, "src/server/api/trpc", trpcFile);
   const trpcDest = path.join(projectDir, "src/server/api/trpc.ts");
@@ -46,10 +48,14 @@ export const trpcInstaller: Installer = ({ projectDir, packages }) => {
   const exampleRouterFile =
     usingAuth && usingPrisma
       ? "with-auth-prisma.ts"
+      : usingAuth && usingDrizzle
+      ? "with-auth-drizzle.ts"
       : usingAuth
       ? "with-auth.ts"
       : usingPrisma
       ? "with-prisma.ts"
+      : usingDrizzle
+      ? "with-drizzle.ts"
       : "base.ts";
 
   const exampleRouterSrc = path.join(

cli/template/extras/config/drizzle.config.ts

@@ -0,0 +1,8 @@
+import { type Config } from "drizzle-kit";
+import * as dotenv from "dotenv";
+dotenv.config();
+
+export default {
+  schema: "./src/server/db/schema.ts",
+  connectionString: process.env.DATABASE_URL,
+} satisfies Config;