use vite preview

Author: birkskyum

packages/start-plugin-core/src/plugin.ts

@@ -375,28 +375,33 @@ export function TanStackStartVitePluginCore(
         },
       },
     },
-    // Nitro module plugin - runs prerendering after Nitro build
+    // Nitro module plugin - runs prerendering after Nitro build using vite preview
     {
       name: 'tanstack-start-core:nitro-prerender',
       nitro: {
         name: 'tanstack-start-prerender',
         setup(nitro: any) {
           nitro.hooks.hook('compiled', async () => {
-            const { startConfig } = getConfig()
+            const { startConfig, resolvedStartConfig } = getConfig()
             if (!startConfig.prerender?.enabled && !startConfig.spa?.enabled) {
               return
             }
 
-            const { postServerBuildForNitro } = await import(
-              './post-server-build'
-            )
+            // Write nitro.json before calling vite.preview() since Nitro's
+            // configurePreviewServer hook requires it to exist. The 'compiled'
+            // hook runs before Nitro writes the build info, so we need to
+            // write a minimal version ourselves.
+            const { writeNitroBuildInfo, postServerBuildForNitro } =
+              await import('./post-server-build')
+            await writeNitroBuildInfo({
+              outputDir: nitro.options.output.dir,
+              preset: nitro.options.preset,
+            })
+
             await postServerBuildForNitro({
               startConfig,
               outputDir: nitro.options.output.publicDir,
-              nitroServerPath: join(
-                nitro.options.output.serverDir,
-                'index.mjs',
-              ),
+              configFile: resolvedStartConfig.viteConfigFile,
             })
           })
         },

packages/start-plugin-core/src/post-server-build.ts

@@ -1,10 +1,42 @@
+import { promises as fsp } from 'node:fs'
+import path from 'pathe'
 import { HEADERS } from '@tanstack/start-server-core'
 import { buildSitemap } from './build-sitemap'
 import { VITE_ENVIRONMENT_NAMES } from './constants'
 import { prerender } from './prerender'
+import { createLogger } from './utils'
 import type { TanStackStartOutputConfig } from './schema'
 import type { ViteBuilder } from 'vite'
 
+/**
+ * Write a minimal nitro.json file for vite.preview() to work with Nitro's
+ * configurePreviewServer hook. This is needed because the 'compiled' hook
+ * runs before Nitro writes its build info.
+ */
+export async function writeNitroBuildInfo({
+  outputDir,
+  preset,
+}: {
+  outputDir: string
+  preset: string
+}) {
+  const logger = createLogger('prerender')
+  logger.info('Writing nitro.json for vite.preview()...')
+
+  const buildInfo = {
+    date: new Date().toJSON(),
+    preset,
+    framework: { name: 'tanstack-start' },
+    versions: {},
+    commands: {
+      preview: `node ${path.join(outputDir, 'server/index.mjs')}`,
+    },
+  }
+
+  const buildInfoPath = path.join(outputDir, 'nitro.json')
+  await fsp.writeFile(buildInfoPath, JSON.stringify(buildInfo, null, 2))
+}
+
 function setupPrerenderConfig(startConfig: TanStackStartOutputConfig) {
   if (startConfig.prerender?.enabled !== false) {
     startConfig.prerender = {
@@ -72,19 +104,19 @@ export async function postServerBuild({
 export async function postServerBuildForNitro({
   startConfig,
   outputDir,
-  nitroServerPath,
+  configFile,
 }: {
   startConfig: TanStackStartOutputConfig
   outputDir: string
-  nitroServerPath: string
+  configFile?: string
 }) {
   setupPrerenderConfig(startConfig)
 
   if (startConfig.prerender?.enabled) {
     await prerender({
       startConfig,
       outputDir,
-      nitroServerPath,
+      configFile,
     })
   }
 

packages/start-plugin-core/src/prerender.ts

@@ -85,6 +85,9 @@ export async function prerender({
     cleanup = async () => {
       await previewServer.close()
     }
+
+    // Wait for the server to be ready (handles Nitro's child process startup time)
+    await waitForServerReady(baseUrl, logger)
   }
 
   const isRedirectResponse = (res: Response) => {
@@ -352,13 +355,48 @@ async function startPreviewServer(
   const vite = await import('vite')
 
   try {
-    return await vite.preview({
+    const server = await vite.preview({
       configFile,
       preview: {
         port: 0,
         open: false,
       },
     })
+
+    // Check if Nitro's vite plugin is active (it spawns a child process)
+    const hasNitroPlugin = server.config.plugins.some((p) => {
+      if (typeof p !== 'object' || p === null) return false
+      if (!('name' in p)) return false
+      return typeof p.name === 'string' && p.name.startsWith('nitro:')
+    })
+
+    if (hasNitroPlugin) {
+      // Wrap the close method to handle Nitro's child process cleanup
+      // Nitro's configurePreviewServer spawns a child process and registers
+      // SIGINT/SIGHUP handlers to kill it. Since previewServer.close() doesn't
+      // trigger these signals, we need to emit SIGHUP ourselves.
+      const originalClose = server.close.bind(server)
+      server.close = async () => {
+        // Temporarily override process.exit to prevent Nitro's handler from
+        // exiting our process when we emit SIGHUP
+        const originalExit = process.exit
+        process.exit = (() => {}) as typeof process.exit
+
+        // Emit SIGHUP to trigger Nitro's child process cleanup
+        process.emit('SIGHUP', 'SIGHUP')
+
+        // Restore process.exit
+        process.exit = originalExit
+
+        // Give the child process a moment to terminate
+        await new Promise((resolve) => setTimeout(resolve, 100))
+
+        // Now close the preview server
+        return originalClose()
+      }
+    }
+
+    return server
   } catch (error) {
     throw new Error(
       'Failed to start the Vite preview server for prerendering',
@@ -378,3 +416,30 @@ function getResolvedUrl(previewServer: PreviewServer): URL {
 
   return new URL(baseUrl)
 }
+
+async function waitForServerReady(
+  baseUrl: URL,
+  logger: ReturnType<typeof createLogger>,
+  timeout = 30000,
+): Promise<void> {
+  const startTime = Date.now()
+  const checkInterval = 100
+
+  while (Date.now() - startTime < timeout) {
+    try {
+      const response = await fetch(new URL('/', baseUrl))
+      // Server is ready if we get any response (even 404 is fine, we just need it to not error)
+      if (response.status < 500) {
+        logger.info('Server is ready')
+        return
+      }
+    } catch {
+      // Server not ready yet, retry
+    }
+    await new Promise((resolve) => setTimeout(resolve, checkInterval))
+  }
+
+  throw new Error(
+    `Server at ${baseUrl} did not become ready within ${timeout}ms`,
+  )
+}