fix(dev): statically serve built assets from dev server (#6173)

Author: pcattori

packages/remix-dev/__tests__/cli-test.ts

@@ -115,6 +115,14 @@ describe("remix CLI", () => {
           \`dev\` Options:
             --debug             Attach Node.js inspector
             --port, -p          Choose the port from which to run your app
+
+            [unstable_dev]
+            --command, -c       Command used to run your app server
+            --http-scheme       HTTP(S) scheme for the dev server. Default: http
+            --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.
+            --websocket-port    Websocket port for the dev server. Default: any open port
           \`init\` Options:
             --no-delete         Skip deleting the \`remix.init\` script
           \`routes\` Options:

packages/remix-dev/cli/commands.ts

@@ -177,7 +177,7 @@ export async function build(
   };
   if (config.future.unstable_dev) {
     let dev = await resolveDev(config.future.unstable_dev);
-    options.devHttpPort = dev.httpPort;
+    options.devHttpOrigin = dev.httpOrigin;
     options.devWebsocketPort = dev.websocketPort;
   }
 
@@ -212,7 +212,11 @@ export async function dev(
   flags: {
     debug?: boolean;
     port?: number; // TODO: remove for v2
+
+    // unstable_dev
     command?: string;
+    httpScheme?: string;
+    httpHost?: string;
     httpPort?: number;
     restart?: boolean;
     websocketPort?: number;
@@ -466,17 +470,27 @@ let resolveDev = async (
   dev: Exclude<RemixConfig["future"]["unstable_dev"], false>,
   flags: {
     command?: string;
+    httpScheme?: string;
+    httpHost?: string;
     httpPort?: number;
     restart?: boolean;
     websocketPort?: number;
   } = {}
 ): Promise<{
   command?: string;
-  httpPort: number;
+  httpOrigin: {
+    scheme: string;
+    host: string;
+    port: number;
+  };
   restart: boolean;
   websocketPort: number;
 }> => {
   let command = flags.command ?? (dev === true ? undefined : dev.command);
+  let httpScheme =
+    flags.httpScheme ?? (dev === true ? undefined : dev.httpScheme) ?? "http";
+  let httpHost =
+    flags.httpHost ?? (dev === true ? undefined : dev.httpHost) ?? "localhost";
   let httpPort =
     flags.httpPort ??
     (dev === true ? undefined : dev.httpPort) ??
@@ -490,7 +504,11 @@ let resolveDev = async (
 
   return {
     command,
-    httpPort,
+    httpOrigin: {
+      scheme: httpScheme,
+      host: httpHost,
+      port: httpPort,
+    },
     websocketPort,
     restart,
   };

packages/remix-dev/cli/run.ts

@@ -41,6 +41,14 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
   \`dev\` Options:
     --debug             Attach Node.js inspector
     --port, -p          Choose the port from which to run your app
+
+    [unstable_dev]
+    --command, -c       Command used to run your app server
+    --http-scheme       HTTP(S) scheme for the dev server. Default: http
+    --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.
+    --websocket-port    Websocket port for the dev server. Default: any open port
   \`init\` Options:
     --no-delete         Skip deleting the \`remix.init\` script
   \`routes\` Options:
@@ -151,14 +159,11 @@ export async function run(argv: string[] = process.argv.slice(2)) {
 
   let args = arg(
     {
-      "--command": String,
-      "-c": "--command",
       "--debug": Boolean,
       "--no-delete": Boolean,
       "--dry": Boolean,
       "--force": Boolean,
       "--help": Boolean,
-      "--http-port": Number,
       "-h": "--help",
       "--install": Boolean,
       "--no-install": Boolean,
@@ -168,15 +173,21 @@ export async function run(argv: string[] = process.argv.slice(2)) {
       "--port": Number,
       "-p": "--port",
       "--remix-version": String,
-      "--restart": Boolean,
-      "--no-restart": Boolean,
       "--sourcemap": Boolean,
       "--template": String,
       "--token": String,
       "--typescript": Boolean,
       "--no-typescript": Boolean,
       "--version": Boolean,
       "-v": "--version",
+
+      // dev server
+      "--command": String,
+      "-c": "--command",
+      "--http-scheme": String,
+      "--http-host": String,
+      "--http-port": Number,
+      "--no-restart": Boolean,
       "--websocket-port": Number,
     },
     {
@@ -202,6 +213,14 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     return;
   }
 
+  if (flags["http-scheme"]) {
+    flags.httpScheme = flags["http-scheme"];
+    delete flags["http-scheme"];
+  }
+  if (flags["http-host"]) {
+    flags.httpHost = flags["http-host"];
+    delete flags["http-host"];
+  }
   if (flags["http-port"]) {
     flags.httpPort = flags["http-port"];
     delete flags["http-port"];

packages/remix-dev/compiler/options.ts

@@ -6,6 +6,10 @@ export type Options = {
   onWarning?: (message: string, key: string) => void;
 
   // TODO: required in v2
-  devHttpPort?: number;
+  devHttpOrigin?: {
+    scheme: string;
+    host: string;
+    port: number;
+  };
   devWebsocketPort?: number;
 };

packages/remix-dev/compiler/server/compiler.ts

@@ -102,8 +102,8 @@ const createEsbuildConfig = (
       "process.env.REMIX_DEV_SERVER_WS_PORT": JSON.stringify(
         ctx.config.devServerPort
       ),
-      "process.env.REMIX_DEV_HTTP_PORT": JSON.stringify(
-        ctx.options.devHttpPort ?? ""
+      "process.env.REMIX_DEV_HTTP_ORIGIN": JSON.stringify(
+        ctx.options.devHttpOrigin ?? "" // TODO: remove nullish check in v2
       ),
     },
     jsx: "automatic",

packages/remix-dev/config.ts

@@ -41,6 +41,8 @@ type Dev = {
   port?: number; // TODO: remove in v2
 
   command?: string;
+  httpScheme?: string;
+  httpHost?: string;
   httpPort?: number;
   websocketPort?: number;
   restart?: boolean;

packages/remix-dev/devServer_unstable/index.ts

@@ -7,18 +7,43 @@ import express from "express";
 import * as Channel from "../channel";
 import { type Manifest } from "../manifest";
 import * as Compiler from "../compiler";
-import { type RemixConfig } from "../config";
+import { readConfig, type RemixConfig } from "../config";
 import { loadEnv } from "./env";
 import * as Socket from "./socket";
 import * as HMR from "./hmr";
 import { warnOnce } from "../warnOnce";
 import { detectPackageManager } from "../cli/detectPackageManager";
 
+type Origin = {
+  scheme: string;
+  host: string;
+  port: number;
+};
+
+let stringifyOrigin = (o: Origin) => `${o.scheme}://${o.host}:${o.port}`;
+
+let patchPublicPath = (
+  config: RemixConfig,
+  devHttpOrigin: Origin
+): RemixConfig => {
+  // set public path to point to dev server
+  // so that browser asks the dev server for assets
+  return {
+    ...config,
+    // dev server has its own origin, to `/build/` path will not cause conflicts with app server routes
+    publicPath: stringifyOrigin(devHttpOrigin) + "/build/",
+  };
+};
+
 export let serve = async (
   initialConfig: RemixConfig,
   options: {
     command?: string;
-    httpPort: number;
+    httpOrigin: {
+      scheme: string;
+      host: string;
+      port: number;
+    };
     websocketPort: number;
     restart: boolean;
   }
@@ -42,23 +67,27 @@ export let serve = async (
       env: {
         NODE_ENV: "development",
         PATH: `${bin}:${process.env.PATH}`,
-        REMIX_DEV_HTTP_PORT: String(options.httpPort),
+        REMIX_DEV_HTTP_ORIGIN: stringifyOrigin(options.httpOrigin),
       },
     });
   };
 
   let dispose = await Compiler.watch(
     {
-      config: initialConfig,
+      config: patchPublicPath(initialConfig, options.httpOrigin),
       options: {
         mode: "development",
         sourcemap: true,
         onWarning: warnOnce,
-        devHttpPort: options.httpPort,
+        devHttpOrigin: options.httpOrigin,
         devWebsocketPort: options.websocketPort,
       },
     },
     {
+      reloadConfig: async (root) => {
+        let config = await readConfig(root);
+        return patchPublicPath(config, options.httpOrigin);
+      },
       onBuildStart: (ctx) => {
         state.buildHashChannel?.err();
         clean(ctx.config);
@@ -110,6 +139,20 @@ export let serve = async (
   );
 
   let httpServer = express()
+    // statically serve built assets
+    .use((_, res, next) => {
+      res.header("Access-Control-Allow-Origin", "*");
+      next();
+    })
+    .use(
+      "/build",
+      express.static(initialConfig.assetsBuildDirectory, {
+        immutable: true,
+        maxAge: "1y",
+      })
+    )
+
+    // handle `devReady` messages
     .use(express.json())
     .post("/ping", (req, res) => {
       let { buildHash } = req.body;
@@ -122,8 +165,8 @@ export let serve = async (
       }
       res.sendStatus(200);
     })
-    .listen(options.httpPort, () => {
-      console.log(`dev server listening on port ${options.httpPort}`);
+    .listen(options.httpOrigin.port, () => {
+      console.log("Remix dev server ready");
     });
 
   return new Promise(() => {}).finally(async () => {

packages/remix-server-runtime/dev.ts

@@ -1,25 +1,17 @@
 import type { ServerBuild } from "./build";
 
-export let devReady = (
-  build: ServerBuild,
-  options: {
-    scheme?: string;
-    host?: string;
-    port?: number;
-  } = {}
-) => {
-  let scheme = options.scheme ?? "http";
-  let host = options.host ?? "localhost";
-  let port = options.port ?? Number(process.env.REMIX_DEV_HTTP_PORT);
-  if (!port) throw Error("Dev server port not set");
-  if (isNaN(port))
-    throw Error(
-      `Dev server port must be a number. Got: ${JSON.stringify(port)}`
-    );
+export let devReady = (build: ServerBuild, origin?: string) => {
+  origin ??= process.env.REMIX_DEV_HTTP_ORIGIN;
+  if (!origin) throw Error("Dev server origin not set");
 
-  fetch(`${scheme}://${host}:${port}/ping`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ buildHash: build.assets.version }),
-  });
+  try {
+    fetch(`${origin}/ping`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ buildHash: build.assets.version }),
+    });
+  } catch (error) {
+    console.error(`Could not reach Remix dev server at ${origin}`);
+    throw error;
+  }
 };