Initiate: Fix used port flag handling

[ndelangen]

What I did

@yannbf found out that the previous fix causes this to happen:

I'm trying to fix this, so the existing flag gets replaced, if it's there, and the shorthand is always used for consistency

I'm releasing a canary of this, to test it.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Ensure you have a storybook running on the default port 6006, then run npx storybook@next init.

You should see that storybook starts without asking you for which port, and it should start on the next available port automatically.

I've manually tested this.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-33544-sha-f7e9934d. Try it out in a new sandbox by running npx storybook@0.0.0-pr-33544-sha-f7e9934d sandbox or in an existing project with npx storybook@0.0.0-pr-33544-sha-f7e9934d upgrade.

More information

Published version	0.0.0-pr-33544-sha-f7e9934d
Triggered by	@ndelangen
Repository	storybookjs/storybook
Branch	norbert/more-fallbacks-to-init-port-fix
Commit	f7e9934d
Datetime	Thu Jan 15 08:53:51 UTC 2026 (1768467231)
Workflow run	21025302565

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=33544

Summary by CodeRabbit

• Bug Fixes
  • Improved port flag handling in Storybook development startup. The dev server now properly detects and updates existing port configurations instead of unconditionally appending duplicate port flags.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f7e9934

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	9m 20s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-15 09:03:28 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

The change refactors port flag handling in Storybook dev initialization. Instead of unconditionally appending a --port flag when an alternative port is detected, the logic now searches for existing port flags, adding a -p flag if none exists or updating an existing port flag to use the -p format.

Changes

Cohort / File(s)	Summary
Port flag management refactor code/lib/create-storybook/src/initiate.ts	Changed from appending --port=<port> to intelligently managing -p flags: locates existing port flags and either inserts a new -p <port> flag or updates an existing one based on detection logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• storybookjs/storybook#33166: Modifies argument handling and flag insertion in the same runStorybookDev function within initiate.ts.
• storybookjs/storybook#32929: Changes Storybook dev command construction and process spawning in the same file.
• storybookjs/storybook#33532: Updates port detection and port flag passing logic within initiate.ts for Storybook dev invocation.

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

code/lib/create-storybook/src/initiate.ts (1)

204-210: The else if branch is unreachable dead code.

The flags array is initialized as empty on line 179, and only --silent, --, and --initial-path=... are added before line 204. None of these match -p , so portFlag will always be -1, making the else if branch on lines 208-209 unreachable.

If the intent was to detect and replace an existing port flag from storybookCommand (e.g., if the generator produced a command with a built-in port), the current logic wouldn't catch it since only flags is checked, not storybookCommand.

Consider simplifying to remove the dead branch, or if existing port flags in storybookCommand need handling, search that string instead.

♻️ Suggested simplification (if no external port flags need handling)

-    const portFlag = flags.findIndex((flag) => flag.startsWith('-p '));
-
-    if (useAlternativePort && portFlag === -1) {
-      flags.push(`-p ${availablePort}`);
-    } else if (useAlternativePort && portFlag !== -1) {
-      flags[portFlag] = `-p ${availablePort}`;
+    if (useAlternativePort) {
+      flags.push(`-p ${availablePort}`);
     }

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3de4ed1 and f7e9934.

📒 Files selected for processing (1)

• code/lib/create-storybook/src/initiate.ts

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

• code/lib/create-storybook/src/initiate.ts

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

• code/lib/create-storybook/src/initiate.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

• code/lib/create-storybook/src/initiate.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/lib/create-storybook/src/initiate.ts

code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

• code/lib/create-storybook/src/initiate.ts

🧠 Learnings (1)

📚 Learning: 2025-11-05T09:38:47.712Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

• code/lib/create-storybook/src/initiate.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Danger JS
• GitHub Check: normal
• GitHub Check: nx
• GitHub Check: Core Unit Tests, windows-latest

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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