From f3d21dc6f86d4eca2887ca69e4773e616c3ea9e8 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 3 Nov 2025 13:14:23 +0100
Subject: [PATCH] CLI: Fix issue with running Storybook after being initialized

---
 code/lib/create-storybook/src/initiate.ts | 85 +++++++++++++----------
 1 file changed, 49 insertions(+), 36 deletions(-)

diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts
index eed6de8e1b7e..5833f1db2a7f 100644
--- a/code/lib/create-storybook/src/initiate.ts
+++ b/code/lib/create-storybook/src/initiate.ts
@@ -32,6 +32,8 @@ import { telemetry } from 'storybook/internal/telemetry';
 
 import boxen from 'boxen';
 import * as find from 'empathic/find';
+// eslint-disable-next-line depend/ban-dependencies
+import execa from 'execa';
 import picocolors from 'picocolors';
 import { getProcessAncestry } from 'process-ancestry';
 import prompts from 'prompts';
@@ -807,45 +809,56 @@ export async function initiate(options: CommandOptions): Promise<void> {
   );
 
   if (initiateResult?.shouldRunDev) {
-    const { projectType, packageManager, storybookCommand } = initiateResult;
-    logger.log('\nRunning Storybook');
+    await runStorybookDev(initiateResult);
+  }
+}
 
-    try {
-      const supportsOnboarding = [
-        ProjectType.REACT_SCRIPTS,
-        ProjectType.REACT,
-        ProjectType.WEBPACK_REACT,
-        ProjectType.REACT_PROJECT,
-        ProjectType.NEXTJS,
-        ProjectType.VUE3,
-        ProjectType.ANGULAR,
-      ].includes(projectType);
-
-      const flags = [];
-
-      // 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 `--`
-      if (packageManager.type === 'npm' && projectType !== ProjectType.ANGULAR) {
-        flags.push('--');
-      }
+/** Run Storybook dev server after installation */
+async function runStorybookDev(result: {
+  projectType: ProjectType;
+  packageManager: JsPackageManager;
+  storybookCommand?: string;
+  shouldOnboard: boolean;
+}): Promise<void> {
+  const { projectType, packageManager, storybookCommand, shouldOnboard } = result;
+
+  if (!storybookCommand) {
+    return;
+  }
 
-      if (supportsOnboarding && initiateResult.shouldOnboard) {
-        flags.push('--initial-path=/onboarding');
-      }
+  try {
+    const supportsOnboarding = [
+      ProjectType.REACT_SCRIPTS,
+      ProjectType.REACT,
+      ProjectType.WEBPACK_REACT,
+      ProjectType.REACT_PROJECT,
+      ProjectType.NEXTJS,
+      ProjectType.VUE3,
+      ProjectType.ANGULAR,
+    ].includes(projectType);
+
+    const flags = [];
+
+    // 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 `--`
+    if (packageManager.type === 'npm' && projectType !== ProjectType.ANGULAR) {
+      flags.push('--');
+    }
 
-      flags.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
-      packageManager.runPackageCommandSync(
-        storybookCommand.replace(/^yarn /, ''),
-        flags,
-        undefined,
-        'inherit'
-      );
-    } catch (e) {
-      // Do nothing here, as the command above will spawn a `storybook dev` process which does the error handling already. Else, the error will get bubbled up and sent to crash reports twice
+    if (supportsOnboarding && shouldOnboard) {
+      flags.push('--initial-path=/onboarding');
     }
+
+    flags.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
+    logger.log('\nRunning Storybook');
+    execa.command(`${storybookCommand} ${flags.join(' ')}`, {
+      stdio: 'inherit',
+    });
+  } catch {
+    // Do nothing here, as the command above will spawn a `storybook dev` process which does the error handling already
   }
 }