CLI: Run storybook dev as part of storybook init

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -50,6 +50,7 @@ export type StorybookBuilderOptions = JsonObject & {
     | 'ci'
     | 'quiet'
     | 'disableTelemetry'
+    | 'initialPath'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
@@ -93,6 +94,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         sslKey,
         disableTelemetry,
         assets,
+        initialPath,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -117,6 +119,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
           ...(assets ? { assets } : {}),
         },
         tsConfig,
+        initialPath,
       };
 
       return standaloneOptions;

code/frameworks/angular/src/builders/start-storybook/schema.json

@@ -109,6 +109,10 @@
       "items": {
         "$ref": "#/definitions/assetPattern"
       }
+    },
+    "initialPath": {
+      "type": "string",
+      "description": "URL path to be appended when visiting Storybook for the first time"
     }
   },
   "additionalProperties": false,

code/lib/cli/src/dev.ts

@@ -3,6 +3,7 @@ import { sync as readUpSync } from 'read-pkg-up';
 import { logger, instance as npmLog } from '@storybook/node-logger';
 import { buildDevStandalone, withTelemetry } from '@storybook/core-server';
 import { cache } from '@storybook/core-common';
+import type { CLIOptions } from '@storybook/types';
 
 function printError(error: any) {
   // this is a weird bugfix, somehow 'node-pre-gyp' is polluting the npmLog header
@@ -35,7 +36,7 @@ function printError(error: any) {
   logger.line();
 }
 
-export const dev = async (cliOptions: any) => {
+export const dev = async (cliOptions: CLIOptions) => {
   process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
   const options = {
@@ -45,8 +46,15 @@ export const dev = async (cliOptions: any) => {
     ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
     cache,
     packageJson: readUpSync({ cwd: __dirname }).packageJson,
-  };
-  await withTelemetry('dev', { cliOptions, presetOptions: options, printError }, () =>
-    buildDevStandalone(options)
+  } as Parameters<typeof buildDevStandalone>[0];
+
+  await withTelemetry(
+    'dev',
+    {
+      cliOptions,
+      presetOptions: options as Parameters<typeof withTelemetry>[1]['presetOptions'],
+      printError,
+    },
+    () => buildDevStandalone(options)
   );
 };

code/lib/cli/src/generate.ts

@@ -216,6 +216,10 @@ command('dev')
   )
   .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
   .option('--docs', 'Build a documentation-only site using addon-docs')
+  .option(
+    '--initial-path [path]',
+    'URL path to be appended when visiting Storybook for the first time'
+  )
   .action(async (options) => {
     logger.setLevel(program.loglevel);
     consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));

code/lib/cli/src/generators/NEXTJS/index.ts

@@ -2,7 +2,16 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'react', undefined, 'nextjs');
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    options,
+    'react',
+    {
+      extraAddons: ['@storybook/addon-onboarding'],
+    },
+    'nextjs'
+  );
 };
 
 export default generator;

code/lib/cli/src/generators/REACT/index.ts

@@ -10,6 +10,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
 
   await baseGenerator(packageManager, npmOptions, options, 'react', {
     extraPackages,
+    extraAddons: ['@storybook/addon-onboarding'],
   });
 };
 

code/lib/cli/src/generators/REACT_SCRIPTS/index.ts

@@ -40,7 +40,10 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
   }
 
   const version = versions['@storybook/preset-create-react-app'];
