Simplified setup flow: user installs node.js; pnpm is configured

2025-04-17 23:05:44 -07:00
parent ffdf3e1c4b
commit f2b157b8bc
6 changed files with 190 additions and 289 deletions
--- a/src/components/SetupBanner.tsx
+++ b/src/components/SetupBanner.tsx
@@ -20,29 +20,26 @@ import {
 } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { showError } from "@/lib/toast";
-
+import { NodeSystemInfo } from "@/ipc/ipc_types";
 export function SetupBanner() {
  const navigate = useNavigate();
-  const { isAnyProviderSetup } = useSettings();
-  const [nodeVersion, setNodeVersion] = useState<string | null>(null);
-  const [pnpmVersion, setPnpmVersion] = useState<string | null>(null);
+  const { isAnyProviderSetup, loading } = useSettings();
+  const [nodeSystemInfo, setNodeSystemInfo] = useState<NodeSystemInfo | null>(
+    null
+  );
  const [nodeCheckError, setNodeCheckError] = useState<boolean>(false);
-  const [nodeInstallError, setNodeInstallError] = useState<string | null>(null);
  const [nodeInstallLoading, setNodeInstallLoading] = useState<boolean>(false);
  const checkNode = useCallback(async () => {
    try {
      setNodeCheckError(false);
      const status = await IpcClient.getInstance().getNodejsStatus();
-      setNodeVersion(status.nodeVersion);
-      setPnpmVersion(status.pnpmVersion);
+      setNodeSystemInfo(status);
    } catch (error) {
      console.error("Failed to check Node.js status:", error);
-      setNodeVersion(null);
-      setPnpmVersion(null);
+      setNodeSystemInfo(null);
      setNodeCheckError(true);
    }
-  }, [setNodeVersion, setNodeCheckError]);
+  }, [setNodeSystemInfo, setNodeCheckError]);

  useEffect(() => {
    checkNode();
@@ -57,39 +54,35 @@ export function SetupBanner() {

  const handleNodeInstallClick = async () => {
    setNodeInstallLoading(true);
-    try {
-      const result = await IpcClient.getInstance().installNode();
-      if (!result.success) {
-        showError(result.errorMessage);
-        setNodeInstallError(result.errorMessage || "Unknown error");
-      } else {
-        setNodeVersion(result.nodeVersion);
-        setPnpmVersion(result.pnpmVersion);
-      }
-    } catch (error) {
-      showError("Failed to install Node.js. " + (error as Error).message);
-      setNodeInstallError(
-        "Failed to install Node.js. " + (error as Error).message
-      );
-    } finally {
-      setNodeInstallLoading(false);
-    }
+    IpcClient.getInstance().openExternalUrl(nodeSystemInfo!.nodeDownloadUrl);
  };

-  const isNodeSetupComplete = !!nodeVersion && !!pnpmVersion;
-  const isAiProviderSetup = isAnyProviderSetup();
+  const finishNodeInstallAndRestart = () => {
+    IpcClient.getInstance().reloadDyad();
+  };
+
+  const isNodeSetupComplete = Boolean(
+    nodeSystemInfo?.nodeVersion && nodeSystemInfo?.pnpmVersion
+  );

  const itemsNeedAction: string[] = [];
-  if (!isNodeSetupComplete) itemsNeedAction.push("node-setup");
-  if (isNodeSetupComplete && !isAiProviderSetup)
+  if (!isNodeSetupComplete && nodeSystemInfo) {
+    itemsNeedAction.push("node-setup");
+  }
+  if (!isAnyProviderSetup() && !loading) {
    itemsNeedAction.push("ai-setup");
+  }

  if (itemsNeedAction.length === 0) {
-    return null;
+    return (
+      <h1 className="text-6xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 tracking-tight">
+        Build your dream app
+      </h1>
+    );
  }

  const bannerClasses = cn(
-    "w-full mb-8 border rounded-xl shadow-sm overflow-hidden",
+    "w-full mb-6 border rounded-xl shadow-sm overflow-hidden",
    "border-zinc-200 dark:border-zinc-700"
  );

@@ -105,6 +98,10 @@ export function SetupBanner() {
  };

  return (
+    <>
+      <p className="text-xl text-zinc-700 dark:text-zinc-300 p-4">
+        Follow these steps and you'll be ready to start building with Dyad...
+      </p>
      <div className={bannerClasses}>
        <Accordion
          type="multiple"
@@ -126,45 +123,42 @@ export function SetupBanner() {
                <div className="flex items-center gap-3">
                  {getStatusIcon(isNodeSetupComplete, nodeCheckError)}
                  <span className="font-medium text-sm">
-                  1. Check Node.js Runtime
+                    1. Install Node.js
                  </span>
                </div>
              </div>
            </AccordionTrigger>
            <AccordionContent className="px-4 pt-2 pb-4 bg-white dark:bg-zinc-900 border-t border-inherit">
-            {nodeInstallError && (
+              {nodeCheckError && (
                <p className="text-sm text-red-600 dark:text-red-400">
-                {nodeInstallError}
+                  Error checking Node.js status. Try installing Node.js.
                </p>
              )}
-            {nodeCheckError ? (
-              <p className="text-sm text-red-600 dark:text-red-400">
-                Error checking Node.js status. Please ensure node.js are
-                installed correctly and accessible in your system's PATH.
+              {isNodeSetupComplete ? (
+                <p className="text-sm">
+                  Node.js ({nodeSystemInfo!.nodeVersion}) installed.{" "}
+                  {nodeSystemInfo!.pnpmVersion && (
+                    <span className="text-xs text-gray-500">
+                      pnpm ({nodeSystemInfo!.pnpmVersion}) installed.
+                    </span>
+                  )}
                </p>
-            ) : isNodeSetupComplete ? (
-              <p className="text-sm">Node.js ({nodeVersion}) installed.</p>
              ) : (
-              <div>
-                <p className="text-sm mb-3">
-                  Node.js is required to run apps locally. We also use pnpm as
-                  our package manager as it's faster and more efficient than
-                  npm.
+                <div className="text-sm">
+                  <p>Node.js is required to run apps locally.</p>
+                  <p className="mb-3">
+                    After you have installed node.js, click "Finish setup" to
+                    restart Dyad.
                  </p>
-                <Button
-                  size="sm"
-                  onClick={handleNodeInstallClick}
-                  disabled={nodeInstallLoading}
-                >
                  {nodeInstallLoading ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Installing...
-                    </>
-                  ) : (
-                    "Install Node.js Runtime"
-                  )}
+                    <Button onClick={finishNodeInstallAndRestart}>
+                      Finish setup and restart Dyad
                    </Button>
+                  ) : (
+                    <Button onClick={handleNodeInstallClick}>
+                      Install Node.js Runtime
+                    </Button>
+                  )}
                </div>
              )}
            </AccordionContent>
@@ -172,24 +166,20 @@ export function SetupBanner() {

          <AccordionItem
            value="ai-setup"
-          disabled={!isNodeSetupComplete}
            className={cn(
-            isAiProviderSetup
+              isAnyProviderSetup()
                ? "bg-green-50 dark:bg-green-900/30"
-              : "bg-yellow-50 dark:bg-yellow-900/30",
-            !isNodeSetupComplete ? "opacity-60" : ""
+                : "bg-yellow-50 dark:bg-yellow-900/30"
            )}
          >
            <AccordionTrigger
              className={cn(
-              "px-4 py-3 transition-colors w-full hover:no-underline",
-              !isNodeSetupComplete ? "cursor-not-allowed" : ""
+                "px-4 py-3 transition-colors w-full hover:no-underline"
              )}
-            onClick={(e) => !isNodeSetupComplete && e.preventDefault()}
            >
              <div className="flex items-center justify-between w-full">
                <div className="flex items-center gap-3">
-                {getStatusIcon(isAiProviderSetup)}
+                  {getStatusIcon(isAnyProviderSetup())}
                  <span className="font-medium text-sm">
                    2. Setup AI Model Access
                  </span>
@@ -206,7 +196,9 @@ export function SetupBanner() {
                role="button"
                tabIndex={isNodeSetupComplete ? 0 : -1}
                onKeyDown={(e) =>
-                isNodeSetupComplete && e.key === "Enter" && handleAiSetupClick()
+                  isNodeSetupComplete &&
+                  e.key === "Enter" &&
+                  handleAiSetupClick()
                }
              >
                <div className="flex items-center justify-between gap-3">
@@ -231,5 +223,6 @@ export function SetupBanner() {
          </AccordionItem>
        </Accordion>
      </div>
+    </>
  );
 }
--- a/src/ipc/handlers/node_handlers.ts
+++ b/src/ipc/handlers/node_handlers.ts
@@ -1,58 +1,12 @@
-import { ipcMain } from "electron";
+import { ipcMain, app } from "electron";
 import { spawn } from "child_process";
-import { platform } from "os";
-import { InstallNodeResult } from "../ipc_types";
-type ShellResult =
-  | {
-      success: true;
-      output: string;
-    }
-  | {
-      success: false;
-      errorMessage: string;
-    };
-
-function runShell(command: string): Promise<ShellResult> {
-  return new Promise((resolve) => {
-    let stdout = "";
-    let stderr = "";
-    const process = spawn(command, {
-      shell: true,
-      stdio: ["ignore", "pipe", "pipe"], // ignore stdin, pipe stdout/stderr
-    });
-
-    process.stdout?.on("data", (data) => {
-      stdout += data.toString();
-    });
-
-    process.stderr?.on("data", (data) => {
-      stderr += data.toString();
-    });
-
-    process.on("error", (error) => {
-      console.error(`Error executing command "${command}":`, error.message);
-      resolve({ success: false, errorMessage: error.message });
-    });
-
-    process.on("close", (code) => {
-      if (code === 0) {
-        resolve({ success: true, output: stdout.trim() });
-      } else {
-        const errorMessage =
-          stderr.trim() || `Command failed with code ${code}`;
-        console.error(
-          `Command "${command}" failed with code ${code}: ${stderr.trim()}`
-        );
-        resolve({ success: false, errorMessage });
-      }
-    });
-  });
-}
+import { platform, arch } from "os";
+import { NodeSystemInfo } from "../ipc_types";

 function checkCommandExists(command: string): Promise<string | null> {
  return new Promise((resolve) => {
    let output = "";
-    const process = spawn(command, ["--version"], {
+    const process = spawn(command, {
      shell: true,
      stdio: ["ignore", "pipe", "pipe"], // ignore stdin, pipe stdout/stderr
    });
@@ -87,64 +41,35 @@ function checkCommandExists(command: string): Promise<string | null> {
 }

 export function registerNodeHandlers() {
-  ipcMain.handle(
-    "nodejs-status",
-    async (): Promise<{
-      nodeVersion: string | null;
-      pnpmVersion: string | null;
-    }> => {
+  ipcMain.handle("nodejs-status", async (): Promise<NodeSystemInfo> => {
    // Run checks in parallel
    const [nodeVersion, pnpmVersion] = await Promise.all([
-        checkCommandExists("node"),
-        checkCommandExists("pnpm"),
+      checkCommandExists("node --version"),
+      // First, check if pnpm is installed.
+      // If not, try to install it using corepack.
+      // If both fail, then pnpm is not available.
+      checkCommandExists(
+        "pnpm --version || corepack enable pnpm && pnpm --version"
+      ),
    ]);
-      return { nodeVersion, pnpmVersion };
-    }
-  );
-
-  ipcMain.handle("install-node", async (): Promise<InstallNodeResult> => {
-    console.log("Installing Node.js...");
-    if (platform() === "win32") {
-      let result = await runShell("winget install Volta.Volta");
-      if (!result.success) {
-        return { success: false, errorMessage: result.errorMessage };
-      }
+    // Default to mac download url.
+    let nodeDownloadUrl = "https://nodejs.org/dist/v22.14.0/node-v22.14.0.pkg";
+    if (platform() == "win32") {
+      if (arch() === "arm64" || arch() === "arm") {
+        nodeDownloadUrl =
+          "https://nodejs.org/dist/v22.14.0/node-v22.14.0-arm64.msi";
      } else {
-      let result = await runShell("curl https://get.volta.sh | bash");
-      if (!result.success) {
-        return { success: false, errorMessage: result.errorMessage };
+        // x64 is the most common architecture for Windows so it's the
+        // default download url.
+        nodeDownloadUrl =
+          "https://nodejs.org/dist/v22.14.0/node-v22.14.0-x64.msi";
      }
    }
-    console.log("Installed Volta");
+    return { nodeVersion, pnpmVersion, nodeDownloadUrl };
+  });

-    process.env.PATH = ["~/.volta/bin", process.env.PATH].join(":");
-    console.log("Updated PATH");
-    let result = await runShell("volta install node");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    console.log("Installed Node.js (via Volta)");
-
-    result = await runShell("node --version");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    const nodeVersion = result.output.trim();
-    console.log("Node.js is setup with version", nodeVersion);
-
-    result = await runShell("corepack enable pnpm");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    console.log("Enabled pnpm");
-
-    result = await runShell("pnpm --version");
-    if (!result.success) {
-      return { success: false, errorMessage: result.errorMessage };
-    }
-    const pnpmVersion = result.output.trim();
-    console.log("pnpm is setup with version", pnpmVersion);
-
-    return { success: true, nodeVersion, pnpmVersion };
+  ipcMain.handle("reload-dyad", async (): Promise<void> => {
+    app.relaunch();
+    app.exit(0);
  });
 }
--- a/src/ipc/ipc_client.ts
+++ b/src/ipc/ipc_client.ts
@@ -15,6 +15,7 @@ import type {
  CreateAppResult,
  InstallNodeResult,
  ListAppsResponse,
+  NodeSystemInfo,
  SandboxConfig,
  Version,
 } from "./ipc_types";
@@ -132,6 +133,10 @@ export class IpcClient {
    return IpcClient.instance;
  }

+  public async reloadDyad(): Promise<void> {
+    await this.ipcRenderer.invoke("reload-dyad");
+  }
+
  // Create a new app with an initial chat
  public async createApp(params: CreateAppParams): Promise<CreateAppResult> {
    try {
@@ -493,10 +498,7 @@ export class IpcClient {
  }

  // Check Node.js and npm status
-  public async getNodejsStatus(): Promise<{
-    nodeVersion: string | null;
-    pnpmVersion: string | null;
-  }> {
+  public async getNodejsStatus(): Promise<NodeSystemInfo> {
    try {
      const result = await this.ipcRenderer.invoke("nodejs-status");
      return result;
@@ -506,17 +508,6 @@ export class IpcClient {
    }
  }

-  // Install Node.js and npm
-  public async installNode(): Promise<InstallNodeResult> {
-    try {
-      const result = await this.ipcRenderer.invoke("install-node");
-      return result;
-    } catch (error) {
-      showError(error);
-      throw error;
-    }
-  }
-
  // --- GitHub Device Flow ---
  public startGithubDeviceFlow(appId: number | null): void {
    this.ipcRenderer.invoke("github:start-flow", { appId });
--- a/src/ipc/ipc_types.ts
+++ b/src/ipc/ipc_types.ts
@@ -66,13 +66,8 @@ export interface SandboxConfig {
  entry: string;
 }

-export type InstallNodeResult =
-  | {
-      success: true;
-      nodeVersion: string;
-      pnpmVersion: string;
+export interface NodeSystemInfo {
+  nodeVersion: string | null;
+  pnpmVersion: string | null;
+  nodeDownloadUrl: string;
 }
-  | {
-      success: false;
-      errorMessage: string;
-    };
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -84,10 +84,6 @@ export default function HomePage() {
  // Main Home Page Content
  return (
    <div className="flex flex-col items-center justify-center max-w-3xl m-auto p-8">
-      <h1 className="text-6xl font-bold mb-12 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 tracking-tight">
-        Build your dream app
-      </h1>
-
      <SetupBanner />

      <div className="w-full">
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -37,6 +37,7 @@ const validInvokeChannels = [
  "github:create-repo",
  "github:push",
  "get-app-version",
+  "reload-dyad",
 ] as const;

 // Add valid receive channels