feat(e2e): switch long-running test apps from dev to build+serve

integration/models/application.ts

@@ -1,3 +1,4 @@
+import { execSync } from 'node:child_process';
 import * as path from 'node:path';
 
 import { parsePublishableKey } from '@clerk/shared/keys';
@@ -144,25 +145,82 @@ export const application = (
     get serveOutput() {
       return serveOutput;
     },
-    serve: async (opts: { port?: number; manualStart?: boolean } = {}) => {
+    serve: async (opts: { port?: number; manualStart?: boolean; detached?: boolean; serverUrl?: string } = {}) => {
       const log = logger.child({ prefix: 'serve' }).info;
       const port = opts.port || (await getPort());
-      // TODO: get serverUrl as in dev()
-      const serverUrl = `http://localhost:${port}`;
-      // If this is ever used as a background process, we need to make sure
-      // it's not using the log function. See the dev() method above
+      const getServerUrl = () => {
+        if (opts.serverUrl) {
+          return opts.serverUrl.includes(':') ? opts.serverUrl : `${opts.serverUrl}:${port}`;
+        }
+        return serverUrl || `http://localhost:${port}`;
+      };
+      const runtimeServerUrl = getServerUrl();
+      log(`Will try to serve app at ${runtimeServerUrl}`);
+
+      if (opts.manualStart) {
+        state.serverUrl = runtimeServerUrl;
+        return { port, serverUrl: runtimeServerUrl };
+      }
+
+      log(`Running serve command: "${scripts.serve}" with PORT=${port}, detached=${opts.detached}`);
       const proc = run(scripts.serve, {
         cwd: appDirPath,
         env: { PORT: port.toString() },
-        log: (msg: string) => {
-          serveOutput += `\n${msg}`;
-          log(msg);
-        },
+        detached: opts.detached,
+        stdout: opts.detached ? fs.openSync(stdoutFilePath, 'a') : undefined,
+        stderr: opts.detached ? fs.openSync(stderrFilePath, 'a') : undefined,
+        log: opts.detached
+          ? undefined
+          : (msg: string) => {
+              serveOutput += `\n${msg}`;
+              log(msg);
+            },
       });
+      log(`Serve process spawned: pid=${proc.pid}`);
+
+      if (opts.detached) {
+        // Give the process a moment to start, then check its state
+        await new Promise(res => setTimeout(res, 3000));
+        try {
+          const procExists = execSync(`kill -0 ${proc.pid} 2>&1 && echo "alive" || echo "dead"`, {
+            encoding: 'utf-8',
+          }).trim();
+          log(`Serve process ${proc.pid} status after 3s: ${procExists}`);
+          const ssOut = execSync(`ss -tlnp 2>&1 | head -20 || true`, { encoding: 'utf-8' });
+          log(`Listening ports:\n${ssOut}`);
+        } catch {
+          log('Could not check serve process status');
+        }
+
+        const shouldExit = () => {
+          if (proc.exitCode != null) {
+            log(`Serve process has exitCode=${proc.exitCode}`);
+            return true;
+          }
+          return false;
+        };
+        try {
+          await waitForServer(runtimeServerUrl, { log, maxAttempts: 120, shouldExit });
+        } catch (e) {
+          try {
+            const stdoutContent = await fs.readFile(stdoutFilePath, 'utf-8');
+            const stderrContent = await fs.readFile(stderrFilePath, 'utf-8');
+            log(`Serve stdout:\n${stdoutContent || '(empty)'}`);
+            log(`Serve stderr:\n${stderrContent || '(empty)'}`);
+          } catch {
+            log('Could not read serve log files');
+          }
+          log(`Serve process exitCode=${proc.exitCode}, killed=${proc.killed}, pid=${proc.pid}`);
+          throw e;
+        }
+      } else {
+        await waitForIdleProcess(proc);
+      }
+
+      log(`Server started at ${runtimeServerUrl}, pid: ${proc.pid}`);
       cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
-      await waitForIdleProcess(proc);
-      state.serverUrl = serverUrl;
-      return { port, serverUrl, pid: proc };
+      state.serverUrl = runtimeServerUrl;
+      return { port, serverUrl: runtimeServerUrl, pid: proc.pid };
     },
     stop: async () => {
       logger.info('Stopping...');

integration/models/longRunningApplication.ts

@@ -59,15 +59,18 @@ export const longRunningApplication = (params: LongRunningApplicationParams) =>
       // will be called by global.setup.ts and by the test runner
       // the first time this is called, the app starts and the state is persisted in the state file
       init: async () => {
+        const log = (msg: string) => console.log(`[${name}] ${msg}`);
+        log('Starting init...');
         try {
           const publishableKey = params.env.publicVariables.get('CLERK_PUBLISHABLE_KEY');
           const secretKey = params.env.privateVariables.get('CLERK_SECRET_KEY');
           const apiUrl = params.env.privateVariables.get('CLERK_API_URL');
           const { instanceType, frontendApi: frontendApiUrl } = parsePublishableKey(publishableKey);
 
           if (instanceType !== 'development') {
-            console.log('Clerk: skipping setup of testing tokens for non-development instance');
+            log('Skipping setup of testing tokens for non-development instance');
           } else {
+            log('Setting up testing tokens...');
             await clerkSetup({
               publishableKey,
               frontendApiUrl,
@@ -76,13 +79,16 @@ export const longRunningApplication = (params: LongRunningApplicationParams) =>
               apiUrl,
               dotenv: false,
             });
+            log('Testing tokens setup complete');
           }
         } catch (error) {
           console.error('Error setting up testing tokens:', error);
           throw error;
         }
         try {
+          log('Committing config...');
           app = await config.commit();
+          log(`Config committed, appDir: ${app.appDir}`);
         } catch (error) {
           console.error('Error committing config:', error);
           throw error;
@@ -94,16 +100,35 @@ export const longRunningApplication = (params: LongRunningApplicationParams) =>
           throw error;
         }
         try {
+          log('Running setup (pnpm install)...');
           await app.setup();
+          log('Setup complete');
         } catch (error) {
           console.error('Error during app setup:', error);
           throw error;
         }
         try {
-          const { port, serverUrl, pid } = await app.dev({ detached: true });
-          stateFile.addLongRunningApp({ port, serverUrl, pid, id, appDir: app.appDir, env: params.env.toJson() });
+          log('Building app...');
+          const buildTimeout = new Promise((_, reject) =>
+            setTimeout(() => reject(new Error(`Build timed out after 120s for ${name}`)), 120_000),
+          );
+          await Promise.race([app.build(), buildTimeout]);
+          log('Build complete');
         } catch (error) {
-          console.error('Error during app dev:', error);
+          console.error('Error during app build:', error);
+          throw error;
+        }
+        try {
+          log('Starting serve (detached)...');
+          const serveResult = await app.serve({ detached: true });
+          port = serveResult.port;
+          serverUrl = serveResult.serverUrl;
+          pid = serveResult.pid;
+          appDir = app.appDir;
+          log(`Serve complete: port=${port}, serverUrl=${serverUrl}, pid=${pid}`);
+          stateFile.addLongRunningApp({ port, serverUrl, pid, id, appDir, env: params.env.toJson() });
+        } catch (error) {
+          console.error('Error during app serve:', error);
           throw error;
         }
       },
@@ -126,9 +151,7 @@ export const longRunningApplication = (params: LongRunningApplicationParams) =>
       setup: () => Promise.resolve(),
       withEnv: () => Promise.resolve(),
       teardown: () => Promise.resolve(),
-      build: () => {
-        throw new Error('build for long running apps is not supported yet');
-      },
+      build: () => Promise.resolve(),
       get name() {
         return name;
       },

integration/templates/astro-hybrid/astro.config.mjs

@@ -1,9 +1,13 @@
 import { defineConfig } from 'astro/config';
+import node from '@astrojs/node';
 import clerk from '@clerk/astro';
 import react from '@astrojs/react';
 
 export default defineConfig({
   output: 'hybrid',
+  adapter: node({
+    mode: 'standalone',
+  }),
   integrations: [
     clerk({
       appearance: {
@@ -15,6 +19,6 @@ export default defineConfig({
     react(),
   ],
   server: {
-    port: Number(process.env.PORT),
+    port: process.env.PORT ? Number(process.env.PORT) : undefined,
   },
 });

integration/templates/astro-hybrid/package.json

@@ -4,14 +4,14 @@
   "type": "module",
   "scripts": {
     "astro": "astro",
-    "build": "astro check && astro build",
+    "build": "astro build",
     "dev": "astro dev",
     "preview": "astro preview --port $PORT",
     "start": "astro dev --port $PORT"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/node": "^9.4.2",
+    "@astrojs/node": "^8.0.0",
     "@astrojs/react": "^3.6.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",

integration/templates/astro-node/astro.config.mjs

@@ -22,6 +22,6 @@ export default defineConfig({
     tailwind(),
   ],
   server: {
-    port: Number(process.env.PORT),
+    port: process.env.PORT ? Number(process.env.PORT) : undefined,
   },
 });

integration/templates/astro-node/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "astro": "astro",
-    "build": "astro check && astro build",
+    "build": "astro build",
     "dev": "astro dev",
     "preview": "astro preview --port $PORT",
     "start": "astro dev --port $PORT"

integration/templates/react-router-node/vite.config.ts

@@ -10,6 +10,6 @@ export default defineConfig({
     }),
   ],
   server: {
-    port: Number(process.env.PORT),
+    port: process.env.PORT ? Number(process.env.PORT) : undefined,
   },
 });

integration/templates/react-vite/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "vite build",
     "dev": "vite --port $PORT --no-open",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview --port $PORT --no-open"

integration/templates/tanstack-react-start/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "vite build && tsc --noEmit",
+    "build": "vite build",
     "dev": "vite dev --port=$PORT",
     "start": "vite start --port=$PORT"
   },

integration/templates/vue-vite/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "vue-tsc -b && vite build",
+    "build": "vite build",
     "dev": "vite --port $PORT",
     "preview": "vite preview --port $PORT"
   },

integration/tests/global.setup.ts

@@ -5,7 +5,7 @@ import { appConfigs } from '../presets';
 import { fs, parseEnvOptions, startClerkJsHttpServer, startClerkUiHttpServer } from '../scripts';
 
 setup('start long running apps', async () => {
-  setup.setTimeout(90_000);
+  setup.setTimeout(300_000);
 
   await fs.ensureDir(constants.TMP_DIR);