Skip to content

[chore] Make dev server ports configurable via PORT env var#2549

Merged
Will-Howard merged 1 commit into
masterfrom
wh-2547-configurable-dev-ports-2026-05
May 27, 2026
Merged

[chore] Make dev server ports configurable via PORT env var#2549
Will-Howard merged 1 commit into
masterfrom
wh-2547-configurable-dev-ports-2026-05

Conversation

@Will-Howard

@Will-Howard Will-Howard commented May 25, 2026

Copy link
Copy Markdown
Collaborator

Description

The start script in both apps/website and apps/storybook hardcoded the dev-server port (-p 8000 / -p 6006), so a second checkout/worktree couldn't run its own dev server without clashing on the port. This makes the port configurable via the PORT env var, keeping the current values as defaults.

Issue

Fixes #2547

Developer checklist

  • Front-end code follows Component Accessibility Checklist
  • Considered having snapshot tests and/or happy path functional tests
  • Considered adding Storybook stories

Screenshot

N/A

@coderabbitai

coderabbitai Bot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

The PR makes development server ports configurable by updating the start npm scripts in two applications. The Storybook application's script now uses the PORT environment variable (defaulting to 6006), and the website application's script similarly uses PORT (defaulting to 8000). This enables parallel development worktrees to run simultaneously on different ports without manual edits to package.json files.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: making dev server ports configurable via PORT environment variable.
Description check ✅ Passed The description covers the problem, solution, linked issue, and completes the developer checklist; all required sections are present.
Linked Issues check ✅ Passed The PR successfully implements all required objectives from issue #2547: both start scripts now respect PORT environment variable with appropriate defaults.
Out of Scope Changes check ✅ Passed All changes are directly related to making dev server ports configurable; no unrelated modifications are present in the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch wh-2547-configurable-dev-ports-2026-05

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Will-Howard Will-Howard temporarily deployed to wh-2547-configurable-dev-ports-2026-05 - bluedot-preview PR #2549 May 25, 2026 15:49 — with Render Destroyed
@Will-Howard Will-Howard temporarily deployed to wh-2547-configurable-dev-ports-2026-05 - bluedot-storybook-preview PR #2549 May 25, 2026 15:50 — with Render Destroyed
@Will-Howard

Copy link
Copy Markdown
Collaborator Author

@claude review

@claude

claude Bot commented May 25, 2026

Copy link
Copy Markdown

Claude finished @Will-Howard's task —— View job


Code Review: Make dev server ports configurable

Todo List:

  • Read modified package.json files to understand changes
  • Review repo guidelines and existing patterns
  • Analyze shell parameter expansion approach
  • Check for potential issues or improvements
  • Provide comprehensive review feedback

✅ Overall Assessment

This is a clean, well-implemented change that solves a real developer pain point. The solution is minimal, portable, and maintains backward compatibility perfectly.

📋 Changes Reviewed

Files Modified:

  • apps/website/package.json:7 - Changed "start": "next dev -p 8000""start": "next dev -p ${PORT:-8000}"
  • apps/storybook/package.json:6 - Changed "start": "storybook dev -p 6006""start": "storybook dev -p ${PORT:-6006}"

✅ Strengths

  1. Problem-Solution Fit: Directly addresses port conflicts when running multiple worktrees
  2. Backward Compatibility: Default behavior unchanged (npm run start still uses 8000/6006)
  3. POSIX Compliance: ${PORT:-default} syntax works across shells (bash, zsh, sh)
  4. Consistency: Both apps follow the same pattern
  5. Testing: Author verified both default and custom PORT scenarios locally

🔍 Technical Analysis

Shell Parameter Expansion:

  • ${PORT:-8000} expands to $PORT if set and non-empty, otherwise 8000
  • POSIX-compliant, works in npm's default script shell (/bin/sh)
  • Robust handling of unset variables

Existing Patterns:

  • Found similar parameter expansion used elsewhere in the codebase (connectDb.sh, getBluedotKeycloakTheme.sh)
  • However, discovered 9 other apps still hardcode port 8000 (apps/meet, apps/room, etc.)

