server.ts

import { createServer as createHttpServer } from "node:http";
import { readFileSync } from "node:fs";

import { fromNodeHandler, H3, toNodeHandler } from "h3/node";
import { createServer as createViteServer, type ViteDevServer } from "vite";

interface RenderResult {
	html: string;
	status: number;
	data: unknown;
}

async function start() {
	// Create a plain Node HTTP server first — Vite and H3 will share it
	const httpServer = createHttpServer();

	// Create Vite server in middleware mode, attached to our HTTP server
	// so WebSocket upgrade requests reach Vite's HMR handler
	const vite: ViteDevServer = await createViteServer({
		server: { middlewareMode: true, hmr: { server: httpServer } },
		appType: "custom",
	});

	const app = new H3();

	// Mount Vite's connect middleware into H3 — this handles
	// static files and on-demand module transforms
	app.use(fromNodeHandler(vite.middlewares as Parameters<typeof fromNodeHandler>[0]));

	// Handle all remaining routes with SSR
	app.all("/**", async (event) => {
		const url = event.url.pathname;

		try {
			// 1. Read the HTML template from disk
			let template = readFileSync("index.html", "utf-8");

			// 2. Apply Vite's HTML transforms — this injects /@vite/client
			//    for HMR and rewrites asset URLs
			template = await vite.transformIndexHtml(url, template);

			// 3. Load the server entry module through Vite's SSR pipeline
			const { render } = (await vite.ssrLoadModule("/src/entry-server.tsx")) as {
				render: (pathname: string) => Promise<RenderResult>;
			};

			// 4. Render the app to HTML
			const { html: appHtml, status, data } = await render(url);

			// 5. Inject rendered HTML and serialized data into the template
			const finalHtml = template
				.replace("<!--ssr-outlet-->", appHtml)
				.replace(
					"</head>",
					`<script>window.__EIGEN_DATA__ = ${JSON.stringify(data)}</script></head>`,
				);

			return new Response(finalHtml, {
				status,
				headers: { "Content-Type": "text/html" },
			});
		} catch (e) {
			if (e instanceof Error) {
				vite.ssrFixStacktrace(e);
				console.error(e.stack);
				return new Response(e.message, { status: 500 });
			}
		}
	});

	// Route HTTP requests through H3, but use the shared httpServer
	// so Vite's WebSocket upgrade handler stays attached
	httpServer.on("request", toNodeHandler(app));
	httpServer.listen(3200, () => {
		console.log("http://localhost:3200");
	});

	// Graceful shutdown — close Vite's file watchers and
	// WebSocket server so the process can actually exit
	process.on("SIGINT", async () => {
		httpServer.close();
		await vite.close();
		process.exit(0);
	});
}

start();