npm install should always include sockets messages

packages/api/apps/app.mts

@@ -8,6 +8,7 @@ import { npmInstall } from '../exec.mjs';
 import { generateApp } from '../ai/generate.mjs';
 import { toValidPackageName } from '../apps/utils.mjs';
 import { parsePlan } from '../ai/plan-parser.mjs';
+import { wss as webSocketServer } from '../index.mjs';
 
 function toSecondsSinceEpoch(date: Date): number {
   return Math.floor(date.getTime() / 1000);
@@ -36,37 +37,15 @@ export async function createAppWithAi(data: CreateAppWithAiSchemaType): Promise<
   await createViteApp(app);
   // Note: we don't surface issues or retries and this is "running in the background".
   // In this case it works in our favor because we'll kickoff generation while it happens
-  npmInstall({
-    cwd: pathToApp(app.externalId),
-    stdout(data) {
-      console.log(data.toString('utf8'));
-    },
-    stderr(data) {
-      console.error(data.toString('utf8'));
-    },
-    onExit(code) {
-      console.log(`npm install exit code: ${code}`);
-    },
-  });
+  installAppDependencies(app);
 
   const files = await getFlatFilesForApp(app.externalId);
   const result = await generateApp(toValidPackageName(app.name), files, data.prompt);
   const plan = await parsePlan(result, app, data.prompt, randomid());
   await applyPlan(app, plan);
 
   // Run npm install again since we don't have a good way of parsing the plan to know if we should...
-  npmInstall({
-    cwd: pathToApp(app.externalId),
-    stdout(data) {
-      console.log(data.toString('utf8'));
-    },
-    stderr(data) {
-      console.error(data.toString('utf8'));
-    },
-    onExit(code) {
-      console.log(`npm install exit code: ${code}`);
-    },
-  });
+  installAppDependencies(app);
 
   return app;
 }
@@ -78,21 +57,7 @@ export async function createApp(data: CreateAppSchemaType): Promise<DBAppType> {
 
   await createViteApp(app);
 
-  // TODO: handle this better.
-  // This should be done somewhere else and surface issues or retries.
-  // Not awaiting here because it's "happening in the background".
-  npmInstall({
-    cwd: pathToApp(app.externalId),
-    stdout(data) {
-      console.log(data.toString('utf8'));
-    },
-    stderr(data) {
-      console.error(data.toString('utf8'));
-    },
-    onExit(code) {
-      console.log(`npm install exit code: ${code}`);
-    },
-  });
+  installAppDependencies(app);
 
   return app;
 }
@@ -120,3 +85,39 @@ export async function updateApp(id: string, attrs: { name: string }) {
     .returning();
   return updatedApp;
 }
+
+export async function installAppDependencies(app: DBAppType, packages?: Array<string>) {
+  webSocketServer.broadcast(`app:${app.externalId}`, 'deps:install:status', {
+    status: 'installing',
+  });
+
+  npmInstall({
+    args: [],
+    cwd: pathToApp(app.externalId),
+    packages,
+    stdout: (data) => {
+      webSocketServer.broadcast(`app:${app.externalId}`, 'deps:install:log', {
+        log: { type: 'stdout', data: data.toString('utf8') },
+      });
+    },
+    stderr: (data) => {
+      webSocketServer.broadcast(`app:${app.externalId}`, 'deps:install:log', {
+        log: { type: 'stderr', data: data.toString('utf8') },
+      });
+    },
+    onExit: (code) => {
+      console.log(`npm install exit code: ${code}`);
+
+      webSocketServer.broadcast(`app:${app.externalId}`, 'deps:install:status', {
+        status: code === 0 ? 'complete' : 'failed',
+        code,
+      });
+
+      if (code === 0) {
+        webSocketServer.broadcast(`app:${app.externalId}`, 'deps:status:response', {
+          nodeModulesExists: true,
+        });
+      }
+    },
+  });
+}

packages/api/server/channels/app.mts

@@ -20,9 +20,9 @@ import WebSocketServer, {
   type MessageContextType,
   type ConnectionContextType,
 } from '../ws-client.mjs';
