Fix backend server startup and terminal integration in Fullstack/Backend modes

- Enhanced backend server startup to integrate with terminal output system
- Added frontend server auto-start for fullstack mode
- Improved terminal feedback when servers start
- Fixed issue where servers weren't visible in terminal tabs
- Ensured both backend and frontend terminals run in fullstack mode

Author: SFARPak

src/components/backend-chat/BackendChatInput.tsx

@@ -100,24 +100,32 @@ export function BackendChatInput({ chatId }: { chatId?: number }) {
     handlePaste,
   } = useAttachments();
 
-  // Auto-start backend server when entering backend mode
+  // Auto-start servers when entering backend or fullstack mode
   useEffect(() => {
-    const startBackendServer = async () => {
+    const startServers = async () => {
       if (!appId) return;
 
       try {
+        // Always start backend server for backend/fullstack modes
         logger.info(`Auto-starting backend server for app: ${appId}`);
         await IpcClient.getInstance().startBackendServer(appId);
         logger.info("Backend server started successfully");
+
+        // For fullstack mode, also start frontend server
+        if (settings?.selectedChatMode === "fullstack") {
+          logger.info(`Auto-starting frontend server for fullstack app: ${appId}`);
+          await IpcClient.getInstance().startFrontendServer(appId);
+          logger.info("Frontend server started successfully");
+        }
       } catch (error) {
-        logger.error("Failed to auto-start backend server:", error);
+        logger.error("Failed to auto-start servers:", error);
       }
     };
 
     // Small delay to ensure component is fully mounted
-    const timeoutId = setTimeout(startBackendServer, 1000);
+    const timeoutId = setTimeout(startServers, 1000);
     return () => clearTimeout(timeoutId);
-  }, [appId]);
+  }, [appId, settings?.selectedChatMode]);
 
   // Use the hook to fetch the proposal
   const {

src/ipc/handlers/chat_handlers.ts

@@ -215,9 +215,40 @@ export function registerChatHandlers() {
 
     if (framework) {
       logger.info(`Starting backend server for framework: ${framework}`);
-      await startBackendServer(backendPath, framework);
+      await startBackendServer(backendPath, framework, appId);
     } else {
       logger.warn("No recognized backend framework found");
     }
   });
+
+  handle("start-frontend-server", async (_, appId: number): Promise<void> => {
+    // Get the app's path
+    const app = await db.query.apps.findFirst({
+      where: eq(apps.id, appId),
+      columns: {
+        path: true,
+      },
+    });
+
+    if (!app) {
+      throw new Error("App not found");
+    }
+
+    const frontendPath = path.join(getDyadAppPath(app.path), "frontend");
+
+    // Check if frontend directory exists
+    if (!fs.existsSync(frontendPath)) {
+      logger.warn(`Frontend directory not found: ${frontendPath}`);
+      return;
+    }
+
+    // Check if package.json exists (frontend should have it)
+    if (!fs.existsSync(path.join(frontendPath, "package.json"))) {
+      logger.warn(`Frontend package.json not found: ${frontendPath}`);
+      return;
+    }
+
+    logger.info("Starting frontend development server");
+    await startFrontendServer(frontendPath, appId);
+  });
 }

src/ipc/handlers/createFromTemplate.ts

@@ -1227,6 +1227,8 @@ export async function setupBackendFramework(backendPath: string, framework: stri
     // Auto-start the backend server after dependency installation
     try {
       logger.info(`Auto-starting ${framework} backend server in ${backendPath}`);
+      // Note: appId is not available in this context, so terminal output won't be shown
+      // This is called during app creation, before the app is fully set up
       await startBackendServer(backendPath, framework);
     } catch (startError) {
       logger.warn(`Failed to auto-start ${framework} backend server:`, startError);
@@ -1711,7 +1713,7 @@ async function installDependenciesForFramework(projectPath: string, framework: s
   });
 }
 
