CLI: Create sandbox on init in empty folders #23611

valentinpalkovic · 2023-07-26T09:19:15Z

Closes N/A

What I did

This pull request refactors the CLI code to improve the sandbox generation and scaffolding features. It supports different package managers and nested dependency resolutions, using a new NestedDependencyResolution type and the overrides field in package.json. It also introduces a new scaffoldProject function that prompts the user to choose a template from the templates module during init, which contains updated and consistent configurations for various frameworks. Additionally, it adds a silent option to the sandbox command, which suppresses the console output, and a scaffolding-readme-template.md file, which is used to generate a custom README.md file for the scaffolded projects. Finally, it simplifies the project_types module and removes some unused files.

Walkthrough

`🤖 Generated by Copilot at 969ec22`

Implement new scaffolding feature for Storybook CLI (link,link,link,link,link,link)
Prompt user to select a template from a list of supported templates (link,link,link)
Clone template from sandbox repository and update package.json and README.md files (link,link,link)
Install dependencies and run Storybook if needed (link,link,link)
Filter out internal or in development templates for scaffolding (link,link)
Add silent option to suppress console output for sandbox command (link,link,link,link,link,link,link)
Add nested dependency resolution feature for different package managers (link,link,link,link,link,link,link,link,link,link,link,link,link,link,link)
Add more sandbox templates with different package managers (link,link,link,link)
Update template names to include bundler, language, and package manager information (link,link,link,link,link,link,link,link,link,link,link,link,link,link)
Update sandbox command to detect package manager and adjust init message accordingly (link)
Refactor project_types.ts file and avoid circular dependencies (link,link,link)
Fix registry URL detection for JsPackageManager class (link)
Simplify installDependencies method for JsPackageManager class (link)
Add assertNever helper function for type safety (link)
Delete unused functions and files (link,link,link)
Update sandbox generation workflows to use PNPM and disable YARN_ENABLE_IMMUTABLE_INSTALLS (link,link,link,link,link)
Add scaffolding-readme-template.md file as an entry point for ncc build command (link)
Fix formatting issue with welcome message (link)

How to test

Run <storybook-project-folder>/code/lib/cli/bin/index.js init in an empty folder -> Storybook should automatically start
Run <storybook-project-folder>/code/lib/cli/bin/index.js init --skip-install in an empty folder -> Storybook should not start automatically

Checklist

Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
Make sure to add/update documentation regarding your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

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/src/sandbox-templates.ts
Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]

🦋 Canary release

This pull request has been released as version 0.0.0-pr-23611-sha-d83da132. Install it by pinning all your Storybook dependencies to that version.

More information


Published version	`0.0.0-pr-23611-sha-d83da132`
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	`valentin/create-sandbox-in-empty-project`
Commit	`d83da132`
Datetime	Fri Aug 11 05:49:47 UTC 2023 (`1691732987`)
Workflow run	5829362347

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 canary-release-pr.yml --field pr=23611

code/lib/cli/src/initiate.ts

code/lib/cli/src/sandbox-templates.ts

ndelangen · 2023-07-26T11:29:11Z

How does it determine which "selected template" with an empty directory?
Does it ask?

valentinpalkovic · 2023-07-26T11:34:07Z

@ndelangen, The user will be asked which template should be chosen: https://github.com/storybookjs/storybook/pull/23611/files#diff-1be00149590160bd0f7412dcca41c8941da299807d73504bd06064ee6b2c9e0bR266-R282

code/lib/cli/src/templates.ts

code/lib/cli/src/initiate.ts

yannbf · 2023-07-26T14:03:33Z

@valentinpalkovic we explicitly do a few things in the sandbox command, but in the case of users initializing Storybook in empty projects, it won't make much sense:

resolutions in package.json: It's so that repros are consistent, but for the init case it will just make things slow.
"before-storybook" in the name field in package.json
.stackblitzrc: I guess it won't hurt to have it, but doesn't make sense
README.md: It's made for sandboxes, mentioning that it's for reproductions and pointing people to a stackblitz link in the sandboxes repo

valentinpalkovic · 2023-07-26T14:18:00Z

Good findings! I will tackle them

yannbf · 2023-07-27T13:46:08Z

code/lib/cli/src/scaffolding-readme-template.md

@@ -0,0 +1,23 @@
+# {{template.name}}


Hey @kylegach you might be interested in this. This would be the README file for people who initialize Storybook in empty projects

yannbf · 2023-07-27T13:47:20Z

A reminder, I'm not sure if it would be done in this PR or not, but this documentation section would need to be reworked:

storybook/docs/get-started/install.md