-  const extraAddons = [`@storybook/preset-create-react-app@${version}`];
+  const extraAddons = [
+    `@storybook/preset-create-react-app@${version}`,
+    '@storybook/addon-onboarding',
+  ];
 
   if (!isCra5OrHigher) {
     throw new Error(dedent`

code/lib/cli/src/generators/WEBPACK_REACT/index.ts

@@ -2,7 +2,9 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'react');
+  await baseGenerator(packageManager, npmOptions, options, 'react', {
+    extraAddons: ['@storybook/addon-onboarding'],
+  });
 };
 
 export default generator;

code/lib/cli/src/initiate.ts

@@ -37,6 +37,7 @@ import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
 import type { NpmOptions } from './NpmOptions';
 import type { CommandOptions } from './generators/types';
 import { HandledError } from './HandledError';
+import { dev } from './dev';
 
 const logger = console;
 
@@ -319,9 +320,29 @@ async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise<vo
 
   logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
 
-  if (projectType === ProjectType.ANGULAR) {
+  const isReactProject =
+    projectType === ProjectType.REACT_SCRIPTS ||
+    projectType === ProjectType.REACT ||
+    projectType === ProjectType.WEBPACK_REACT ||
+    projectType === ProjectType.REACT_PROJECT ||
+    projectType === ProjectType.NEXTJS;
+
+  const shouldRunDev =
+    projectType !== ProjectType.ANGULAR && projectType !== ProjectType.REACT_NATIVE;
+  if (process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true' && shouldRunDev) {
+    logger.log('\nRunning Storybook');
+    await dev({
+      ...options,
+      port: 6006,
+      open: true,
+      quiet: true,
+      // TODO: change this logic to all frameworks once the idea is validated
+      initialPath: isReactProject ? '/onboarding' : undefined,
+    });
+  } else if (projectType === ProjectType.ANGULAR) {
     logger.log('\nTo run your Storybook, type:\n');
     codeLog([`ng run ${installResult.projectName}:storybook`]);
+    logger.log();
   } else if (projectType === ProjectType.REACT_NATIVE) {
     logger.log();
     logger.log(chalk.yellow('NOTE: installation is not 100% automated.\n'));
@@ -335,10 +356,8 @@ async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise<vo
   } else {
     logger.log('\nTo run your Storybook, type:\n');
     codeLog([packageManager.getRunStorybookCommand()]);
+    logger.log();
   }
-
-  // Add a new line for the clear visibility.
-  logger.log();
 }
 
 export async function initiate(options: CommandOptions, pkg: PackageJson): Promise<void> {

code/lib/core-server/src/dev-server.ts

@@ -55,9 +55,9 @@ export async function storybookDevServer(options: Options) {
 
   app.use(router);
 
-  const { port, host } = options;
+  const { port, host, initialPath } = options;
   const proto = options.https ? 'https' : 'http';
-  const { address, networkAddress } = getServerAddresses(port, host, proto);
+  const { address, networkAddress } = getServerAddresses(port, host, proto, initialPath);
 
   const listening = new Promise<void>((resolve, reject) => {
     // @ts-expect-error (Following line doesn't match TypeScript signature at all 🤔)

code/lib/core-server/src/utils/server-address.test.ts

@@ -0,0 +1,81 @@
+import detectPort from 'detect-port';
+import { getServerAddresses, getServerPort, getServerChannelUrl } from './server-address';
+
+jest.mock('ip');
+jest.mock('detect-port');
+jest.mock('@storybook/node-logger');
+
+describe('getServerAddresses', () => {
+  const port = 3000;
+  const host = 'localhost';
+  const proto = 'http';
+
+  it('should return server addresses without initial path by default', () => {
+    const expectedAddress = `${proto}://localhost:${port}/`;
+    const expectedNetworkAddress = `${proto}://${host}:${port}/`;
+
+    const result = getServerAddresses(port, host, proto);
+
+    expect(result.address).toBe(expectedAddress);
+    expect(result.networkAddress).toBe(expectedNetworkAddress);
+  });
+
+  it('should return server addresses with initial path', () => {
+    const initialPath = '/foo/bar';
+
+    const expectedAddress = `${proto}://localhost:${port}/?path=/foo/bar`;
+    const expectedNetworkAddress = `${proto}://${host}:${port}/?path=/foo/bar`;
+
+    const result = getServerAddresses(port, host, proto, initialPath);
+
+    expect(result.address).toBe(expectedAddress);
+    expect(result.networkAddress).toBe(expectedNetworkAddress);
+  });
+
+  it('should return server addresses with initial path and add slash if missing', () => {
+    const initialPath = 'foo/bar';
+
+    const expectedAddress = `${proto}://localhost:${port}/?path=/foo/bar`;
+    const expectedNetworkAddress = `${proto}://${host}:${port}/?path=/foo/bar`;
+
+    const result = getServerAddresses(port, host, proto, initialPath);
+
+    expect(result.address).toBe(expectedAddress);
+    expect(result.networkAddress).toBe(expectedNetworkAddress);
+  });
+});
+
+describe('getServerPort', () => {
+  const port = 3000;
+
+  it('should resolve with a free port', async () => {
+    const expectedFreePort = 4000;
+
+    (detectPort as jest.Mock).mockResolvedValue(expectedFreePort);
+
+    const result = await getServerPort(port);
+
+    expect(result).toBe(expectedFreePort);
+  });
+});
+
+describe('getServerChannelUrl', () => {
+  const port = 3000;
+  it('should return WebSocket URL with HTTP', () => {
+    const options = { https: false };
+    const expectedUrl = `ws://localhost:${port}/storybook-server-channel`;
+
+    const result = getServerChannelUrl(port, options);
+
+    expect(result).toBe(expectedUrl);
+  });
+
+  it('should return WebSocket URL with HTTPS', () => {
+    const options = { https: true };
+    const expectedUrl = `wss://localhost:${port}/storybook-server-channel`;
+
+    const result = getServerChannelUrl(port, options);
+
+    expect(result).toBe(expectedUrl);
+  });
+});

