From 65c61e3e04aaabc81cde820400e0fd2405fe68f1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Jan 2026 11:04:42 +0100 Subject: [PATCH 1/6] Refactor runStorybookDev to use parts array for command flags, improving port handling and command execution. --- code/lib/create-storybook/src/initiate.ts | 25 +++++++++++++---------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 36117d29b2ab..c37a786ff716 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -176,10 +176,10 @@ async function runStorybookDev(result: { try { const supportsOnboarding = FeatureCompatibilityService.supportsOnboarding(projectType); - const flags = []; + const parts = storybookCommand.split(' '); if (packageManager.type === 'npm') { - flags.push('--silent'); + parts.push('--silent'); } // npm needs extra -- to pass flags to the command @@ -189,11 +189,11 @@ async function runStorybookDev(result: { packageManager.type === PackageManagerName.BUN; if (doesNeedExtraDash && projectType !== ProjectType.ANGULAR) { - flags.push('--'); + parts.push('--'); } if (supportsOnboarding && shouldOnboard) { - flags.push('--initial-path=/onboarding'); + parts.push('--initial-path=/onboarding'); } // Check if default port 6006 is available @@ -201,20 +201,23 @@ async function runStorybookDev(result: { const availablePort = await getServerPort(defaultPort); const useAlternativePort = availablePort !== defaultPort; - const portFlag = flags.findIndex((flag) => flag.startsWith('-p ')); + if (useAlternativePort) { + const numberString = defaultPort.toString(); + const findPortNumberIndex = parts.findIndex((flag) => flag === numberString); - if (useAlternativePort && portFlag === -1) { - flags.push(`-p ${availablePort}`); - } else if (useAlternativePort && portFlag !== -1) { - flags[portFlag] = `-p ${availablePort}`; + if (findPortNumberIndex !== -1) { + parts[findPortNumberIndex] = availablePort.toString(); + } else { + parts.push(`-p`, `${availablePort}`); + } } - flags.push('--quiet'); + parts.push('--quiet'); // instead of calling 'dev' automatically, we spawn a subprocess so that it gets // executed directly in the user's project directory. This avoid potential issues // with packages running in npxs' node_modules - const [command, ...args] = [...storybookCommand.split(' '), ...flags]; + const [command, ...args] = [...parts]; await executeCommand({ command: command, args, From 2f27aba2a78dc5f69ea4cd45bacbb17d02e4c374 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Jan 2026 12:08:30 +0100 Subject: [PATCH 2/6] move the code to initiate, make it more fault tolerant (cannot add the same argument twice) Add a wrapper preventing adding any sbFLags when this is not supported (angular was broken) --- code/lib/create-storybook/src/initiate.ts | 51 +++++++++++------------ 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index c37a786ff716..98f296d38f19 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -156,6 +156,17 @@ export async function initiate(options: CommandOptions): Promise { }); if (initiateResult?.shouldRunDev) { + const defaultPort = 6006; + const availablePort = await getServerPort(defaultPort); + const useAlternativePort = availablePort !== defaultPort; + + if (useAlternativePort) { + initiateResult.storybookCommand = initiateResult.storybookCommand?.replace( + `-p ${defaultPort}`, + `-p ${availablePort}` + ); + } + await runStorybookDev(initiateResult); } } @@ -182,37 +193,25 @@ async function runStorybookDev(result: { parts.push('--silent'); } - // npm needs extra -- to pass flags to the command - // in the case of Angular, we are calling `ng run` which doesn't need the extra `--` - const doesNeedExtraDash = - packageManager.type === PackageManagerName.NPM || - packageManager.type === PackageManagerName.BUN; - - if (doesNeedExtraDash && projectType !== ProjectType.ANGULAR) { - parts.push('--'); - } - - if (supportsOnboarding && shouldOnboard) { - parts.push('--initial-path=/onboarding'); - } + const supportSbFlags = projectType !== ProjectType.ANGULAR; - // Check if default port 6006 is available - const defaultPort = 6006; - const availablePort = await getServerPort(defaultPort); - const useAlternativePort = availablePort !== defaultPort; + if (supportSbFlags) { + // npm needs extra -- to pass flags to the command + // in the case of Angular, we are calling `ng run` which doesn't need the extra `--` + const doesNeedExtraDash = + packageManager.type === PackageManagerName.NPM || + packageManager.type === PackageManagerName.BUN; - if (useAlternativePort) { - const numberString = defaultPort.toString(); - const findPortNumberIndex = parts.findIndex((flag) => flag === numberString); + if (doesNeedExtraDash) { + parts.push('--'); + } - if (findPortNumberIndex !== -1) { - parts[findPortNumberIndex] = availablePort.toString(); - } else { - parts.push(`-p`, `${availablePort}`); + if (supportsOnboarding && shouldOnboard) { + parts.push('--initial-path=/onboarding'); } - } - parts.push('--quiet'); + parts.push('--quiet'); + } // instead of calling 'dev' automatically, we spawn a subprocess so that it gets // executed directly in the user's project directory. This avoid potential issues From 817fbda005911991c1cf5bd16384643531a303d9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Jan 2026 12:26:04 +0100 Subject: [PATCH 3/6] fix unit test --- code/lib/create-storybook/src/initiate.test.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/lib/create-storybook/src/initiate.test.ts b/code/lib/create-storybook/src/initiate.test.ts index 17c50007e59c..7d9b1799ef4e 100644 --- a/code/lib/create-storybook/src/initiate.test.ts +++ b/code/lib/create-storybook/src/initiate.test.ts @@ -18,6 +18,10 @@ const getCliIntegrationFromAncestry = vi.mock('storybook/internal/telemetry'); +vi.mock('storybook/internal/core-server', () => ({ + getServerPort: vi.fn().mockResolvedValue(6006), +})); + describe('getStorybookVersionFromAncestry', () => { it('possible storybook path', () => { const ancestry = [{ command: 'node' }, { command: 'storybook@7.0.0' }, { command: 'npm' }]; From f9530561da2a7d22434ddc6d318bc2d78d45c265 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Jan 2026 12:49:06 +0100 Subject: [PATCH 4/6] move back to a system where we simply inject, since the command doesn't actually include the `-p` part, it just has `npm run storybook` in it, so the duplicate `-p` argument is unavoidable --- code/lib/create-storybook/src/initiate.ts | 29 +++++++++++------------ 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 98f296d38f19..bf1cf5f926fb 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -156,17 +156,6 @@ export async function initiate(options: CommandOptions): Promise { }); if (initiateResult?.shouldRunDev) { - const defaultPort = 6006; - const availablePort = await getServerPort(defaultPort); - const useAlternativePort = availablePort !== defaultPort; - - if (useAlternativePort) { - initiateResult.storybookCommand = initiateResult.storybookCommand?.replace( - `-p ${defaultPort}`, - `-p ${availablePort}` - ); - } - await runStorybookDev(initiateResult); } } @@ -206,17 +195,27 @@ async function runStorybookDev(result: { parts.push('--'); } - if (supportsOnboarding && shouldOnboard) { - parts.push('--initial-path=/onboarding'); - } + const defaultPort = 6006; + const availablePort = await getServerPort(defaultPort); + const useAlternativePort = availablePort !== defaultPort; + + if (useAlternativePort) { + parts.push(`-p ${availablePort}`); - parts.push('--quiet'); + if (supportsOnboarding && shouldOnboard) { + parts.push('--initial-path=/onboarding'); + } + + parts.push('--quiet'); + } } // instead of calling 'dev' automatically, we spawn a subprocess so that it gets // executed directly in the user's project directory. This avoid potential issues // with packages running in npxs' node_modules const [command, ...args] = [...parts]; + + console.log({ args }); await executeCommand({ command: command, args, From 69c5a36ed2c169c5be7f80a7b2a6d289ee0bd438 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Jan 2026 12:58:30 +0100 Subject: [PATCH 5/6] remove debug logs --- code/lib/create-storybook/src/initiate.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index bf1cf5f926fb..9265220b1b40 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -215,7 +215,6 @@ async function runStorybookDev(result: { // with packages running in npxs' node_modules const [command, ...args] = [...parts]; - console.log({ args }); await executeCommand({ command: command, args, From 629696cdaa2028080573364f233675c6c0ede5f7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Jan 2026 12:59:39 +0100 Subject: [PATCH 6/6] fix comment from coder abbitai --- code/lib/create-storybook/src/initiate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 9265220b1b40..c94160f0d65d 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -200,7 +200,7 @@ async function runStorybookDev(result: { const useAlternativePort = availablePort !== defaultPort; if (useAlternativePort) { - parts.push(`-p ${availablePort}`); + parts.push(`-p`, `${availablePort}`); if (supportsOnboarding && shouldOnboard) { parts.push('--initial-path=/onboarding');