Support Vite middleware mode in RSC Framework Mode

integration/helpers/vite.ts

@@ -171,8 +171,43 @@ export const EXPRESS_SERVER = (args: {
   base?: string;
   loadContext?: Record<string, unknown>;
   customLogic?: string;
-}) =>
-  String.raw`
+  templateName?: TemplateName;
+}) => {
+  if (args.templateName?.includes("rsc")) {
+    return String.raw`
+      import { createRequestListener } from "@mjackson/node-fetch-server";
+      import express from "express";
+
+      const viteDevServer =
+        process.env.NODE_ENV === "production"
+          ? undefined
+          : await import("vite").then(({ createServer }) =>
+              createServer({
+                server: {
+                  middlewareMode: true,
+                },
+              })
+            );
+      const app = express();      
+
+      ${args?.customLogic || ""}
+
+      if (viteDevServer) {
+        app.use(viteDevServer.middlewares);
+      } else {
+        app.use(
+          "/assets",
+          express.static("build/client/assets", { immutable: true, maxAge: "1y" })
+        );
+        app.all("*", createRequestListener((await import("./build/server/index.js")).default));
+      }
+
+      const port = ${args.port};
+      app.listen(port, () => console.log('http://localhost:' + port));
+    `;
+  }
+
+  return String.raw`
     import { createRequestHandler } from "@react-router/express";
     import express from "express";
 