code/lib/core-server/src/utils/server-address.ts

@@ -3,10 +3,26 @@ import ip from 'ip';
 import { logger } from '@storybook/node-logger';
 import detectFreePort from 'detect-port';
 
-export function getServerAddresses(port: number, host: string, proto: string) {
+export function getServerAddresses(
+  port: number,
+  host: string,
+  proto: string,
+  initialPath?: string
+) {
+  const address = new URL(`${proto}://localhost:${port}/`);
+  const networkAddress = new URL(`${proto}://${host || ip.address()}:${port}/`);
+
+  if (initialPath) {
+    const searchParams = `?path=${decodeURIComponent(
+      initialPath.startsWith('/') ? initialPath : `/${initialPath}`
+    )}`;
+    address.search = searchParams;
+    networkAddress.search = searchParams;
+  }
+
   return {
-    address: `${proto}://localhost:${port}/`,
-    networkAddress: `${proto}://${host || ip.address()}:${port}/`,
+    address: address.href,
+    networkAddress: networkAddress.href,
   };
 }
 

code/lib/types/src/modules/core-common.ts

@@ -139,6 +139,7 @@ export interface CLIOptions {
   disableTelemetry?: boolean;
   enableCrashReports?: boolean;
   host?: string;
+  initialPath?: string;
   /**
    * @deprecated Use 'staticDirs' Storybook Configuration option instead
    */

scripts/task.ts

@@ -325,6 +325,9 @@ async function runTask(task: Task, details: TemplateDetails, optionValues: Passe
 const controllers: AbortController[] = [];
 
 async function run() {
+  // useful for other scripts to know whether they're running in the creation of a sandbox in the monorepo
+  process.env.IN_STORYBOOK_SANDBOX = 'true';
+
   const allOptionValues = await getOptionsOrPrompt('yarn task', options);
 
   const { task: taskKey, startFrom, junit, ...optionValues } = allOptionValues;

scripts/tasks/sandbox-parts.ts

@@ -24,6 +24,7 @@ import {
 } from '../utils/yarn';
 import { exec } from '../utils/exec';
 import type { ConfigFile } from '../../code/lib/csf-tools';
+import storybookPackages from '../../code/lib/cli/src/versions';
 import { writeConfig } from '../../code/lib/csf-tools';
 import { filterExistsInCodeDir } from '../utils/filterExistsInCodeDir';
 import { findFirstPath } from '../utils/paths';
@@ -430,8 +431,6 @@ export const addStories: Task['run'] = async (
       });
     }
 
-    console.log({ sandboxSpecificStoriesFolder, storiesVariantFolder });
-
     if (
       await pathExists(
         resolve(CODE_DIRECTORY, frameworkPath, join('template', storiesVariantFolder))
@@ -473,9 +472,12 @@ export const addStories: Task['run'] = async (
   );
 
   const addonDirs = await Promise.all(
-    [...mainAddons, ...extraAddons].map(async (addon) =>
-      workspacePath('addon', `@storybook/addon-${addon}`)
-    )
+    [...mainAddons, ...extraAddons]
+      // only include addons that are in the monorepo
+      .filter((addon: string) =>
+        Object.keys(storybookPackages).find((pkg: string) => pkg === `@storybook/addon-${addon}`)
+      )
+      .map(async (addon) => workspacePath('addon', `@storybook/addon-${addon}`))
   );
 
   if (isCoreRenderer) {

scripts/verdaccio.yaml

@@ -75,6 +75,10 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
+  '@storybook/addon-onboarding':
+    access: $all
+    publish: $all
+    proxy: npmjs
   '@storybook/mdx1-csf':
     access: $all
     publish: $all