-export async function startBackendServer(projectPath: string, framework: string) {
+export async function startBackendServer(projectPath: string, framework: string, appId?: number) {
   const startCommand = getStartCommandForFramework(framework);
 
   return new Promise<void>((resolve, reject) => {
@@ -1759,6 +1761,20 @@ export async function startBackendServer(projectPath: string, framework: string)
     setTimeout(() => {
       serverProcess.unref();
       logger.info(`${framework} server started in background`);
+
+      // If appId is provided, add startup message to backend terminal
+      if (appId) {
+        const { addTerminalOutput } = require('../handlers/terminal_handlers');
+        addTerminalOutput(appId, "backend", `🚀 Starting ${framework} server...`, "command");
+
+        // Add server output to terminal if any
+        if (serverOutput.trim()) {
+          addTerminalOutput(appId, "backend", serverOutput.trim(), "output");
+        }
+
+        addTerminalOutput(appId, "backend", `✅ ${framework} server started successfully (${startCommand})`, "success");
+      }
+
       resolve();
     }, 2000);
   });
@@ -1779,6 +1795,73 @@ function getInstallCommandForFramework(framework: string): string {
   }
 }
 
+export async function startFrontendServer(projectPath: string, appId?: number) {
+  const startCommand = "npm run dev";
+
+  return new Promise<void>((resolve, reject) => {
+    const { spawn } = require('child_process');
+    const serverProcess = spawn(startCommand, [], {
+      cwd: projectPath,
+      shell: true,
+      stdio: "pipe",
+      detached: true, // Allow the process to run independently
+    });
+
+    logger.info(`Starting frontend server with command: ${startCommand} in ${projectPath}`);
+
+    let serverOutput = "";
+    let serverError = "";
+
+    serverProcess.stdout?.on("data", (data: Buffer) => {
+      serverOutput += data.toString();
+      logger.info(`[frontend server] ${data.toString().trim()}`);
+    });
+
+    serverProcess.stderr?.on("data", (data: Buffer) => {
+      serverError += data.toString();
+      logger.info(`[frontend server] ${data.toString().trim()}`);
+    });
+
+    serverProcess.on("close", (code: number | null) => {
+      if (code === 0) {
+        logger.info("Successfully started frontend server");
+        resolve();
+      } else {
+        logger.warn(`Frontend server exited with code: ${code}. Error: ${serverError}`);
+        // Don't reject here - server might have started successfully and exited normally
+        resolve();
+      }
+    });
+
+    serverProcess.on("error", (err: Error) => {
+      logger.error("Failed to start frontend server:", err);
+      // Don't reject here - user can start server manually
+      resolve();
+    });
+
+    // Give the server a moment to start up, then unref to let it run in background
+    setTimeout(() => {
+      serverProcess.unref();
+      logger.info("Frontend server started in background");
+
+      // If appId is provided, add startup message to frontend terminal
+      if (appId) {
+        const { addTerminalOutput } = require('../handlers/terminal_handlers');
+        addTerminalOutput(appId, "frontend", `🚀 Starting frontend development server...`, "command");
+
+        // Add server output to terminal if any
+        if (serverOutput.trim()) {
+          addTerminalOutput(appId, "frontend", serverOutput.trim(), "output");
+        }
+
+        addTerminalOutput(appId, "frontend", `✅ Frontend server started successfully (npm run dev)`, "success");
+      }
+
+      resolve();
+    }, 3000); // Give more time for frontend server to start
+  });
+}
+
 function getStartCommandForFramework(framework: string): string {
   switch (framework) {
     case "nodejs":

src/ipc/ipc_client.ts

@@ -1219,6 +1219,11 @@ export class IpcClient {
     return this.ipcRenderer.invoke("start-backend-server", appId);
   }
 
+  // Start frontend server
+  public async startFrontendServer(appId: number): Promise<void> {
+    return this.ipcRenderer.invoke("start-frontend-server", appId);
+  }
+
   // Create missing folder (frontend or backend)
   public async createMissingFolder(params: { appId: number; folderType: "frontend" | "backend"; templateId?: string; backendFramework?: string }): Promise<void> {
     return this.ipcRenderer.invoke("create-missing-folder", params);