feat: nitro preview

src/build/rolldown/prod.ts

@@ -48,11 +48,7 @@ export async function buildProduction(nitro: Nitro, config: RolldownOptions) {
   const rewriteRelativePaths = (input: string) => {
     return input.replace(/([\s:])\.\/(\S*)/g, `$1${rOutput}/$2`);
   };
-  if (buildInfo.commands!.preview) {
-    nitro.logger.success(
-      `You can preview this build using \`${rewriteRelativePaths(buildInfo.commands!.preview)}\``
-    );
-  }
+  nitro.logger.success(`You can preview this build using \`npx nitro preview\``);
   if (buildInfo.commands!.deploy) {
     nitro.logger.success(
       `You can deploy this build using \`${rewriteRelativePaths(buildInfo.commands!.deploy)}\``

src/build/rollup/prod.ts

@@ -51,11 +51,7 @@ export async function buildProduction(nitro: Nitro, rollupConfig: RollupConfig)
   const rewriteRelativePaths = (input: string) => {
     return input.replace(/([\s:])\.\/(\S*)/g, `$1${rOutput}/$2`);
   };
-  if (buildInfo.commands!.preview) {
-    nitro.logger.success(
-      `You can preview this build using \`${rewriteRelativePaths(buildInfo.commands!.preview)}\``
-    );
-  }
+  nitro.logger.success(`You can preview this build using \`npx nitro preview\``);
   if (buildInfo.commands!.deploy) {
     nitro.logger.success(
       `You can deploy this build using \`${rewriteRelativePaths(buildInfo.commands!.deploy)}\``

src/build/vite/preview.ts

@@ -1,10 +1,6 @@
-import type { Plugin as VitePlugin, PreviewServer } from "vite";
+import type { Plugin as VitePlugin } from "vite";
 import type { NitroPluginContext } from "./types.ts";
-import { spawn } from "node:child_process";
-import consola from "consola";
-import { join, resolve } from "pathe";
-import { prettyPath } from "../../utils/fs.ts";
-import { getBuildInfo } from "../info.ts";
+import { startPreview } from "../../preview.ts";
 
 export function nitroPreviewPlugin(ctx: NitroPluginContext): VitePlugin {
   return {
@@ -20,162 +16,31 @@ export function nitroPreviewPlugin(ctx: NitroPluginContext): VitePlugin {
     },
 
     async configurePreviewServer(server) {
-      const { outputDir, buildInfo } = await getBuildInfo(server.config.root);
-      if (!buildInfo) {
-        throw this.error("Cannot load nitro build info. Make sure to build first.");
-      }
-
-      const info = [
-        ["Build Directory:", prettyPath(outputDir)],
-        ["Date:", buildInfo.date && new Date(buildInfo.date).toLocaleString()],
-        ["Nitro Version:", buildInfo.versions.nitro],
-        ["Nitro Preset:", buildInfo.preset],
-        buildInfo.framework?.name !== "nitro" && [
-          "Framework:",
-          buildInfo.framework?.name +
-            (buildInfo.framework?.version ? ` (v${buildInfo.framework.version})` : ""),
-        ],
-      ].filter((i) => i && i[1]) as [string, string][];
-      consola.box({
-        title: " [Build Info] ",
-        message: info.map((i) => `- ${i[0]} ${i[1]}`).join("\n"),
+      // Init Nitro preview handler
+      const preview = await startPreview({
+        rootDir: server.config.root,
+        loader: { nodeServer: server.httpServer },
       });
 
-      // Load .env files for preview mode
-      const dotEnvEntries = await loadPreviewDotEnv(server.config.root);
-      if (dotEnvEntries.length > 0) {
-        consola.box({
-          title: " [Environment Variables] ",
-          message: [
-            "Loaded variables from .env files (preview mode only).",
-            "Set platform environment variables for production:",
-            ...dotEnvEntries.map(([key, val]) => ` - ${key}`),
-          ].join("\n"),
-        });
-      }
-
-      // Currently cloudflare preset strictly requires preview command
-      if (buildInfo.preset.includes("cloudflare")) {
-        if (!buildInfo.commands?.preview) {
-          throw this.error(
-            `No nitro build preview command found for the "${buildInfo.preset}" preset.`
-          );
-        }
-        await runPreviewCommand({
-          server,
-          command: buildInfo.commands.preview,
-          cwd: server.config.root,
-        });
-        return;
-      }
+      // Close preview server when Vite's preview server is closed
+      server.httpServer.once("close", async () => {
+        await preview.close();
+      });
 
-      // Import handler and use in-process function calling
+      // Handle all requests with Nitro preview handler (also handles production static assets)
       const { NodeRequest, sendNodeResponse } = await import("srvx/node");
+      server.middlewares.use(async (req, res, next) => {
+        const nodeReq = new NodeRequest({ req, res });
+        const previewRes: Response = await preview.fetch(nodeReq);
+        await sendNodeResponse(res, previewRes).catch(next);
+      });
 
-      if (buildInfo.publicDir) {
-        const { serveStatic } = await import("srvx/static");
-        const staticHandler = serveStatic({ dir: join(outputDir, buildInfo.publicDir) });
-
-        server.middlewares.use(async (req, res, next) => {
-          const nodeReq = new NodeRequest({ req, res });
-          const staticRes: Response | undefined = await staticHandler(
-            nodeReq,
-            () => undefined as any
-          );
-          if (staticRes) {
-            await sendNodeResponse(res, staticRes).catch(next);
-          } else {
-            next();
-          }
-        });
-      }
-
-      if (buildInfo.serverEntry) {
-        const { loadServerEntry } = await import("srvx/loader");
-        const entryPath = resolve(outputDir, buildInfo.serverEntry);
-        const entry = await loadServerEntry({ entry: entryPath });
-        if (entry.notFound || !entry.fetch) {
-          throw new Error(`Cannot load nitro server entry: ${entryPath}`);
-        }
-        server.middlewares.use(async (req, res, next) => {
-          const nodeReq = new NodeRequest({ req, res });
-          await sendNodeResponse(res, await entry.fetch!(nodeReq)).catch(next);
+      // Handle WebSocket upgrade requests with Nitro preview handler if supported
+      if (preview.upgrade) {
+        server.httpServer.on("upgrade", (req, socket, head) => {
+          preview.upgrade!(req, socket, head);
         });
-        return;
       }
     },
   } satisfies VitePlugin;
 }
-
-async function loadPreviewDotEnv(root: string): Promise<[string, string][]> {
-  const { loadDotenv } = await import("c12");
-  const env = await loadDotenv({
-    cwd: root,
-    fileName: [".env.preview", ".env.production", ".env"],
-  });
-  return Object.entries(env).filter(([_key, val]) => val) as [string, string][];
-}
-
-async function runPreviewCommand(opts: {
-  server: PreviewServer;
-  command: string;
-  cwd: string;
-  env?: [string, string][];
-}) {
-  const [arg0, ...args] = opts.command.split(" ");
-
-  consola.info(`Spawning preview server...`);
-  consola.info(opts.command);
-  console.log("");
-
-  const { getRandomPort, waitForPort } = await import("get-port-please");
-  const randomPort = await getRandomPort();
-  const child = spawn(arg0, [...args, "--port", String(randomPort)], {
-    stdio: "inherit",
-    cwd: opts.cwd,
-    env: {
-      ...process.env,
-      ...Object.fromEntries(opts.env ?? []),
-      PORT: String(randomPort),
-    },
-  });
-
-  const killChild = (signal: NodeJS.Signals) => {
-    if (child && !child.killed) {
-      child.kill(signal);
-    }
-  };
-
-  for (const sig of ["SIGINT", "SIGHUP"] as const) {
-    process.once(sig, () => {
-      consola.info(`Stopping preview server...`);
-      killChild(sig);
-      process.exit();
-    });
-  }
-
-  opts.server.httpServer.once("close", () => {
-    killChild("SIGTERM");
-  });
-
-  child.once("exit", (code) => {
-    if (code && code !== 0) {
-      consola.error(`[nitro] Preview server exited with code ${code}`);
-    }
-  });
-
-  const { createProxyServer } = await import("httpxy");
-  const proxy = createProxyServer({
-    target: `http://localhost:${randomPort}`,
-  });
-
-  opts.server.middlewares.use((req, res, next) => {
-    if (child && !child.killed) {
-      proxy.web(req, res).catch(next);
-    } else {
-      res.end(`Nitro preview server is not running.`);
-    }
-  });
-
-  await waitForPort(randomPort, { retries: 20, delay: 500 });
-}

src/build/vite/prod.ts

@@ -126,11 +126,7 @@ export async function buildEnvironments(ctx: NitroPluginContext, builder: ViteBu
   };
 
   if (!isTest && !isCI) console.log();
-  if (nitro.options.commands.preview) {
-    nitro.logger.success(
-      `You can preview this build using \`${rewriteRelativePaths(nitro.options.commands.preview)}\``
-    );
-  }
+  nitro.logger.success(`You can preview this build using \`npx vite preview\``);
   if (nitro.options.commands.deploy) {
     nitro.logger.success(
       `You can deploy this build using \`${rewriteRelativePaths(nitro.options.commands.deploy)}\``

src/cli/commands/preview.ts

@@ -0,0 +1,48 @@
+import { defineCommand } from "citty";
+import { resolve } from "pathe";
+import { commonArgs } from "../common.ts";
+import { startPreview } from "../../preview.ts";
+import { serve } from "srvx";
+import { log } from "srvx/log";
+
+export default defineCommand({
+  meta: {
+    name: "preview",
+    description: "Start a local server to preview the built server",
+  },
+  args: {
+    ...commonArgs,
+    port: { type: "string", description: "specify port" },
+    host: { type: "string", description: "specify hostname" },
+  },
+  async run({ args }) {
+    const rootDir = resolve((args.dir || args._dir || ".") as string);
+
+    const server = serve({
+      fetch(req) {
+        return preview.fetch(req);
+      },
+      middleware: [log()],
+      gracefulShutdown: false,
+      port: args.port,
+      hostname: args.host,
+    });
+
+    const preview = await startPreview({
+      rootDir,
+      loader: { srvxServer: server },
+    });
+
+    if (preview.upgrade) {
+      server.node?.server?.on("upgrade", (req, socket, head) => {
+        preview.upgrade!(req, socket, head);
+      });
+    }
+
+    process.on("SIGINT", async () => {
+      await server.close();
+      await preview.close();
+      process.exit(0);
+    });
+  },
+});

src/cli/index.ts

@@ -13,6 +13,7 @@ const main = defineCommand({
     build: () => import("./commands/build.ts").then((r) => r.default),
     prepare: () => import("./commands/prepare.ts").then((r) => r.default),
     task: () => import("./commands/task/index.ts").then((r) => r.default),
+    preview: () => import("./commands/preview.ts").then((r) => r.default),
   },
 });