fix(dev): dynamic, configurable unstable_dev port

remix-run · Feb 9, 2023 · 797792c · 797792c
1 parent d7e9b60
commit 797792c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/packages/remix-dev/compiler/plugins/hmrPlugin.ts b/packages/remix-dev/compiler/plugins/hmrPlugin.ts
@@ -106,7 +106,7 @@ declare global {
 function remixLiveReloadConnect(config) {
   let protocol = location.protocol === "https:" ? "wss:" : "ws:";
   let host = location.hostname;
-  let port = process.env.REMIX_DEV_SERVER_WS_PORT;
+  let port = window.__remixContext.dev.liveReloadPort;
   let socketPath = protocol + "//" + host + ":" + port + "/socket";
   let ws = new WebSocket(socketPath);
   ws.onmessage = async (event) => {

diff --git a/packages/remix-dev/devServer2.ts b/packages/remix-dev/devServer2.ts
@@ -35,7 +35,7 @@ let findPort = async (portPreference?: number) =>
       // prettier-ignore
       portPreference ? Number(portPreference) :
         process.env.PORT ? Number(process.env.PORT) :
-          makeRange(8002, 8100),
+          makeRange(3001, 3100),
   });
 
 let fetchAssetsManifest = async (
@@ -54,16 +54,12 @@ let fetchAssetsManifest = async (
 
 let resolveDev = (
   dev: RemixConfig["future"]["unstable_dev"],
-  flags: { port?: number; appServerPort?: number },
-  fallbackPort = 8002
+  flags: { port?: number; appServerPort?: number }
 ) => {
   if (dev === false)
     throw Error("The new dev server requires 'unstable_dev' to be set");
 
-  let port = fallbackPort;
-  // if (typeof flags.port === "number") {
-  //   port = flags.port;
-  // }
+  let port = flags.port ?? (dev === true ? undefined : dev.port);
 
   let appServerPort =
     flags.appServerPort ?? (dev === true || dev.appServerPort == undefined)
@@ -93,7 +89,8 @@ export let serve = async (
   clean(config);
   await loadEnv(config.rootDirectory);
 
-  let dev = resolveDev(config.future.unstable_dev, flags, config.devServerPort);
+  let dev = resolveDev(config.future.unstable_dev, flags);
+  console.log({ dev });
 
   let host = getHost();
   let appServerOrigin = `http://${host ?? "localhost"}:${dev.appServerPort}`;
@@ -112,11 +109,12 @@ export let serve = async (
   };
 
   // watch and live reload on rebuilds
-  let socket = LiveReload.serve({ port: dev.port });
+  let port = await findPort(dev.port);
+  let socket = LiveReload.serve({ port });
   let prevResult: Compiler.CompileResult | undefined = undefined;
   let dispose = await Compiler.watch(config, {
     mode: "development",
-    liveReloadPort: dev.port,
+    liveReloadPort: port,
     onInitialBuild: (durationMs, result) => {
       info(`Built in ${prettyMs(durationMs)}`);
       prevResult = result;