Line 26 in c266251

<summary><code>storybook init</code> is not made for empty projects</summary>

valentinpalkovic · 2023-07-27T13:49:43Z

@yannbf @jonniebigodes is working on the documentation. I had already a pairing session with him yesterday :)

socket-security · 2023-07-31T08:00:40Z

No top level dependency changes detected. Learn more about Socket for GitHub ↗︎

valentinpalkovic · 2023-08-07T07:30:05Z

scripts/sandbox/generate.ts

+          await remove(join(afterDir, '.yarn', 'cache'));
+          await remove(join(afterDir, '.yarn', 'unplugged'));


Is this actually already mentioned in the .gitignore file?

scripts/tasks/sandbox-parts.ts

scripts/utils/yarn.ts

vanessayuenn · 2023-08-09T09:56:21Z

Tested with npx and yarn; here are some findings:

❌ npx x react-vite

→ hangs on install dependencies step forever, no node_module was created.

❌ npx x angular

→ hangs on install dependencies step forever, no node_module was created.

✅ yarn x react-vite

✅ yarn x lit

❌ yarn x vue

→ failed at install dependencies with the esbuild error below, but i can actually start storybook straight away with yarn storybook.

postinstall error

# This file contains the result of Yarn building a package (esbuild@npm:0.18.19)
# Script name: postinstall

node:internal/errors:865
  const err = new Error(message);
              ^

