From 0e53798e8fbd42deb429edfa49755a24ae642f04 Mon Sep 17 00:00:00 2001
From: Iago Dahlem Lorensini <iagodahlemlorensini@gmail.com>
Date: Wed, 27 May 2026 16:23:17 -0300
Subject: [PATCH] chore(repo): allow PORT and UI_PORT overrides for sandbox dev
 servers

Two coupled issues prevented overriding the sandbox dev server ports:

1. Turbo 2.x runs in strict env mode by default, so env vars not listed
   in globalEnv/globalPassThroughEnv never reach package scripts. PORT
   and UI_PORT were both being filtered out before clerk-js and @clerk/ui
   could see them. Added both to globalPassThroughEnv.

2. The @clerk/ui sandbox serve script and the clerk-js sandbox template's
   uiScriptUrl were both hardcoded to localhost:4011. Parameterized with
   UI_PORT (defaulting to 4011) so PORT/UI_PORT can be set independently
   when running multiple sandboxes in parallel.

After this change:

    PORT=4001 UI_PORT=4012 pnpm dev:sandbox

starts clerk-js on 4001 and @clerk/ui on 4012, with the sandbox template
loading ui.browser.js from the matching UI_PORT.
---
 .changeset/sandbox-port-env-vars.md | 2 ++
 packages/clerk-js/rspack.config.js  | 2 +-
 packages/ui/package.json            | 2 +-
 turbo.json                          | 4 +++-
 4 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/sandbox-port-env-vars.md

diff --git a/.changeset/sandbox-port-env-vars.md b/.changeset/sandbox-port-env-vars.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/sandbox-port-env-vars.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js
index d0d50fc816e..4e9645bec4d 100644
--- a/packages/clerk-js/rspack.config.js
+++ b/packages/clerk-js/rspack.config.js
@@ -434,7 +434,7 @@ const devConfig = ({ mode, env }) => {
             template: './sandbox/template.html',
             inject: false,
             templateParameters: {
-              uiScriptUrl: 'http://localhost:4011/npm/ui.browser.js',
+              uiScriptUrl: `http://localhost:${process.env.UI_PORT || 4011}/npm/ui.browser.js`,
             },
           }),
       ].filter(Boolean),
diff --git a/packages/ui/package.json b/packages/ui/package.json
index cb0ff8d414b..31bbab266de 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -82,7 +82,7 @@
     "dev": "rspack serve --config rspack.config.js",
     "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4011}",
     "dev:sandbox": "pnpm -w dev:sandbox",
-    "dev:sandbox:serve": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4011",
+    "dev:sandbox:serve": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${UI_PORT:-4011}",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint:attw": "attw --pack . --exclude-entrypoints themes/shadcn.css --profile esm-only",
diff --git a/turbo.json b/turbo.json
index 0c18ed94be5..45f99b43aa8 100644
--- a/turbo.json
+++ b/turbo.json
@@ -36,7 +36,9 @@
     "GITHUB_TOKEN",
     "ACTIONS_RUNNER_DEBUG",
     "ACTIONS_STEP_DEBUG",
-    "VERCEL_AUTOMATION_BYPASS_SECRET"
+    "VERCEL_AUTOMATION_BYPASS_SECRET",
+    "PORT",
+    "UI_PORT"
   ],
   "tasks": {
     "build": {