@@ -212,6 +247,7 @@ export const EXPRESS_SERVER = (args: {
     const port = ${args.port};
     app.listen(port, () => console.log('http://localhost:' + port));
   `;
+};
 
 type FrameworkModeViteMajorTemplateName =
   | "vite-5-template"

integration/vite-basename-test.ts

@@ -90,47 +90,85 @@ const customServerFile = ({
   port,
   base,
   basename,
+  templateName,
 }: {
   port: number;
   base?: string;
   basename?: string;
+  templateName: TemplateName;
 }) => {
   base = base ?? "/mybase/";
   basename = basename ?? base;
 
-  return js`
-    import { createRequestHandler } from "@react-router/express";
-    import express from "express";
-
-    const viteDevServer =
-      process.env.NODE_ENV === "production"
-        ? undefined
-        : await import("vite").then(({ createServer }) =>
-            createServer({
-              server: {
-                middlewareMode: true,
-              },
-            })
-          );
+  if (templateName.includes("rsc")) {
+    return js`
+      import { createRequestListener } from "@mjackson/node-fetch-server";
+      import express from "express";
+
+      const viteDevServer =
+        process.env.NODE_ENV === "production"
+          ? undefined
+          : await import("vite").then(({ createServer }) =>
+              createServer({
+                server: {
+                  middlewareMode: true,
+                },
+              })
+            );
+
+      const app = express();
+      if (viteDevServer) {
+        app.use(viteDevServer.middlewares);
+      } else {
+        app.use("${base}", express.static("build/client"));
+        app.all(
+          "${basename}*",
+          createRequestListener((await import("./build/server/index.js")).default),
+        );
+      }
+      app.get("*", (_req, res) => {
+        res.setHeader("content-type", "text/html")
+        res.end('React Router app is at <a href="${basename}">${basename}</a>');
+      });
 
-    const app = express();
-    app.use("${base}", viteDevServer?.middlewares || express.static("build/client"));
-    app.all(
-      "${basename}*",
-      createRequestHandler({
-        build: viteDevServer
-          ? () => viteDevServer.ssrLoadModule("virtual:react-router/server-build")
-          : await import("./build/server/index.js"),
-      })
-    );
-    app.get("*", (_req, res) => {
-      res.setHeader("content-type", "text/html")
-      res.end('React Router app is at <a href="${basename}">${basename}</a>');
-    });
+      const port = ${port};
+      app.listen(port, () => console.log('http://localhost:' + port));
+    `;
+  } else {
+    return js`
+      import { createRequestHandler } from "@react-router/express";
+      import express from "express";
+
+      const viteDevServer =
+        process.env.NODE_ENV === "production"
+          ? undefined
+          : await import("vite").then(({ createServer }) =>
+              createServer({
+                server: {
+                  middlewareMode: true,
+                },
+              })
+            );
+
+      const app = express();
+      app.use("${base}", viteDevServer?.middlewares || express.static("build/client"));
+      app.all(
+        "${basename}*",
+        createRequestHandler({
+          build: viteDevServer
+            ? () => viteDevServer.ssrLoadModule("virtual:react-router/server-build")
+            : await import("./build/server/index.js"),
+        })
+      );
+      app.get("*", (_req, res) => {
+        res.setHeader("content-type", "text/html")
+        res.end('React Router app is at <a href="${basename}">${basename}</a>');
+      });
 
-    const port = ${port};
-    app.listen(port, () => console.log('http://localhost:' + port));
-  `;
+      const port = ${port};
+      app.listen(port, () => console.log('http://localhost:' + port));
+    `;
+  }
 };
 
 test.describe("Vite base + React Router basename", () => {
@@ -279,11 +317,6 @@ test.describe("Vite base + React Router basename", () => {
       });
 
       test.describe("express dev", async () => {
-        test.skip(
-          templateName.includes("rsc"),
-          "RSC Framework Mode doesn't support Vite middleware mode yet",
-        );
-
         let port: number;
         let cwd: string;
         let stop: () => void;
@@ -301,7 +334,7 @@ test.describe("Vite base + React Router basename", () => {
           cwd = await createProject(
             {
               ...(await configFiles({ port, base, basename, templateName })),
-              "server.mjs": customServerFile({ port, basename }),
+              "server.mjs": customServerFile({ port, basename, templateName }),
               ...sharedFiles,
             },
             templateName,
@@ -408,11 +441,6 @@ test.describe("Vite base + React Router basename", () => {
       });
 
       test.describe("express build", async () => {
-        test.skip(
-          templateName.includes("rsc"),
-          "Vite build test is already using Express",
-        );
-
         let port: number;
         let cwd: string;
         let stop: () => void;
@@ -434,6 +462,7 @@ test.describe("Vite base + React Router basename", () => {
                 port,
                 base,
                 basename,
+                templateName,
               }),
               ...sharedFiles,
             },
@@ -479,29 +508,46 @@ test.describe("Vite base + React Router basename", () => {
           page,
         }) => {
           port = await getPort();
-          cwd = await createProject({
-            ...(await configFiles({
-              templateName,
-              port,
-              base: "https://cdn.example.com/assets/",
-              basename: "/app/",
-            })),
-            // Slim server that only serves basename (route) requests from the React Router handler
-            "server.mjs": String.raw`
-              import { createRequestHandler } from "@react-router/express";
-              import express from "express";
-
-              const app = express();
-              app.all(
-                "/app/*",
-                createRequestHandler({ build: await import("./build/server/index.js") })
-              );
-
-              const port = ${port};
-              app.listen(port, () => console.log('http://localhost:' + port));
-            `,
-            ...sharedFiles,
-          });
+          cwd = await createProject(
+            {
+              ...(await configFiles({
+                templateName,
+                port,
+                base: "https://cdn.example.com/assets/",
+                basename: "/app/",
+              })),
+              // Slim server that only serves basename (route) requests from the React Router handler
+              "server.mjs": templateName.includes("rsc")
+                ? String.raw`
+                  import { createRequestListener } from "@mjackson/node-fetch-server";
+                  import express from "express";
+
+                  const app = express();
+                  app.all(
+                    "/app/*",
+                    createRequestListener((await import("./build/server/index.js")).default)
+                  );
+
+                  const port = ${port};
+                  app.listen(port, () => console.log('http://localhost:' + port));
+                `
+                : String.raw`
+                  import { createRequestHandler } from "@react-router/express";
+                  import express from "express";
+
+                  const app = express();
+                  app.all(
+                    "/app/*",
+                    createRequestHandler({ build: await import("./build/server/index.js") })
+                  );
+
+                  const port = ${port};
+                  app.listen(port, () => console.log('http://localhost:' + port));
+                `,
+              ...sharedFiles,
+            },
+            templateName,
+          );
 
           build({ cwd });
           stop = await customDev({

integration/vite-css-test.ts

@@ -292,11 +292,6 @@ test.describe("Vite CSS", () => {
       });
 
       test.describe("express", async () => {
-        test.fixme(
-          templateName.includes("rsc"),
-          "RSC Framework mode doesn't support Vite middleware mode yet",
-        );
-
         let port: number;
         let cwd: string;
         let stop: () => void;
@@ -313,7 +308,7 @@ test.describe("Vite CSS", () => {
                 templateName,
                 vanillaExtract: true,
               }),
-              "server.mjs": EXPRESS_SERVER({ port }),
+              "server.mjs": EXPRESS_SERVER({ port, templateName }),
               ...files({ templateName }),
             },
             templateName,

integration/vite-hmr-hdr-test.ts

@@ -63,10 +63,9 @@ test.describe("Vite HMR & HDR", () => {
       });
 
       test("express", async ({ page, browserName, customDev }) => {
-        test.skip(templateName.includes("rsc"), "RSC is not supported");
         let files: Files = async ({ port }) => ({
           "vite.config.js": await viteConfig.basic({ port, templateName }),
-          "server.mjs": EXPRESS_SERVER({ port }),
+          "server.mjs": EXPRESS_SERVER({ port, templateName }),
           "app/routes/_index.tsx": indexRoute,
         });
         let { cwd, port } = await customDev(files, templateName);