refactor(migration):install drizzle-kit in user app instead of bundling (#3280)

forge.config.ts

@@ -40,9 +40,6 @@ const ignore = (file: string) => {
   if (file.startsWith("/node_modules/html-to-image")) {
     return false;
   }
-  if (file.startsWith("/node_modules/drizzle-kit")) {
-    return false;
-  }
   if (file.startsWith("/node_modules/better-sqlite3")) {
     return false;
   }
@@ -124,12 +121,7 @@ const config: ForgeConfig = {
       unpackDir: "node_modules/node-pty",
     },
     ignore,
-    extraResource: [
-      "node_modules/dugite/git",
-      "node_modules/@vscode",
-      "node_modules/drizzle-kit",
-      "node_modules/drizzle-orm",
-    ],
+    extraResource: ["node_modules/dugite/git", "node_modules/@vscode"],
     // ignore: [/node_modules\/(?!(better-sqlite3|bindings|file-uri-to-path)\/)/],
   },
   rebuildConfig: {

src/components/MigrationPanel.tsx

-import { useEffect, useId, useState } from "react";
-import { useMutation } from "@tanstack/react-query";
+import { useEffect, useId, useRef, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ipc } from "@/ipc/types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -10,6 +10,7 @@ import {
   XCircle,
   ChevronDown,
   AlertTriangle,
+  Info,
 } from "lucide-react";
 import {
   AlertDialog,
@@ -26,6 +27,7 @@ import { useTranslation } from "react-i18next";
 import { getErrorMessage } from "@/lib/errors";
 import { useLoadApp } from "@/hooks/useLoadApp";
 import { useNeon } from "@/hooks/useNeon";
+import { queryKeys } from "@/lib/queryKeys";
 
 interface MigrationPanelProps {
   appId: number;
@@ -37,8 +39,28 @@ export const MigrationPanel = ({ appId }: MigrationPanelProps) => {
   const { projectInfo, branches } = useNeon(appId);
   const [showErrorDetails, setShowErrorDetails] = useState(false);
   const errorDetailsId = useId();
+  const queryClient = useQueryClient();
+
+  const dependenciesStatus = useQuery({
+    queryKey: queryKeys.migration.dependenciesStatus({ appId }),
+    queryFn: () => ipc.migration.dependenciesStatus({ appId }),
+    staleTime: 0,
+    refetchOnMount: "always",
+  });
+  const depsInstalled = dependenciesStatus.data?.installed;
+  // Capture the install state at click time so the in-flight label doesn't
+  // flicker if the status query refetches mid-mutation.
+  const installingDepsRef = useRef(false);
+
+  const invalidateDepsStatus = () =>
+    queryClient.invalidateQueries({
+      queryKey: queryKeys.migration.dependenciesStatus({ appId }),
+    });
+
   const pushMutation = useMutation({
     mutationFn: () => ipc.migration.push({ appId }),
+    onSuccess: invalidateDepsStatus,
+    onError: invalidateDepsStatus,
   });
 
   const productionBranch = branches.find(
@@ -110,6 +132,16 @@ export const MigrationPanel = ({ appId }: MigrationPanelProps) => {
           <span>{t("integrations.migration.backupWarning")}</span>
         </div>
 
+        {depsInstalled === false && !pushMutation.isPending && (
+          <div
+            role="note"
+            className="flex items-start gap-2 text-sm text-blue-800 dark:text-blue-200 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3"
+          >
+            <Info className="w-4 h-4 flex-shrink-0 mt-0.5" />
+            <span>{t("integrations.migration.installDependenciesNote")}</span>
+          </div>
+        )}
+
         <AlertDialog>
           <AlertDialogTrigger
             disabled={pushMutation.isPending || isProductionBranchActive}
@@ -122,7 +154,9 @@ export const MigrationPanel = ({ appId }: MigrationPanelProps) => {
             {pushMutation.isPending ? (
               <>
                 <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                {t("integrations.migration.migrating")}
+                {installingDepsRef.current
+                  ? t("integrations.migration.installingDependencies")
+                  : t("integrations.migration.migrating")}
               </>
             ) : (
               <>
@@ -147,6 +181,7 @@ export const MigrationPanel = ({ appId }: MigrationPanelProps) => {
               <AlertDialogAction
                 onClick={() => {
                   setShowErrorDetails(false);
+                  installingDepsRef.current = depsInstalled === false;
                   pushMutation.mutate();
                 }}
               >

src/i18n/locales/en/home.json

@@ -638,6 +638,8 @@
       "descriptionWithBranches": "Copy the schema in {{projectName}} from {{sourceBranchName}} to {{targetBranchName}}.",
       "migrateToProduction": "Migrate to Production",
       "migrating": "Migrating...",
+      "installingDependencies": "Installing dependencies, then migrating...",
+      "installDependenciesNote": "First migration will install drizzle-kit and drizzle-orm. This may take a few minutes.",
       "success": "Migration applied successfully.",
       "errorMessage": "Migration couldn't be applied.",
       "showDetails": "Show details",

src/i18n/locales/pt-BR/home.json

@@ -635,6 +635,8 @@
       "descriptionWithBranches": "Copie o schema em {{projectName}} de {{sourceBranchName}} para {{targetBranchName}}.",
       "migrateToProduction": "Migrar para Produção",
       "migrating": "Migrando...",
+      "installingDependencies": "Instalando dependências e migrando...",
+      "installDependenciesNote": "A primeira migração instalará drizzle-kit e drizzle-orm. Isso pode levar alguns minutos.",
       "success": "Migração aplicada com sucesso.",
       "errorMessage": "Não foi possível aplicar a migração.",
       "showDetails": "Mostrar detalhes",

src/i18n/locales/zh-CN/home.json

@@ -635,6 +635,8 @@
       "descriptionWithBranches": "将 {{projectName}} 中 {{sourceBranchName}} 的 schema 复制到 {{targetBranchName}}。",
       "migrateToProduction": "迁移到生产环境",
       "migrating": "迁移中...",
+      "installingDependencies": "正在安装依赖并迁移...",
+      "installDependenciesNote": "首次迁移将安装 drizzle-kit 和 drizzle-orm，可能需要几分钟。",
       "success": "迁移已成功应用。",
       "errorMessage": "无法应用此次迁移。",
       "showDetails": "显示详情",

src/ipc/handlers/migration_handlers.ts

 import path from "node:path";
 import os from "node:os";
 import fs from "node:fs/promises";
+import { eq } from "drizzle-orm";
 import { createTypedHandler } from "./base";
 import { migrationContracts } from "../types/migration";
 import {
@@ -10,11 +11,17 @@ import {
 import { DyadError, DyadErrorKind } from "@/errors/dyad_error";
 import { getAppWithNeonBranch } from "../utils/neon_utils";
 import { IS_TEST_BUILD } from "../utils/test_utils";
+import { db } from "../../db";
+import { apps } from "../../db/schema";
+import { getDyadAppPath } from "../../paths/paths";
+import { gitAdd, gitCommit } from "../utils/git_utils";
 import {
   logger,
   getProductionBranchId,
   createTempDrizzleConfig,
   spawnDrizzleKit,
+  areMigrationDepsInstalled,
+  installMigrationDeps,
 } from "../utils/migration_utils";
 
 // =============================================================================
@@ -22,6 +29,32 @@ import {
 // =============================================================================
 
 export function registerMigrationHandlers() {
+  // -------------------------------------------------------------------------
+  // migration:dependencies-status
+  // -------------------------------------------------------------------------
+  createTypedHandler(
+    migrationContracts.dependenciesStatus,
+    async (_, params) => {
+      const { appId } = params;
+      if (IS_TEST_BUILD) {
+        return { installed: true };
+      }
+      const rows = await db
+        .select()
+        .from(apps)
+        .where(eq(apps.id, appId))
+        .limit(1);
+      if (rows.length === 0) {
+        throw new DyadError(
+          `App with ID ${appId} not found`,
+          DyadErrorKind.NotFound,
+        );
+      }
+      const appPath = getDyadAppPath(rows[0].path);
+      return { installed: await areMigrationDepsInstalled(appPath) };
+    },
+  );
+
   // -------------------------------------------------------------------------
   // migration:push
   // -------------------------------------------------------------------------
@@ -91,7 +124,39 @@ export function registerMigrationHandlers() {
       );
     }
 
-    // 5. Create temp directory with restricted permissions
+    // 5. Ensure drizzle-kit + drizzle-orm are installed in the user's app
+    const appPath = getDyadAppPath(appData.path);
+    if (!(await areMigrationDepsInstalled(appPath))) {
+      logger.info(
+        `Migration dependencies not installed in ${appPath}; installing now.`,
+      );
+      await installMigrationDeps(appPath);
+
+      try {
+        // Stage only the files modified by the dependency install so we don't
+        // sweep unrelated user changes into the commit.
+        await gitAdd({ path: appPath, filepath: "package.json" });
+        for (const lockfile of [
+          "package-lock.json",
+          "pnpm-lock.yaml",
+          "yarn.lock",
+        ]) {
+          await gitAdd({ path: appPath, filepath: lockfile }).catch(() => {});
+        }
+        await gitCommit({
+          path: appPath,
+          message: "[dyad] install drizzle-kit and drizzle-orm for migrations",
+        });
+        logger.info(`Committed migration dependency install in ${appPath}`);
+      } catch (err) {
+        logger.warn(
+          `Failed to commit migration dependency install. This may happen if the project is not in a git repository, or if there are no changes to commit.`,
+          err,
+        );
+      }
+    }
+
+    // 6. Create temp directory with restricted permissions
     const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), "dyad-migration-"));
 
     try {
@@ -109,6 +174,7 @@ export function registerMigrationHandlers() {
       const introspectResult = await spawnDrizzleKit({
         args: ["introspect", `--config=${introspectConfigPath}`],
         cwd: tmpDir,
+        appPath,
         connectionUri: devUri,
       });
 
@@ -156,6 +222,7 @@ export function registerMigrationHandlers() {
       const pushResult = await spawnDrizzleKit({
         args: ["push", "--force", `--config=${pushConfigPath}`],
         cwd: tmpDir,
+        appPath,
         connectionUri: prodUri,
       });
 

src/ipc/types/migration.ts

@@ -18,6 +18,22 @@ export const MigrationPushResponseSchema = z.object({
 
 export type MigrationPushResponse = z.infer<typeof MigrationPushResponseSchema>;
 
+export const MigrationDependenciesStatusParamsSchema = z.object({
+  appId: z.number(),
+});
+
+export type MigrationDependenciesStatusParams = z.infer<
+  typeof MigrationDependenciesStatusParamsSchema
+>;
+
+export const MigrationDependenciesStatusResponseSchema = z.object({
+  installed: z.boolean(),
+});
+
+export type MigrationDependenciesStatusResponse = z.infer<
+  typeof MigrationDependenciesStatusResponseSchema
+>;
+
 // =============================================================================
 // Migration Contracts
 // =============================================================================
@@ -28,6 +44,11 @@ export const migrationContracts = {
     input: MigrationPushParamsSchema,
     output: MigrationPushResponseSchema,
   }),
+  dependenciesStatus: defineContract({
+    channel: "migration:dependencies-status",
+    input: MigrationDependenciesStatusParamsSchema,
+    output: MigrationDependenciesStatusResponseSchema,
+  }),
 } as const;
 
 // =============================================================================

src/ipc/utils/migration_utils.ts

 import log from "electron-log";
-import { app, utilityProcess } from "electron";
+import { utilityProcess } from "electron";
 import path from "node:path";
 import fs from "node:fs/promises";
 import { getNeonClient } from "../../neon_admin/neon_management_client";
 import { DyadError, DyadErrorKind } from "@/errors/dyad_error";
 import { IS_TEST_BUILD } from "../utils/test_utils";
+import { readEffectiveSettings } from "@/main/settings";
+import {
+  ADD_DEPENDENCY_INSTALL_TIMEOUT_MS,
+  buildAddDependencyCommand,
+  CommandExecutionError,
+  detectPreferredPackageManager,
+  ensureSocketFirewallInstalled,
+  runCommand,
+} from "./socket_firewall";
 
 export const logger = log.scope("migration_handlers");
 
+const MIGRATION_DEPS = ["drizzle-kit", "drizzle-orm"] as const;
+
 /**
  * Finds the production (default) branch for a Neon project.
  */
@@ -36,18 +47,69 @@ export async function getProductionBranchId(
 }
 
 /**
- * Resolves the path to the drizzle-kit bin.cjs file.
+ * Resolves the path to the drizzle-kit bin.cjs inside the user's app.
  */
-export function getDrizzleKitPath(): string {
-  if (!app.isPackaged) {
-    return path.join(
-      app.getAppPath(),
-      "node_modules",
-      "drizzle-kit",
-      "bin.cjs",
+export function getDrizzleKitPath(appPath: string): string {
+  return path.join(appPath, "node_modules", "drizzle-kit", "bin.cjs");
+}
+
+export async function areMigrationDepsInstalled(
+  appPath: string,
+): Promise<boolean> {
+  try {
+    await fs.access(getDrizzleKitPath(appPath));
+    await fs.access(path.join(appPath, "node_modules", "drizzle-orm"));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function installMigrationDeps(appPath: string): Promise<void> {
+  if (IS_TEST_BUILD) {
+    return;
+  }
+
+  const settings = await readEffectiveSettings();
+  let useSocketFirewall = settings.blockUnsafeNpmPackages !== false;
+  if (useSocketFirewall) {
+    const sfw = await ensureSocketFirewallInstalled();
+    if (!sfw.available) {
+      useSocketFirewall = false;
+      if (sfw.warningMessage) {
+        logger.warn(sfw.warningMessage);
+      }
+    }
+  }
+
+  const packageManager = await detectPreferredPackageManager();
+  const command = buildAddDependencyCommand(
+    [...MIGRATION_DEPS],
+    packageManager,
+    useSocketFirewall,
+  );
+
+  logger.info(
+    `Installing migration deps in ${appPath}: ${command.command} ${command.args.join(" ")}`,
+  );
+
+  try {
+    await runCommand(command.command, command.args, {
+      cwd: appPath,
+      timeoutMs: ADD_DEPENDENCY_INSTALL_TIMEOUT_MS,
+    });
+  } catch (error) {
+    const detail =
+      error instanceof CommandExecutionError
+        ? error.stderr.trim() || error.stdout.trim() || error.message
+        : error instanceof Error
+          ? error.message
+          : String(error);
+    throw new DyadError(
+      `Failed to install migration dependencies: ${detail}`,
+      DyadErrorKind.External,
     );
   }
-  return path.join(process.resourcesPath, "drizzle-kit", "bin.cjs");
 }
 
 /**
@@ -88,11 +150,14 @@ export async function createTempDrizzleConfig({
 export async function spawnDrizzleKit({
   args,
   cwd,
+  appPath,
   connectionUri,
   timeoutMs = 120_000,
 }: {
   args: string[];
   cwd: string;
+  /** Path to the user's app — drizzle-kit and drizzle-orm resolve from here. */
+  appPath: string;
   /** Passed as DRIZZLE_DATABASE_URL env var so credentials never touch disk. */
   connectionUri: string;
   timeoutMs?: number;
@@ -126,15 +191,13 @@ export async function spawnDrizzleKit({
     );
   }
 
-  const drizzleKitBin = getDrizzleKitPath();
+  const drizzleKitBin = getDrizzleKitPath(appPath);
 
   // Create a node_modules symlink in the working directory so that generated
   // schema files can resolve drizzle-orm and other dependencies through
   // standard Node.js module resolution (walking up to find node_modules),
   // in addition to the NODE_PATH env var set below.
-  const nodeModulesPath = app.isPackaged
-    ? process.resourcesPath
-    : path.join(app.getAppPath(), "node_modules");
+  const nodeModulesPath = path.join(appPath, "node_modules");
   const symlinkTarget = path.join(cwd, "node_modules");
   try {
     await fs.symlink(nodeModulesPath, symlinkTarget, "junction");

src/lib/queryKeys.ts

@@ -308,6 +308,15 @@ export const queryKeys = {
     repos: ["github", "repos"] as const,
   },
 
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Migration
+  // ─────────────────────────────────────────────────────────────────────────────
+  migration: {
+    all: ["migration"] as const,
+    dependenciesStatus: ({ appId }: { appId: number }) =>
+      ["migration", "dependencies-status", appId] as const,
+  },
+
   // ─────────────────────────────────────────────────────────────────────────────
   // Neon
   // ─────────────────────────────────────────────────────────────────────────────
@@ -401,6 +410,7 @@ export type AppQueryKey =
   | QueryKeyOf<(typeof queryKeys.mcp)[keyof typeof queryKeys.mcp]>
   | QueryKeyOf<(typeof queryKeys.supabase)[keyof typeof queryKeys.supabase]>
   | QueryKeyOf<(typeof queryKeys.github)[keyof typeof queryKeys.github]>
+  | QueryKeyOf<(typeof queryKeys.migration)[keyof typeof queryKeys.migration]>
   | QueryKeyOf<(typeof queryKeys.neon)[keyof typeof queryKeys.neon]>
   | QueryKeyOf<(typeof queryKeys.appEnvVars)[keyof typeof queryKeys.appEnvVars]>
   | QueryKeyOf<(typeof queryKeys.media)[keyof typeof queryKeys.media]>;