Error: Command failed: /Users/spontaneouslyodd/.nvm/versions/node/v18.17.0/bin/node /Users/spontaneouslyodd/Projects/empty-vue-yarn/node_modules/esbuild/bin/esbuild --version
node:internal/errors:496
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /Users/spontaneouslyodd/Projects/empty-vue-yarn/node_modules/esbuild/bin/esbuild
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:124:36)
    at defaultLoad (node:internal/modules/esm/load:84:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at load$1 (file:///private/var/folders/2w/x2lktvm10wd005k_jp6vcpwr0000gn/T/xfs-3f5eb0ab/dlx-55309/.pnp.loader.mjs:1456:12)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:603:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v18.17.0

    at checkExecSyncError (node:child_process:885:11)
    at Object.execFileSync (node:child_process:921:15)
    at validateBinaryVersion (/Users/spontaneouslyodd/Projects/empty-vue-yarn/node_modules/esbuild/install.js:98:28)
    at /Users/spontaneouslyodd/Projects/empty-vue-yarn/node_modules/esbuild/install.js:283:5 {
  status: 1,
  signal: null,
  output: [
    null,
    Buffer(0) [Uint8Array] [],
    Buffer(998) [Uint8Array] [
      110, 111, 100, 101,  58, 105, 110, 116, 101, 114, 110,  97,
      108,  47, 101, 114, 114, 111, 114, 115,  58,  52,  57,  54,
       10,  32,  32,  32,  32,  69, 114, 114, 111, 114,  67,  97,
      112, 116, 117, 114, 101,  83, 116,  97,  99, 107,  84, 114,
       97,  99, 101,  40, 101, 114, 114,  41,  59,  10,  32,  32,
       32,  32,  94,  10,  10,  84, 121, 112, 101,  69, 114, 114,
      111, 114,  32,  91,  69,  82,  82,  95,  85,  78,  75,  78,
       79,  87,  78,  95,  70,  73,  76,  69,  95,  69,  88,  84,
       69,  78,  83,  73,
      ... 898 more items
    ]
  ],
  pid: 55440,
  stdout: Buffer(0) [Uint8Array] [],
  stderr: Buffer(998) [Uint8Array] [
    110, 111, 100, 101,  58, 105, 110, 116, 101, 114, 110,  97,
    108,  47, 101, 114, 114, 111, 114, 115,  58,  52,  57,  54,
     10,  32,  32,  32,  32,  69, 114, 114, 111, 114,  67,  97,
    112, 116, 117, 114, 101,  83, 116,  97,  99, 107,  84, 114,
     97,  99, 101,  40, 101, 114, 114,  41,  59,  10,  32,  32,
     32,  32,  94,  10,  10,  84, 121, 112, 101,  69, 114, 114,
    111, 114,  32,  91,  69,  82,  82,  95,  85,  78,  75,  78,
     79,  87,  78,  95,  70,  73,  76,  69,  95,  69,  88,  84,
     69,  78,  83,  73,
    ... 898 more items
  ]
}

Node.js v18.17.0

❌ yarn x angular

→ same thing as above -- failed at postinstall but i can actually start storybook straight away manually.

JReinhold

only reviewed sandbox-templates.ts, this is great!

JReinhold · 2023-08-29T12:11:24Z

code/lib/cli/src/sandbox-templates.ts

 export type Cadence = keyof typeof templatesByCadence;

 export type Template = {
  /**
   * Readable name for the template, which will be used for feedback and the status page
   */
-  name: string;
+  name: `${string} (${'Webpack5' | 'Vite'} | ${'JavaScript' | 'TypeScript'} | ${


Suggested change

name: `${string} (${'Webpack5' | 'Vite'} | ${'JavaScript' | 'TypeScript'} | ${

name: `${string} (${'Webpack' | 'Vite'} | ${'JavaScript' | 'TypeScript'} | ${

I don't think we need to explicitly mention Webpack version 5, given v4 is a long time ago and isn't supported.

JReinhold · 2023-08-29T12:13:43Z

code/lib/cli/src/sandbox-templates.ts

  },
  'nextjs/default-js': {
-    name: 'Next.js (JavaScript)',
-    script: 'yarn create next-app {{beforeDir}} --javascript --eslint',
+    name: 'Next.js v13 (Webpack5 | JavaScript | npm)',


For all of these frameworks and renderers which just install the latest version, we should change the version string to be "Latest".
Otherwise it will be a pain to remember to update these strings all the time. I also think it's more correct.

JReinhold · 2023-08-29T12:14:37Z

code/lib/cli/src/sandbox-templates.ts

  },
  'angular-cli/prerelease': {
-    name: 'Angular CLI (Prerelease)',
+    name: 'Angular v16 (Webpack5 | TypeScript | npm) (prerelease)',


Similar to my comment above, I think we should just call it prerelease.

Suggested change

name: 'Angular v16 (Webpack5 | TypeScript | npm) (prerelease)',

name: 'Angular Prerelease (Webpack5 | TypeScript | npm)',

valentinpalkovic · 2023-11-08T15:52:06Z

I am closing this for now. At some point, we might start to work on it again.

valentinpalkovic requested review from yannbf and ndelangen as code owners July 26, 2023 09:19

valentinpalkovic self-assigned this Jul 26, 2023

valentinpalkovic added feature request ci:normal patch:no labels Jul 26, 2023

valentinpalkovic changed the title ~~Create sandbox on init in empty folders~~ CLI: Create sandbox on init in empty folders Jul 26, 2023

yannbf reviewed Jul 26, 2023

View reviewed changes

code/lib/cli/src/initiate.ts Outdated Show resolved Hide resolved

yannbf reviewed Jul 26, 2023

View reviewed changes

code/lib/cli/src/initiate.ts Outdated Show resolved Hide resolved

yannbf reviewed Jul 26, 2023

View reviewed changes

code/lib/cli/src/sandbox-templates.ts Show resolved Hide resolved

valentinpalkovic force-pushed the valentin/create-sandbox-in-empty-project branch from 71331c5 to 3be4580 Compare July 26, 2023 11:38

ndelangen reviewed Jul 26, 2023

View reviewed changes

code/lib/cli/src/templates.ts Show resolved Hide resolved

valentinpalkovic commented Jul 26, 2023

View reviewed changes

code/lib/cli/src/initiate.ts Outdated Show resolved Hide resolved

code/lib/cli/src/initiate.ts Outdated Show resolved Hide resolved

valentinpalkovic requested a review from kasperpeulen as a code owner July 27, 2023 12:46

valentinpalkovic force-pushed the valentin/create-sandbox-in-empty-project branch from 2d2f8b2 to 0c8cd76 Compare July 27, 2023 13:06

yannbf reviewed Jul 27, 2023

View reviewed changes

valentinpalkovic requested review from JReinhold and vanessayuenn as code owners August 3, 2023 11:46

valentinpalkovic force-pushed the valentin/create-sandbox-in-empty-project branch 3 times, most recently from 4f9788c to a474360 Compare August 3, 2023 12:07

jonniebigodes requested review from kylegach and jonniebigodes as code owners August 3, 2023 15:45

Remove unnecessary process.env.CI

0a55f51

valentinpalkovic commented Aug 7, 2023

View reviewed changes

scripts/tasks/sandbox-parts.ts Show resolved Hide resolved

valentinpalkovic commented Aug 7, 2023

View reviewed changes

scripts/utils/yarn.ts Outdated Show resolved Hide resolved

valentinpalkovic and others added 4 commits August 7, 2023 09:57

Do not set preserve-symlinks in pnpm sandboxes

3f9158c

Reset generate-sandboxes-next.yml to use next as triggering branch

cb88026

filter down available sandboxes in init

80aaf2a

resolve PR suggestions

82d2a4f

yannbf requested review from tmeasday and shilman as code owners August 8, 2023 15:33

yannbf added 3 commits August 9, 2023 08:16

infer package manager via user agent

bc43886

Merge branch 'next' into valentin/create-sandbox-in-empty-project

99ac248

use all sandbox templates in sandbox command

c6b94fd

kasperpeulen removed the patch:no label Aug 9, 2023

yannbf added 2 commits August 11, 2023 07:34

improve template filtering

6938843

trigger sandbox update

d83da13

yannbf force-pushed the valentin/create-sandbox-in-empty-project branch 2 times, most recently from 908903a to eaaa4a7 Compare August 11, 2023 10:42

debug generate-sandboxes

fee58c9

yannbf force-pushed the valentin/create-sandbox-in-empty-project branch from eaaa4a7 to fee58c9 Compare August 11, 2023 12:24

yannbf added 3 commits August 16, 2023 14:57

Merge branch 'next' into valentin/create-sandbox-in-empty-project

2679b4b

disable npm perf override

2bb1e87

wip

da7c320

JReinhold reviewed Aug 29, 2023

View reviewed changes

JReinhold mentioned this pull request Aug 29, 2023

Sandboxes: Make template names consistent #22466

Merged

5 tasks

yannbf added the ci: do not merge label Aug 29, 2023

valentinpalkovic closed this Nov 8, 2023

JReinhold mentioned this pull request Jan 5, 2024

CLI: Fix using wrong package managers in existing projects #25474

Merged

8 tasks

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLI: Create sandbox on init in empty folders #23611

CLI: Create sandbox on init in empty folders #23611

valentinpalkovic commented Jul 26, 2023 •

edited by storybook-bot

Loading

ndelangen commented Jul 26, 2023

valentinpalkovic commented Jul 26, 2023

yannbf commented Jul 26, 2023

valentinpalkovic commented Jul 26, 2023

yannbf Jul 27, 2023

yannbf commented Jul 27, 2023

valentinpalkovic commented Jul 27, 2023

socket-security bot commented Jul 31, 2023 •

edited

Loading

valentinpalkovic Aug 7, 2023

vanessayuenn commented Aug 9, 2023

JReinhold left a comment

JReinhold Aug 29, 2023

JReinhold Aug 29, 2023

JReinhold Aug 29, 2023

valentinpalkovic commented Nov 8, 2023

		await remove(join(afterDir, '.yarn', 'cache'));
		await remove(join(afterDir, '.yarn', 'unplugged'));

	name: `${string} (${'Webpack5' \| 'Vite'} \| ${'JavaScript' \| 'TypeScript'} \| ${
	name: `${string} (${'Webpack' \| 'Vite'} \| ${'JavaScript' \| 'TypeScript'} \| ${

	name: 'Angular v16 (Webpack5 \| TypeScript \| npm) (prerelease)',
	name: 'Angular Prerelease (Webpack5 \| TypeScript \| npm)',

CLI: Create sandbox on init in empty folders #23611

CLI: Create sandbox on init in empty folders #23611

Conversation

valentinpalkovic commented Jul 26, 2023 • edited by storybook-bot Loading

What I did

Walkthrough

🤖 Generated by Copilot at 969ec22

How to test

Checklist

Maintainers

🦋 Canary release

ndelangen commented Jul 26, 2023

valentinpalkovic commented Jul 26, 2023

yannbf commented Jul 26, 2023

valentinpalkovic commented Jul 26, 2023

yannbf Jul 27, 2023

Choose a reason for hiding this comment

yannbf commented Jul 27, 2023

valentinpalkovic commented Jul 27, 2023

socket-security bot commented Jul 31, 2023 • edited Loading

valentinpalkovic Aug 7, 2023

Choose a reason for hiding this comment

vanessayuenn commented Aug 9, 2023

❌ npx x react-vite

❌ npx x angular

✅ yarn x react-vite

✅ yarn x lit

❌ yarn x vue

❌ yarn x angular

JReinhold left a comment

Choose a reason for hiding this comment

JReinhold Aug 29, 2023

Choose a reason for hiding this comment

JReinhold Aug 29, 2023

Choose a reason for hiding this comment

JReinhold Aug 29, 2023

Choose a reason for hiding this comment

valentinpalkovic commented Nov 8, 2023

valentinpalkovic commented Jul 26, 2023 •

edited by storybook-bot

Loading

`🤖 Generated by Copilot at 969ec22`

socket-security bot commented Jul 31, 2023 •

edited

Loading