fix(dev): define process.env.REMIX_DEV_HTTP_PORT in server build (#6158)

Author: pcattori

packages/remix-dev/cli/commands.ts

@@ -24,6 +24,7 @@ import { CodemodError } from "../codemod/utils/error";
 import { TaskError } from "../codemod/utils/task";
 import { transpile as convertFileToJS } from "./useJavascript";
 import { warnOnce } from "../warnOnce";
+import type { Options } from "../compiler/options";
 
 export async function create({
   appTemplate,
@@ -169,24 +170,27 @@ export async function build(
 
   let start = Date.now();
   let config = await readConfig(remixRoot);
+  let options: Options = {
+    mode,
+    sourcemap,
+    onWarning: warnOnce,
+  };
+  if (config.future.unstable_dev) {
+    let dev = await resolveDev(config.future.unstable_dev);
+    options.devHttpPort = dev.httpPort;
+    options.devWebsocketPort = dev.websocketPort;
+  }
+
   fse.emptyDirSync(config.assetsBuildDirectory);
-  await compiler
-    .build({
-      config,
-      options: {
-        mode,
-        sourcemap,
-        onWarning: warnOnce,
-      },
-    })
-    .catch((thrown) => {
-      compiler.logThrown(thrown);
-      process.exit(1);
-    });
+  await compiler.build({ config, options }).catch((thrown) => {
+    compiler.logThrown(thrown);
+    process.exit(1);
+  });
 
   console.log(`built in ${prettyMs(Date.now() - start)}`);
 }
 
+// TODO: replace watch in v2
 export async function watch(
   remixRootOrConfig: string | RemixConfig,
   modeArg?: string
@@ -232,28 +236,7 @@ export async function dev(
   }
 
   let { unstable_dev } = config.future;
-
-  let command =
-    flags.command ?? (unstable_dev === true ? undefined : unstable_dev.command);
-  let httpPort =
-    flags.httpPort ??
-    (unstable_dev === true ? undefined : unstable_dev.httpPort) ??
-    (await findPort());
-  let websocketPort =
-    flags.websocketPort ??
-    (unstable_dev === true ? undefined : unstable_dev.websocketPort) ??
-    (await findPort());
-  let restart =
-    flags.restart ??
-    (unstable_dev === true ? undefined : unstable_dev.restart) ??
-    true;
-
-  await devServer_unstable.serve(config, {
-    command,
-    httpPort,
-    websocketPort,
-    restart,
-  });
+  await devServer_unstable.serve(config, await resolveDev(unstable_dev, flags));
 }
 
 export async function codemod(
@@ -481,3 +464,37 @@ let parseMode = (
 };
 
 let findPort = async () => getPort({ port: makeRange(3001, 3100) });
+
+let resolveDev = async (
+  dev: Exclude<RemixConfig["future"]["unstable_dev"], false>,
+  flags: {
+    command?: string;
+    httpPort?: number;
+    restart?: boolean;
+    websocketPort?: number;
+  } = {}
+): Promise<{
+  command?: string;
+  httpPort: number;
+  restart: boolean;
+  websocketPort: number;
+}> => {
+  let command = flags.command ?? (dev === true ? undefined : dev.command);
+  let httpPort =
+    flags.httpPort ??
+    (dev === true ? undefined : dev.httpPort) ??
+    (await findPort());
+  let websocketPort =
+    flags.websocketPort ??
+    (dev === true ? undefined : dev.websocketPort) ??
+    (await findPort());
+  let restart =
+    flags.restart ?? (dev === true ? undefined : dev.restart) ?? true;
+
+  return {
+    command,
+    httpPort,
+    websocketPort,
+    restart,
+  };
+};

packages/remix-dev/compiler/options.ts

@@ -2,7 +2,10 @@ type Mode = "development" | "production" | "test";
 
 export type Options = {
   mode: Mode;
-  liveReloadPort?: number;
   sourcemap: boolean;
   onWarning?: (message: string, key: string) => void;
+
+  // TODO: required in v2
+  devHttpPort?: number;
+  devWebsocketPort?: number;
 };

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

@@ -98,9 +98,13 @@ const createEsbuildConfig = (
     publicPath: ctx.config.publicPath,
     define: {
       "process.env.NODE_ENV": JSON.stringify(ctx.options.mode),
+      // TODO: remove REMIX_DEV_SERVER_WS_PORT in v2
       "process.env.REMIX_DEV_SERVER_WS_PORT": JSON.stringify(
         ctx.config.devServerPort
       ),
+      "process.env.REMIX_DEV_HTTP_PORT": JSON.stringify(
+        ctx.options.devHttpPort ?? ""
+      ),
     },
     jsx: "automatic",
     jsxDev: ctx.options.mode !== "production",

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

@@ -51,9 +51,9 @@ ${Object.keys(config.routes)
   export const publicPath = ${JSON.stringify(config.publicPath)};
   export const entry = { module: entryServer };
   ${
-    options.liveReloadPort
+    options.devWebsocketPort
       ? `export const dev = ${JSON.stringify({
-          liveReloadPort: options.liveReloadPort,
+          websocketPort: options.devWebsocketPort,
         })}`
       : ""
   }

packages/remix-dev/devServer_unstable/index.ts

@@ -51,9 +51,10 @@ export let serve = async (
       config,
       options: {
         mode: "development",
-        liveReloadPort: options.websocketPort, // TODO: rename liveReloadPort
         sourcemap: true,
         onWarning: warnOnce,
+        devHttpPort: options.httpPort,
+        devWebsocketPort: options.websocketPort,
       },
     },
     {

packages/remix-server-runtime/build.ts

@@ -14,7 +14,7 @@ export interface ServerBuild {
   publicPath: string;
   assetsBuildDirectory: string;
   future: FutureConfig;
-  dev?: { liveReloadPort: number };
+  dev?: { websocketPort: number };
 }
 
 export interface HandleDocumentRequestFunction {

packages/remix-server-runtime/serverHandoff.ts

@@ -20,7 +20,7 @@ export function createServerHandoffString<T>(serverHandoff: {
   // we'd end up including duplicate info
   state: ValidateShape<T, HydrationState>;
   future: FutureConfig;
-  dev?: { liveReloadPort: number };
+  dev?: { websocketPort: number };
 }): string {
   // Uses faster alternative of jsesc to escape data returned from the loaders.
   // This string is inserted directly into the HTML in the `<Scripts>` element.