feat!(serve): pick an open port when 3000 is already taken (#7278)

.changeset/beige-pugs-drive.md

@@ -0,0 +1,8 @@
+---
+"@remix-run/serve": major
+---
+
+`remix-serve` picks an open port if 3000 is taken
+
+- If `PORT` env var is set, `remix-serve` will use that port
+- Otherwise, `remix-serve` picks an open port (3000 unless that is already taken)

packages/remix-serve/cli.ts

@@ -14,6 +14,7 @@ import compression from "compression";
 import express from "express";
 import morgan from "morgan";
 import sourceMapSupport from "source-map-support";
+import getPort from "get-port";
 
 process.env.NODE_ENV = process.env.NODE_ENV ?? "production";
 
@@ -22,9 +23,15 @@ installGlobals();
 
 run();
 
+function parseNumber(raw?: string) {
+  if (raw === undefined) return undefined;
+  let maybe = Number(raw);
+  if (Number.isNaN(maybe)) return undefined;
+  return maybe;
+}
+
 async function run() {
-  let port = process.env.PORT ? Number(process.env.PORT) : 3000;
-  if (Number.isNaN(port)) port = 3000;
+  let port = parseNumber(process.env.PORT) ?? (await getPort({ port: 3000 }));
 
   let buildPathArg = process.argv[2];
 

packages/remix-serve/package.json

@@ -20,6 +20,7 @@
     "chokidar": "^3.5.3",
     "compression": "^1.7.4",
     "express": "^4.17.1",
+    "get-port": "5.1.1",
     "morgan": "^1.10.0",
     "source-map-support": "^0.5.21"
   },

yarn.lock

@@ -6083,7 +6083,7 @@ get-package-type@^0.1.0:
   resolved "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
-get-port@^5.1.1:
+get-port@5.1.1, get-port@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
   integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==