-import { loadApp } from '../../apps/app.mjs';
+import { installAppDependencies, loadApp } from '../../apps/app.mjs';
 import { fileUpdated, pathToApp } from '../../apps/disk.mjs';
-import { vite, npmInstall } from '../../exec.mjs';
+import { vite } from '../../exec.mjs';
 import { directoryExists } from '../../fs-utils.mjs';
 
 const VITE_PORT_REGEX = /Local:.*http:\/\/localhost:([0-9]{1,4})/;
@@ -50,11 +50,16 @@ async function previewStart(
   const existingProcess = processMetadata.get(app.externalId);
 
   if (existingProcess) {
-    wss.broadcast(`app:${app.externalId}`, 'preview:status', {
-      status: 'running',
-      url: `http://localhost:${existingProcess.port}/`,
-    });
-    return;
+    if (existingProcess.port === null) {
+      existingProcess.process.kill('SIGTERM');
+      processMetadata.delete(app.externalId);
+    } else {
+      wss.broadcast(`app:${app.externalId}`, 'preview:status', {
+        status: 'running',
+        url: `http://localhost:${existingProcess.port}/`,
+      });
+      return;
+    }
   }
 
   wss.broadcast(`app:${app.externalId}`, 'preview:status', {
@@ -155,33 +160,7 @@ async function dependenciesInstall(
     return;
   }
 
-  npmInstall({
-    args: [],
-    cwd: pathToApp(app.externalId),
-    packages: payload.packages ?? undefined,
-    stdout: (data) => {
-      conn.reply(`app:${app.externalId}`, 'deps:install:log', {
-        log: { type: 'stdout', data: data.toString('utf8') },
-      });
-    },
-    stderr: (data) => {
-      conn.reply(`app:${app.externalId}`, 'deps:install:log', {
-        log: { type: 'stderr', data: data.toString('utf8') },
-      });
-    },
-    onExit: (code) => {
-      conn.reply(`app:${app.externalId}`, 'deps:install:status', {
-        status: code === 0 ? 'complete' : 'failed',
-        code,
-      });
-
-      if (code === 0) {
-        conn.reply(`app:${app.externalId}`, 'deps:status:response', {
-          nodeModulesExists: true,
-        });
-      }
-    },
-  });
+  installAppDependencies(app, payload.packages);
 }
 
 async function clearNodeModules(

packages/web/src/components/apps/package-install-toast.tsx

@@ -33,6 +33,8 @@ const PackageInstallToast: React.FunctionComponent = () => {
   useEffect(() => {
     if (nodeModulesExists === false && (status === 'idle' || status === 'complete')) {
       setShowToast(true);
+    } else if (nodeModulesExists === true) {
+      setShowToast(false);
     }
   }, [nodeModulesExists, status]);
 

packages/web/src/components/apps/use-package-json.tsx

@@ -52,6 +52,17 @@ export function PackageJsonProvider({ channel, children }: ProviderPropsType) {
     };
   }, [channel]);
 
+  useEffect(() => {
+    const callback = ({ status }: DepsInstallStatusPayloadType) => {
+      setStatus(status);
+    };
+    channel.on('deps:install:status', callback);
+
+    return () => {
+      channel.off('deps:install:status', callback);
+    };
+  }, [channel]);
+
   const npmInstall = useCallback(
     async (packages?: Array<string>) => {
       addLog(
@@ -74,7 +85,6 @@ export function PackageJsonProvider({ channel, children }: ProviderPropsType) {
         const statusCallback = ({ status, code }: DepsInstallStatusPayloadType) => {
           channel.off('deps:install:log', logCallback);
           channel.off('deps:install:status', statusCallback);
-          setStatus(status);
 
           addLog(
             'info',

packages/web/src/components/apps/use-preview.tsx

@@ -56,9 +56,10 @@ export function PreviewProvider({ channel, children }: ProviderPropsType) {
   }, [channel, addLog]);
 
   async function start() {
-    if (nodeModulesExists === false) {
-      await npmInstall();
-    }
+    // NOTE: only run this if status !== 'installing' maybe?
+    // if (nodeModulesExists === false) {
+    //   await npmInstall();
+    // }
     channel.push('preview:start', {});
   }