📝 Minor Considerations

  1. Scope Question: While this PR is focused and correct, there are 9 other Next.js apps that could benefit from the same treatment:

    • apps/meet, apps/room, apps/speed-review, apps/course-demos, apps/availability, apps/editor, apps/frontend-example, apps/app-template

    However, this is not a blocker - the current scope makes sense as these are likely the two most commonly used in parallel development.

  2. Documentation: The approach is well-documented in the PR description. No additional docs needed.

🎯 Recommendation

✅ APPROVE - This change is ready to merge. It's a targeted fix that:

  • Solves the immediate problem
  • Follows good practices
  • Maintains compatibility
  • Is well-tested

The broader question of applying this pattern to other apps can be addressed separately if needed.


@Will-Howard Will-Howard marked this pull request as ready for review May 25, 2026 15:58
@greptile-apps

greptile-apps Bot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR makes the dev-server port configurable via a PORT environment variable in both apps/website and apps/storybook, keeping the existing defaults (8000 and 6006) when the variable is unset. The change uses POSIX shell default-value syntax (${PORT:-default}) inside package.json start scripts.

  • apps/website/package.json: next dev -p 8000next dev -p ${PORT:-8000}
  • apps/storybook/package.json: storybook dev -p 6006storybook dev -p ${PORT:-6006}
  • apps/meet/package.json and apps/editor/package.json still use hardcoded ports and would need the same treatment for full worktree-coexistence parity.

Confidence Score: 4/5

Safe to merge for Unix/macOS/Linux environments; the change is minimal and preserves existing defaults.

Both changes are small and correct on Unix-like systems. The ${PORT:-default} syntax is not understood by Windows cmd.exe, so developers running npm run start natively on Windows would see an invalid-port error. This is a real but narrowly-scoped limitation for a dev-only script in a Docker-centric project. No production behaviour is affected.

No files require special attention beyond the noted Windows shell-syntax concern in both package.json scripts.

Important Files Changed

Filename Overview
apps/website/package.json Replaces hardcoded -p 8000 with -p ${PORT:-8000} in the start script to allow port overrides via the PORT env var; uses POSIX shell default-value syntax.
apps/storybook/package.json Replaces hardcoded -p 6006 with -p ${PORT:-6006} in the start script; same POSIX shell default-value syntax as the website change.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[npm run start] --> B{PORT env var set?}
    B -- Yes --> C[Use PORT value]
    B -- No --> D[Use default port]
    D --> E1[website: 8000]
    D --> E2[storybook: 6006]
    C --> F[Start dev server on specified port]
    E1 --> F
    E2 --> F
    F --> G{OS?}
    G -- Unix/macOS/Linux --> H[Works correctly]
    G -- Windows cmd.exe --> I[Fails: literal string passed as port]
Loading

Reviews (1): Last reviewed commit: "[chore] Make dev server ports configurab..." | Re-trigger Greptile

Comment thread apps/website/package.json
"scripts": {
"postinstall": "shx cp -n .env.local.template .env.local",
"start": "next dev -p 8000",
"start": "next dev -p ${PORT:-8000}",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Windows incompatibility with ${PORT:-…} syntax

${PORT:-8000} is POSIX shell (bash/sh) parameter expansion. On Windows, npm scripts run through cmd.exe by default, which does not understand this syntax — it would be passed literally to next, resulting in an invalid port error. If any developer on the team uses Windows to run npm run start directly (outside Docker), the command will fail. A cross-platform alternative is to use cross-env with a wrapper script, or rely on Next.js's built-in PORT env-var support via next dev without -p and a documented default in .env.local.template. The same issue applies to apps/storybook/package.json.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (3)
apps/storybook/package.json (1)

6-6: 💤 Low value

Be aware: shell parameter expansion may not work on Windows.

The ${PORT:-6006} syntax is bash/sh-specific and won't work in Windows cmd.exe or PowerShell (it will work in Git Bash or WSL). If Windows developers are part of your target audience, consider using cross-env or a similar cross-platform solution.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/storybook/package.json` at line 6, The start script in package.json uses
shell-specific parameter expansion ("start": "storybook dev -p ${PORT:-6006}")
which fails on Windows; update the "start" script to use a cross-platform
approach (e.g., use cross-env or npm package config) so the PORT fallback works
on all OSes—locate the "start" script entry in package.json and replace the
bash-style "${PORT:-6006}" usage with a cross-platform pattern (e.g., read
process.env.PORT via cross-env or an npm script that sets PORT) ensuring
Storybook still listens on the fallback 6006 when PORT is unset.
apps/website/package.json (2)

7-7: 💤 Low value

Be aware: shell parameter expansion may not work on Windows.

The ${PORT:-8000} syntax is bash/sh-specific and won't work in Windows cmd.exe or PowerShell (it will work in Git Bash or WSL). If Windows developers are part of your target audience, consider using cross-env or a similar cross-platform solution.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/website/package.json` at line 7, The "start" script uses bash-only
parameter expansion ("${PORT:-8000}") which breaks on Windows; replace it with a
cross-platform approach by creating a small Node launcher (e.g.,
scripts/start.js) that reads process.env.PORT || 8000 and spawns "next dev -p
<port>" (or sets process.env.PORT and uses require('child_process').spawn to run
"next"), then update the package.json "start" script to "node
./scripts/start.js"; alternatively, install and use cross-env/cross-env-shell
and adjust the "start" script accordingly if you prefer that dependency.

