Fix port finder for MiniOxygen (#1267)

* Fix port finder for MiniOxygen * Changesets * Bump mini-oxygen with the fix
Shopify · Aug 25, 2023 · d67ce6a · d67ce6a
1 parent 423acee
commit d67ce6a
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 10 deletions.
diff --git a/.changeset/quick-starfishes-repeat.md b/.changeset/quick-starfishes-repeat.md
@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Fix development server port in some situations where it was set to a random number instead of the default 3000 or the `--port` flag value.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -38,7 +38,7 @@
     "@remix-run/dev": "1.19.1",
     "@shopify/cli-kit": "3.48.0",
     "@shopify/hydrogen-codegen": "^0.0.2",
-    "@shopify/mini-oxygen": "^2.1.1",
+    "@shopify/mini-oxygen": "^2.1.2",
     "ansi-escapes": "^6.2.0",
     "diff": "^5.1.0",
     "fast-glob": "^3.2.12",

diff --git a/packages/cli/src/commands/hydrogen/dev.ts b/packages/cli/src/commands/hydrogen/dev.ts
@@ -26,7 +26,6 @@ import {addVirtualRoutes} from '../../lib/virtual-routes.js';
 import {spawnCodegenProcess} from '../../lib/codegen.js';
 import {getAllEnvironmentVariables} from '../../lib/environment-variables.js';
 import {getConfig} from '../../lib/shopify-config.js';
-import {findPort} from '../../lib/find-port.js';
 import {setupLiveReload} from '../../lib/live-reload.js';
 import {checkRemixVersions} from '../../lib/remix-version-check.js';
 
@@ -159,7 +158,7 @@ async function runDev({
 
     miniOxygen = await startMiniOxygen({
       root,
-      port: await findPort(portFlag),
+      port: portFlag,
       watch: !liveReload,
       buildPathWorkerFile,
       buildPathClient,

diff --git a/packages/cli/src/commands/hydrogen/preview.ts b/packages/cli/src/commands/hydrogen/preview.ts
@@ -3,7 +3,6 @@ import {muteDevLogs} from '../../lib/log.js';
 import {getProjectPaths} from '../../lib/remix-config.js';
 import {commonFlags, DEFAULT_PORT} from '../../lib/flags.js';
 import {startMiniOxygen} from '../../lib/mini-oxygen.js';
-import {findPort} from '../../lib/find-port.js';
 
 export default class Preview extends Command {
   static description =
@@ -36,7 +35,7 @@ export async function runPreview({
 
   const miniOxygen = await startMiniOxygen({
     root,
-    port: await findPort(port),
+    port,
     buildPathClient,
     buildPathWorkerFile,
   });

diff --git a/packages/cli/src/lib/find-port.ts b/packages/cli/src/lib/find-port.ts
@@ -1,5 +1,11 @@
 import getPort, {portNumbers} from 'get-port';
 
+/**
+ *
+ * Finds an available port in the range of `portPreference` to `portPreference + range`.
+ * Note: do not use this utility to find a port for MiniOxygen since that will be
+ * handled by MiniOxygen itself. See https://github.com/Shopify/hydrogen/issues/1264
+ */
 export function findPort(portPreference: number, range = 100) {
   return getPort({
     port: portNumbers(portPreference, portPreference + range),