feat(remix-dev,remix-serve): include publicPath in server build manif…

…est (#3349) this allows `remix dev` and `remix-serve [build-dir]` to use your customized `assetsBuildDirectory` and `publicPath` Signed-off-by: Logan McAnsh <logan@mcan.sh>
remix-run · Jul 11, 2022 · 55bb00e · 55bb00e
1 parent 3418c20
commit 55bb00e
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 14 deletions.
diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts
@@ -20,6 +20,7 @@ describe("readConfig", () => {
         devServerPort: expect.any(Number),
         serverBuildPath: expect.any(String),
         assetsBuildDirectory: expect.any(String),
+        relativeAssetsBuildDirectory: expect.any(String),
       },
       `
       Object {
@@ -32,6 +33,7 @@ describe("readConfig", () => {
         "entryServerFile": "entry.server.tsx",
         "mdx": undefined,
         "publicPath": "/build/",
+        "relativeAssetsBuildDirectory": Any<String>,
         "rootDirectory": Any<String>,
         "routes": Object {
           "root": Object {

diff --git a/packages/remix-dev/cli/commands.ts b/packages/remix-dev/cli/commands.ts
@@ -287,7 +287,14 @@ export async function dev(
     purgeAppRequireCache(config.serverBuildPath);
     next();
   });
-  app.use(createApp(config.serverBuildPath, mode));
+  app.use(
+    createApp(
+      config.serverBuildPath,
+      mode,
+      config.publicPath,
+      config.assetsBuildDirectory
+    )
+  );
 
   let server: Server | null = null;
 

diff --git a/packages/remix-dev/compiler/plugins/serverEntryModulePlugin.ts b/packages/remix-dev/compiler/plugins/serverEntryModulePlugin.ts
@@ -45,6 +45,10 @@ ${Object.keys(config.routes)
   export { default as assets } from ${JSON.stringify(
     assetsManifestVirtualModule.id
   )};
+  export const assetsBuildDirectory = ${JSON.stringify(
+    config.relativeAssetsBuildDirectory
+  )};
+  export const publicPath = ${JSON.stringify(config.publicPath)};
   export const entry = { module: entryServer };
   export const routes = {
     ${Object.keys(config.routes)

diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts
@@ -202,6 +202,11 @@ export interface RemixConfig {
    */
   assetsBuildDirectory: string;
 
+  /**
+   * the original relative path to the assets build directory
+   */
+  relativeAssetsBuildDirectory: string;
+
   /**
    * The URL prefix of the public build with a trailing slash.
    */
@@ -359,11 +364,14 @@ export async function readConfig(
     serverBuildPath = path.resolve(rootDirectory, appConfig.serverBuildPath);
   }
 
-  let assetsBuildDirectory = path.resolve(
-    rootDirectory,
+  let assetsBuildDirectory =
     appConfig.assetsBuildDirectory ||
-      appConfig.browserBuildDirectory ||
-      path.join("public", "build")
+    appConfig.browserBuildDirectory ||
+    path.join("public", "build");
+
+  let absoluteAssetsBuildDirectory = path.resolve(
+    rootDirectory,
+    assetsBuildDirectory
   );
 
   let devServerPort =
@@ -435,7 +443,8 @@ export async function readConfig(
     entryServerFile,
     devServerPort,
     devServerBroadcastDelay,
-    assetsBuildDirectory,
+    assetsBuildDirectory: absoluteAssetsBuildDirectory,
+    relativeAssetsBuildDirectory: assetsBuildDirectory,
     publicPath,
     rootDirectory,
     routes,

diff --git a/packages/remix-serve/cli.ts b/packages/remix-serve/cli.ts
@@ -4,10 +4,8 @@ import os from "os";
 
 import { createApp } from "./index";
 
-let port = Number.parseInt(process.env.PORT || "3000", 10);
-if (Number.isNaN(port)) {
-  port = 3000;
-}
+let port = process.env.PORT ? Number(process.env.PORT) : 3000;
+if (Number.isNaN(port)) port = 3000;
 
 let buildPathArg = process.argv[2];
 
@@ -35,7 +33,14 @@ let onListen = () => {
   }
 };
 
-let app = createApp(buildPath);
+let build = require(buildPath);
+
+let app = createApp(
+  buildPath,
+  process.env.NODE_ENV,
+  build.publicPath,
+  build.assetsBuildDirectory
+);
 let server = process.env.HOST
   ? app.listen(port, process.env.HOST, onListen)
   : app.listen(port, onListen);

diff --git a/packages/remix-serve/index.ts b/packages/remix-serve/index.ts
@@ -3,16 +3,21 @@ import compression from "compression";
 import morgan from "morgan";
 import { createRequestHandler } from "@remix-run/express";
 
-export function createApp(buildPath: string, mode = "production") {
+export function createApp(
+  buildPath: string,
+  mode = "production",
+  publicPath = "/build/",
+  assetsBuildDirectory = "public/build/"
+) {
   let app = express();
 
   app.disable("x-powered-by");
 
   app.use(compression());
 
   app.use(
-    "/build",
-    express.static("public/build", { immutable: true, maxAge: "1y" })
+    publicPath,
+    express.static(assetsBuildDirectory, { immutable: true, maxAge: "1y" })
   );
 
   app.use(express.static("public", { maxAge: "1h" }));

diff --git a/packages/remix-server-runtime/build.ts b/packages/remix-server-runtime/build.ts
@@ -11,6 +11,8 @@ export interface ServerBuild {
   };
   routes: ServerRouteManifest;
   assets: AssetsManifest;
+  publicPath: string;
+  assetsBuildDirectory: string;
 }
 
 export interface HandleDocumentRequestFunction {