7-7: ⚖️ Poor tradeoff

Next.js 15 next dev honours PORT; keep -p only for the repo-specific default.

Next.js 15’s next dev can read the port from the PORT environment variable (default is 3000). Your script’s -p ${PORT:-8000} is therefore mainly enforcing the required default of 8000 when PORT isn’t set. Consider simplifying by setting a default via env instead, e.g. PORT=${PORT:-8000} next dev.
https://vercel-next-js.mintlify.app/api-reference/cli/next-dev
[apps/website/package.json: line 7]

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/website/package.json` at line 7, The package.json "start" script
currently uses "next dev -p ${PORT:-8000}" which redundantly passes -p; instead
set the PORT env default and call next dev so Next.js reads it natively—update
the "start" script entry (in package.json) to export PORT with a default (e.g.
PORT=${PORT:-8000} next dev) and remove the -p flag so the Next.js CLI uses the
PORT env variable as intended.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/storybook/package.json`:
- Line 6: The start script in package.json uses shell-specific parameter
expansion ("start": "storybook dev -p ${PORT:-6006}") which fails on Windows;
update the "start" script to use a cross-platform approach (e.g., use cross-env
or npm package config) so the PORT fallback works on all OSes—locate the "start"
script entry in package.json and replace the bash-style "${PORT:-6006}" usage
with a cross-platform pattern (e.g., read process.env.PORT via cross-env or an
npm script that sets PORT) ensuring Storybook still listens on the fallback 6006
when PORT is unset.

In `@apps/website/package.json`:
- Line 7: The "start" script uses bash-only parameter expansion
("${PORT:-8000}") which breaks on Windows; replace it with a cross-platform
approach by creating a small Node launcher (e.g., scripts/start.js) that reads
process.env.PORT || 8000 and spawns "next dev -p <port>" (or sets
process.env.PORT and uses require('child_process').spawn to run "next"), then
update the package.json "start" script to "node ./scripts/start.js";
alternatively, install and use cross-env/cross-env-shell and adjust the "start"
script accordingly if you prefer that dependency.
- Line 7: The package.json "start" script currently uses "next dev -p
${PORT:-8000}" which redundantly passes -p; instead set the PORT env default and
call next dev so Next.js reads it natively—update the "start" script entry (in
package.json) to export PORT with a default (e.g. PORT=${PORT:-8000} next dev)
and remove the -p flag so the Next.js CLI uses the PORT env variable as
intended.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bab789c1-d75e-4aef-97f0-7ea4d57401a7

📥 Commits

Reviewing files that changed from the base of the PR and between 6fedbe7 and be2e605.

📒 Files selected for processing (2)
  • apps/storybook/package.json
  • apps/website/package.json

@Will-Howard Will-Howard merged commit 5249e79 into master May 27, 2026
10 checks passed
@Will-Howard Will-Howard deleted the wh-2547-configurable-dev-ports-2026-05 branch May 27, 2026 17:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make dev server ports configurable for parallel worktrees

1 participant