From 0e2763f7bc0404ba525c5945d0adddb70fac4b98 Mon Sep 17 00:00:00 2001 From: Pedro Cattori Date: Tue, 2 May 2023 17:24:43 -0400 Subject: [PATCH] fix(dev): serve any non-Remix assets from `public/` (#6279) --- .changeset/ninety-flies-allow.md | 7 +++++++ integration/hmr-log-test.ts | 2 +- packages/remix-dev/__tests__/cli-test.ts | 1 + packages/remix-dev/cli/commands.ts | 9 +++++++++ packages/remix-dev/cli/run.ts | 6 ++++++ packages/remix-dev/compiler/js/compiler.ts | 6 +++++- packages/remix-dev/config.ts | 1 + packages/remix-dev/devServer_unstable/index.ts | 2 ++ 8 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 .changeset/ninety-flies-allow.md diff --git a/.changeset/ninety-flies-allow.md b/.changeset/ninety-flies-allow.md new file mode 100644 index 00000000000..c7787534a7c --- /dev/null +++ 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 index ad3bd40933d..b873ab5253e 100644 --- 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 index ba57c100664..59e5dcb9350 100644 --- 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 index 17dec451413..ece1033fc71 100644 --- 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 index c4448f122ca..ff5000c283d 100644 --- 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 index e2bed448f27..cf96fc0d4e9 100644 --- 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 `` 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 index e5c7a3924a7..8f427f9dc80 100644 --- 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 index 183263a9642..89accea8855 100644 --- 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())