wip

This seems close but I'm not really sure how to define the "handle document request" function? it seems like it's kinda sorta split between app/entry.server and app/index, where entry.server defines a rendering function and index actually listens for requests. But the express renderer isn't returning a response correctly

Author: vcarl

app/entry.server.tsx

@@ -2,11 +2,12 @@ import "react-router";
 import { createRequestHandler } from "@react-router/express";
 import express from "express";
 
-export const app = express();
-console.log("entrypoint.server");
-app.use(
-  createRequestHandler({
-    // @ts-expect-error - virtual module provided by React Router at build time
-    build: () => import("virtual:react-router/server-build"),
-  }),
-);
+export const handleRequest = createRequestHandler({
+  // @ts-expect-error - virtual module provided by React Router at build time
+  build: () => import("virtual:react-router/server-build"),
+});
+
+const app = express();
+app.use(handleRequest);
+
+export default app;

app/index.ts

@@ -50,24 +50,18 @@ if (isProd()) {
       server: { middlewareMode: true },
     }),
   );
-  console.log({ viteDevServer });
   app.use(viteDevServer.middlewares);
-  app.use(async (req, res, next) => {
-    try {
-      const source = await viteDevServer.ssrLoadModule(
-        "./app/entry.server.tsx",
-      );
-      const out = await source.app(req, res, next);
-      console.log(out);
-      return out;
-    } catch (error) {
-      console.log({ error });
+  viteDevServer
+    .ssrLoadModule("./app/entry.server.tsx")
+    .then((source) => {
+      app.use(source.default);
+    })
+    .catch((error) => {
       if (typeof error === "object" && error instanceof Error) {
         viteDevServer.ssrFixStacktrace(error);
       }
-      next(error);
-    }
-  });
+      console.log({ error });
+    });
 }
 app.use(express.static("build/client", { maxAge: "1h" }));