fix(dev): serve any non-Remix assets from public/ (#6279)

remix-run · May 2, 2023 · 0e2763f · 0e2763f
1 parent 2718178
commit 0e2763f
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 2 deletions.
diff --git a/.changeset/ninety-flies-allow.md b/.changeset/ninety-flies-allow.md
@@ -0,0 +1,7 @@
+---
+"@remix-run/dev": patch
+---
+
+- Fix public asset serving for non-Remix assets in the new dev server
+- Add `--public-directory` / `unstable_dev.publicDirectory` option for configuring local directory for serving non-Remix assets like fonts
+- Fix `svg` serving for new dev server
diff --git a/integration/hmr-log-test.ts b/integration/hmr-log-test.ts
@@ -230,7 +230,7 @@ test("HMR", async ({ page }) => {
     }
   });
 
-  let portRange = makeRange(3080, 3099);
+  let portRange = makeRange(4080, 4099);
   let appServerPort = await getPort({ port: portRange });
   let httpPort = await getPort({ port: portRange });
   let webSocketPort = await getPort({ port: portRange });

diff --git a/packages/remix-dev/__tests__/cli-test.ts b/packages/remix-dev/__tests__/cli-test.ts
@@ -122,6 +122,7 @@ describe("remix CLI", () => {
             --http-host         HTTP(S) host for the dev server. Default: localhost
             --http-port         HTTP(S) port for the dev server. Default: any open port
             --no-restart        Do not restart the app server when rebuilds occur.
+            --public-directory  Path to public assets directory relative to Remix project root. Default: public
             --websocket-port    Websocket port for the dev server. Default: any open port
           \`init\` Options:
             --no-delete         Skip deleting the \`remix.init\` script

diff --git a/packages/remix-dev/cli/commands.ts b/packages/remix-dev/cli/commands.ts
@@ -224,6 +224,7 @@ export async function dev(
     httpHost?: string;
     httpPort?: number;
     restart?: boolean;
+    publicDirectory?: string;
     websocketPort?: number;
   } = {}
 ) {
@@ -515,6 +516,7 @@ let resolveDevBuild = async (
 
 type DevServeFlags = DevBuildFlags & {
   command: string;
+  publicDirectory: string;
   restart: boolean;
 };
 let resolveDevServe = async (
@@ -552,6 +554,12 @@ let resolveDevServe = async (
       process.exit(1);
     }
   }
+
+  let publicDirectory =
+    flags.publicDirectory ??
+    (dev === true ? undefined : dev.publicDirectory) ??
+    "public";
+
   let restart =
     flags.restart ?? (dev === true ? undefined : dev.restart) ?? true;
 
@@ -560,6 +568,7 @@ let resolveDevServe = async (
     httpScheme,
     httpHost,
     httpPort,
+    publicDirectory,
     websocketPort,
     restart,
   };

diff --git a/packages/remix-dev/cli/run.ts b/packages/remix-dev/cli/run.ts
@@ -48,6 +48,7 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
     --http-host         HTTP(S) host for the dev server. Default: localhost
     --http-port         HTTP(S) port for the dev server. Default: any open port
     --no-restart        Do not restart the app server when rebuilds occur.
+    --public-directory  Path to public assets directory relative to Remix project root. Default: public
     --websocket-port    Websocket port for the dev server. Default: any open port
   \`init\` Options:
     --no-delete         Skip deleting the \`remix.init\` script
@@ -188,6 +189,7 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       "--http-host": String,
       "--http-port": Number,
       "--no-restart": Boolean,
+      "--public-directory": String,
       "--websocket-port": Number,
     },
     {
@@ -225,6 +227,10 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     flags.httpPort = flags["http-port"];
     delete flags["http-port"];
   }
+  if (flags["public-directory"]) {
+    flags.publicDirectory = flags["public-directory"];
+    delete flags["public-directory"];
+  }
   if (flags["websocket-port"]) {
     flags.websocketPort = flags["websocket-port"];
     delete flags["websocket-port"];

diff --git a/packages/remix-dev/compiler/js/compiler.ts b/packages/remix-dev/compiler/js/compiler.ts
@@ -202,7 +202,11 @@ const createEsbuildConfig = (
     platform: "browser",
     format: "esm",
     external: getExternals(ctx.config),
-    loader: loaders,
+    loader: {
+      ...loaders,
+      // in development, use dataurls for svgs so that `<use href={mysvg} />` works across different origins
+      ".svg": ctx.options.mode === "development" ? "dataurl" : loaders[".svg"],
+    },
     bundle: true,
     logLevel: "silent",
     splitting: true,

diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts
@@ -45,6 +45,7 @@ type Dev = {
   httpPort?: number;
   websocketPort?: number;
   restart?: boolean;
+  publicDirectory?: string;
 };
 
 interface FutureConfig {

diff --git a/packages/remix-dev/devServer_unstable/index.ts b/packages/remix-dev/devServer_unstable/index.ts
@@ -54,6 +54,7 @@ export let serve = async (
     httpScheme: string;
     httpHost: string;
     httpPort: number;
+    publicDirectory: string;
     websocketPort: number;
     restart: boolean;
   }
@@ -196,6 +197,7 @@ export let serve = async (
         maxAge: "1y",
       })
     )
+    .use(express.static(options.publicDirectory, { maxAge: "1h" }))
 
     // handle `broadcastDevReady` messages
     .use(express.json())