vite: typesafe server build

integration/helpers/vite.ts

@@ -41,8 +41,9 @@ export const EXPRESS_SERVER = (args: {
   loadContext?: Record<string, unknown>;
 }) =>
   String.raw`
+    import path from "node:path";
     import { createRequestHandler } from "@remix-run/express";
-    import { installGlobals } from "@remix-run/node";
+    import { installGlobals, getServerBuild } from "@remix-run/node";
     import express from "express";
 
     installGlobals();
@@ -68,12 +69,12 @@ export const EXPRESS_SERVER = (args: {
     }
     app.use(express.static("build/client", { maxAge: "1h" }));
 
+    const buildPath = path.resolve("./build/server/index.js");
+    const build = await getServerBuild(buildPath, { viteDevServer });
     app.all(
       "*",
       createRequestHandler({
-        build: viteDevServer
-          ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build")
-          : await import("./build/index.js"),
+        build,
         getLoadContext: () => (${JSON.stringify(args.loadContext ?? {})}),
       })
     );

integration/vite-basename-test.ts

@@ -94,8 +94,9 @@ const customServerFile = ({
   basename = basename ?? base;
 
   return String.raw`
+    import path from "node:path";
     import { createRequestHandler } from "@remix-run/express";
-    import { installGlobals } from "@remix-run/node";
+    import { installGlobals, getServerBuild } from "@remix-run/node";
     import express from "express";
     installGlobals();
 
@@ -112,14 +113,11 @@ const customServerFile = ({
 
     const app = express();
     app.use("${base}", viteDevServer?.middlewares || express.static("build/client"));
-    app.all(
-      "${basename}*",
-      createRequestHandler({
-        build: viteDevServer
-          ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build")
-          : await import("./build/server/index.js"),
-      })
-    );
+
+    const buildPath = path.resolve("./build/server/index.js");
+    console.log({ viteDevServer, mode: process.env.NODE_ENV });
+    const build = await getServerBuild(buildPath, { viteDevServer });
+    app.all("${basename}*", createRequestHandler({ build }));
     app.get("*", (_req, res) => {
       res.setHeader("content-type", "text/html")
       res.end('Remix app is at <a href="${basename}">${basename}</a>');

packages/remix-cloudflare/index.ts

@@ -15,6 +15,7 @@ export {
   defer,
   broadcastDevReady,
   logDevReady,
+  getServerBuild,
   isCookie,
   isSession,
   json,

packages/remix-deno/index.ts

@@ -17,6 +17,7 @@ export {
   broadcastDevReady,
   createSession,
   defer,
+  getServerBuild,
   isCookie,
   isSession,
   json,

packages/remix-node/index.ts

@@ -27,6 +27,7 @@ export {
   defer,
   broadcastDevReady,
   logDevReady,
+  getServerBuild,
   isCookie,
   isSession,
   json,

packages/remix-server-runtime/__tests__/build-test.ts

@@ -0,0 +1,15 @@
+import { getServerBuild } from "../build";
+
+it("getServerBuild throws when path is relative", async () => {
+  await expect(() => getServerBuild("./build/server/index.js")).rejects.toThrow(
+    "Server build path must be absolute, but received relative path: ./build/server/index.js"
+  );
+});
+
+it("getServerBuild throws when build does not exist", async () => {
+  await expect(() =>
+    getServerBuild("/this/path/doesnt/exist.js")
+  ).rejects.toThrow(
+    "Could not import server build from '/this/path/doesnt/exist.js'. Did you forget to run 'remix vite:build' first?"
+  );
+});

packages/remix-server-runtime/build.ts

@@ -1,8 +1,44 @@
+import type { ViteDevServer } from "vite";
+import path from "pathe";
+
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "./routeModules";
 import type { AssetsManifest, EntryContext, FutureConfig } from "./entry";
 import type { ServerRouteManifest } from "./routes";
 import type { AppLoadContext } from "./data";
 
+export async function getServerBuild(
+  buildPath: string,
+  options: {
+    viteDevServer?: ViteDevServer;
+  } = {}
+): Promise<ServerBuild | (() => Promise<ServerBuild>)> {
+  // eslint-disable-next-line prefer-let/prefer-let
+  const { viteDevServer } = options;
+  if (viteDevServer) {
+    return () =>
+      viteDevServer.ssrLoadModule(
+        "virtual:remix/server-build"
+      ) as Promise<ServerBuild>;
+  }
+  console.log({ buildPath, options });
+
+  if (!path.isAbsolute(buildPath)) {
+    throw new Error(
+      `Server build path must be absolute, but received relative path: ${buildPath}`
+    );
+  }
+
+  // Convert file path meant for `import` to URL for Windows compatibility
+  let buildURL =
+    "file://" + (buildPath.startsWith("/") ? "" : "/") + encodeURI(buildPath);
+  console.log({ buildURL });
+  return import(buildURL).catch(() => {
+    throw Error(
+      `Could not import server build from '${buildPath}'. Did you forget to run 'remix vite:build' first?`
+    );
+  });
+}
+
 // NOTE: IF you modify `ServerBuild`, be sure to modify the
 // `remix-dev/server-build.ts` file to reflect the new field as well
 

packages/remix-server-runtime/index.ts

@@ -80,3 +80,4 @@ export type {
   UploadHandler,
   UploadHandlerPart,
 } from "./reexport";
+export { getServerBuild } from "./reexport";

packages/remix-server-runtime/package.json

@@ -20,19 +20,25 @@
     "@types/cookie": "^0.6.0",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.6.0",
+    "pathe": "^1.1.2",
     "set-cookie-parser": "^2.4.8",
     "source-map": "^0.7.3"
   },
   "devDependencies": {
     "@types/set-cookie-parser": "^2.4.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite": "^5.1.0"
   },
   "peerDependencies": {
-    "typescript": "^5.1.0"
+    "typescript": "^5.1.0",
+    "vite": "^5.1.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
+    },
+    "vite": {
+      "optional": true
     }
   },
   "engines": {

packages/remix-server-runtime/reexport.ts

@@ -7,6 +7,7 @@ export type {
   ServerBuild,
   ServerEntryModule,
 } from "./build";
+export { getServerBuild } from "./build";
 
 export type { UploadHandlerPart, UploadHandler } from "./formData";
 export type {

packages/remix-server-runtime/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2022"],
     "target": "ES2022",
     "composite": true,
+    "module": "ESNext",
 
     "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true,

yarn.lock

@@ -10747,6 +10747,11 @@ pathe@^1.0.0, pathe@^1.1.0:
   resolved "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz#e2e13f6c62b31a3289af4ba19886c230f295ec03"
   integrity sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==
 
+pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
 peek-stream@^1.1.0:
   version "1.1.3"
   resolved "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz"
@@ -13494,6 +13499,17 @@ [email protected]:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vite@^5.1.0:
+  version "5.1.4"
+  resolved "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz#14e9d3e7a6e488f36284ef13cebe149f060bcfb6"
+  integrity sha512-n+MPqzq+d9nMVTKyewqw6kSt+R3CkvF9QAKY8obiQn8g1fwTscKxyfaYnC632HtBXAQGc1Yjomphwn1dtwGAHg==
+  dependencies:
+    esbuild "^0.19.3"
+    postcss "^8.4.35"
+    rollup "^4.2.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"