From 9923805b7e427767707bcb624d16d4befecf6dd4 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 6 Apr 2023 14:17:13 +0100 Subject: [PATCH] Fix install instructions --- code/frameworks/angular/README.md | 4 ++-- code/frameworks/ember/README.md | 2 +- code/frameworks/html-webpack5/README.md | 2 +- code/frameworks/preact-webpack5/README.md | 2 +- code/frameworks/react-webpack5/README.md | 2 +- code/frameworks/server-webpack5/README.md | 2 +- code/frameworks/svelte-webpack5/README.md | 2 +- code/frameworks/vue-vite/README.md | 2 +- code/frameworks/vue-webpack5/README.md | 2 +- code/frameworks/vue3-vite/README.md | 2 +- code/frameworks/vue3-webpack5/README.md | 2 +- code/frameworks/web-components-webpack5/README.md | 2 +- docs/addons/writing-addons.md | 2 +- docs/builders/overview.md | 4 ++-- docs/builders/vite.md | 2 +- docs/get-started/installation-problems/angular.mdx | 4 ++-- docs/get-started/installation-problems/ember.mdx | 4 ++-- docs/get-started/installation-problems/html.mdx | 2 +- docs/get-started/installation-problems/preact.mdx | 4 ++-- docs/get-started/installation-problems/qwik.mdx | 4 ++-- docs/get-started/installation-problems/react.mdx | 4 ++-- docs/get-started/installation-problems/svelte.mdx | 4 ++-- docs/get-started/installation-problems/vue.mdx | 6 +++--- docs/get-started/installation-problems/web-components.mdx | 2 +- docs/snippets/common/init-command.npx.js.mdx | 2 +- docs/snippets/common/init-command.pnpm.js.mdx | 2 +- 26 files changed, 36 insertions(+), 36 deletions(-) diff --git a/code/frameworks/angular/README.md b/code/frameworks/angular/README.md index 623d18c47441..3158060f3f9a 100644 --- a/code/frameworks/angular/README.md +++ b/code/frameworks/angular/README.md @@ -27,12 +27,12 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-angular-app -npx storybook init +npx storybook@latest init ``` ## Setup Storybook for your Angular projects -Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this: +Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook@latest init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this: ```json // angular.json diff --git a/code/frameworks/ember/README.md b/code/frameworks/ember/README.md index 7f623c163d45..f1ed9be67304 100644 --- a/code/frameworks/ember/README.md +++ b/code/frameworks/ember/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-ember-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/html-webpack5/README.md b/code/frameworks/html-webpack5/README.md index d18efbcb9829..5814bced713b 100644 --- a/code/frameworks/html-webpack5/README.md +++ b/code/frameworks/html-webpack5/README.md @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-app -npx storybook init -t html +npx storybook@latest init -t html ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/preact-webpack5/README.md b/code/frameworks/preact-webpack5/README.md index 60b338b400b2..0402d392c40b 100644 --- a/code/frameworks/preact-webpack5/README.md +++ b/code/frameworks/preact-webpack5/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-preact-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/react-webpack5/README.md b/code/frameworks/react-webpack5/README.md index 6aee8981736d..68e2ff7255c4 100644 --- a/code/frameworks/react-webpack5/README.md +++ b/code/frameworks/react-webpack5/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-react-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/server-webpack5/README.md b/code/frameworks/server-webpack5/README.md index e8178180cc9b..0afe86f1fef0 100644 --- a/code/frameworks/server-webpack5/README.md +++ b/code/frameworks/server-webpack5/README.md @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-app -npx storybook init -t server +npx storybook@latest init -t server ``` To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`: diff --git a/code/frameworks/svelte-webpack5/README.md b/code/frameworks/svelte-webpack5/README.md index 2c1279392720..6a6202a960e3 100644 --- a/code/frameworks/svelte-webpack5/README.md +++ b/code/frameworks/svelte-webpack5/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-svelte-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/vue-vite/README.md b/code/frameworks/vue-vite/README.md index 1d4c9cb9addb..f19ebc711b42 100644 --- a/code/frameworks/vue-vite/README.md +++ b/code/frameworks/vue-vite/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-vue-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/vue-webpack5/README.md b/code/frameworks/vue-webpack5/README.md index 38ea1a0f762f..9af5a6d0512f 100644 --- a/code/frameworks/vue-webpack5/README.md +++ b/code/frameworks/vue-webpack5/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-vue-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/vue3-vite/README.md b/code/frameworks/vue3-vite/README.md index 645c1aa64549..1eadfa5c7b7a 100644 --- a/code/frameworks/vue3-vite/README.md +++ b/code/frameworks/vue3-vite/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-vue3-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md index 7c2d6e699548..3795b03d961f 100644 --- a/code/frameworks/vue3-webpack5/README.md +++ b/code/frameworks/vue3-webpack5/README.md @@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-vue3-app -npx storybook init +npx storybook@latest init ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md index d06f383fc9a9..4562b5dc35ee 100644 --- a/code/frameworks/web-components-webpack5/README.md +++ b/code/frameworks/web-components-webpack5/README.md @@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-app -npx storybook init -t web_components +npx storybook@latest init -t web_components ``` For more information visit: [storybook.js.org](https://storybook.js.org) diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index bdd9da935227..d4a0f1dce2d0 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the Initialize a local Storybook instance to allow you to test your addon. ```shell -npx storybook init +npx storybook@latest init ```
diff --git a/docs/builders/overview.md b/docs/builders/overview.md index ccc4fed1ba11..f0dbee77eeea 100644 --- a/docs/builders/overview.md +++ b/docs/builders/overview.md @@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b ## CLI basics -Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack 5 builder by default. +Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook@latest init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack 5 builder by default. Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use: ```shell -npx storybook init --builder +npx storybook@latest init --builder ``` ## Manual setup diff --git a/docs/builders/vite.md b/docs/builders/vite.md index 625b161700e7..bdc3798bbdbe 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v ## Setup -If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually. +If you ran `npx storybook@latest init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually. Run the following command to install the builder. diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx index d462a65a4892..96b96b440a7b 100644 --- a/docs/get-started/installation-problems/angular.mdx +++ b/docs/get-started/installation-problems/angular.mdx @@ -1,13 +1,13 @@ - Add the `--type angular` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type angular + npx storybook@latest init --type angular ``` - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --package-manager=npm + npx storybook@latest init --package-manager=npm ``` - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it: diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx index b477a3f3e622..a396c27891bd 100644 --- a/docs/get-started/installation-problems/ember.mdx +++ b/docs/get-started/installation-problems/ember.mdx @@ -1,7 +1,7 @@ - Add the `--type ember` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type ember + npx storybook@latest init --type ember ``` - During the install process, if you get the following warning message: @@ -17,7 +17,7 @@ Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@sto - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --package-manager=npm + npx storybook@latest init --package-manager=npm ``` - For other installation issues, check the [Ember README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember) for additional instructions. diff --git a/docs/get-started/installation-problems/html.mdx b/docs/get-started/installation-problems/html.mdx index 709dcf824364..f43b72620b10 100644 --- a/docs/get-started/installation-problems/html.mdx +++ b/docs/get-started/installation-problems/html.mdx @@ -1,7 +1,7 @@ - Add the `--type html` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type html +npx storybook@latest init --type html ``` - For other installation issues, check the React README files for additional instructions: diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx index ab781154c1e9..24837b2c1ebd 100644 --- a/docs/get-started/installation-problems/preact.mdx +++ b/docs/get-started/installation-problems/preact.mdx @@ -1,13 +1,13 @@ - Add the `--type preact` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type preact + npx storybook@latest init --type preact ``` - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --package-manager=npm + npx storybook@latest init --package-manager=npm ``` - For other installation issues, check the [Preact README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/preact-webpack5) for additional instructions. diff --git a/docs/get-started/installation-problems/qwik.mdx b/docs/get-started/installation-problems/qwik.mdx index 7a342d897b20..c6bd50a043b4 100644 --- a/docs/get-started/installation-problems/qwik.mdx +++ b/docs/get-started/installation-problems/qwik.mdx @@ -1,11 +1,11 @@ - Add the `--type qwik` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type qwik + npx storybook@latest init --type qwik ``` - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --package-manager=npm + npx storybook@latest init --package-manager=npm ``` diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx index 677bd6830f96..30b4643208c5 100644 --- a/docs/get-started/installation-problems/react.mdx +++ b/docs/get-started/installation-problems/react.mdx @@ -1,13 +1,13 @@ - Add the `--type react` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type react + npx storybook@latest init --type react ``` - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --package-manager=npm + npx storybook@latest init --package-manager=npm ``` - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it: diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx index 28c60ce77dd7..d0bfd5284d68 100644 --- a/docs/get-started/installation-problems/svelte.mdx +++ b/docs/get-started/installation-problems/svelte.mdx @@ -1,13 +1,13 @@ - Add the `--type svelte` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type svelte + npx storybook@latest init --type svelte ``` - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --package-manager=npm + npx storybook@latest init --package-manager=npm ``` ### Svelte Native diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx index ec6d98d4bbbf..84f464a5680e 100644 --- a/docs/get-started/installation-problems/vue.mdx +++ b/docs/get-started/installation-problems/vue.mdx @@ -2,16 +2,16 @@ ```shell # For Vue 2 projects - npx storybook init --type vue + npx storybook@latest init --type vue # For Vue 3 projects - npx storybook init --type vue3 + npx storybook@latest init --type vue3 ``` - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example: ```shell - npx storybook init --package-manager=npm + npx storybook@latest init --package-manager=npm ``` - For other installation issues, check the Vue README files for additional instructions: diff --git a/docs/get-started/installation-problems/web-components.mdx b/docs/get-started/installation-problems/web-components.mdx index 4a212340616a..1a25db5eadec 100644 --- a/docs/get-started/installation-problems/web-components.mdx +++ b/docs/get-started/installation-problems/web-components.mdx @@ -1,7 +1,7 @@ - Add the `--type web_components` flag to the installation command to set up Storybook manually: ```shell - npx storybook init --type web_components + npx storybook@latest init --type web_components ``` - For other installation issues, check the Web Components README files for additional instructions: diff --git a/docs/snippets/common/init-command.npx.js.mdx b/docs/snippets/common/init-command.npx.js.mdx index 97177a2cfd64..af75533f78c8 100644 --- a/docs/snippets/common/init-command.npx.js.mdx +++ b/docs/snippets/common/init-command.npx.js.mdx @@ -1,3 +1,3 @@ ```shell -npx storybook init +npx storybook@latest init ``` diff --git a/docs/snippets/common/init-command.pnpm.js.mdx b/docs/snippets/common/init-command.pnpm.js.mdx index ea6bc0bf1bcc..f515170706cf 100644 --- a/docs/snippets/common/init-command.pnpm.js.mdx +++ b/docs/snippets/common/init-command.pnpm.js.mdx @@ -1,3 +1,3 @@ ```shell -pnpm dlx storybook init +pnpm dlx storybook@latest init ```