Skip to content

Commit

Permalink
Fix install instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
jonniebigodes committed Apr 6, 2023
1 parent 71b2046 commit 9923805
Show file tree
Hide file tree
Showing 26 changed files with 36 additions and 36 deletions.
4 changes: 2 additions & 2 deletions code/frameworks/angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/ember/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/html-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/preact-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/react-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/server-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`:
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/svelte-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/vue-vite/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/vue-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/vue3-vite/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/vue3-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/web-components-webpack5/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion docs/addons/writing-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

<div class="aside">
Expand Down
4 changes: 2 additions & 2 deletions docs/builders/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <webpack5 | vite>
npx storybook@latest init --builder <webpack5 | vite>
```

## Manual setup
Expand Down
2 changes: 1 addition & 1 deletion docs/builders/vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions docs/get-started/installation-problems/angular.mdx
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
4 changes: 2 additions & 2 deletions docs/get-started/installation-problems/ember.mdx
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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.
2 changes: 1 addition & 1 deletion docs/get-started/installation-problems/html.mdx
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
4 changes: 2 additions & 2 deletions docs/get-started/installation-problems/preact.mdx
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 2 additions & 2 deletions docs/get-started/installation-problems/qwik.mdx
Original file line number Diff line number Diff line change
@@ -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
```
4 changes: 2 additions & 2 deletions docs/get-started/installation-problems/react.mdx
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
4 changes: 2 additions & 2 deletions docs/get-started/installation-problems/svelte.mdx
Original file line number Diff line number Diff line change
@@ -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
Expand Down
6 changes: 3 additions & 3 deletions docs/get-started/installation-problems/vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion docs/get-started/installation-problems/web-components.mdx
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
2 changes: 1 addition & 1 deletion docs/snippets/common/init-command.npx.js.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
```shell
npx storybook init
npx storybook@latest init
```
2 changes: 1 addition & 1 deletion docs/snippets/common/init-command.pnpm.js.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
```shell
pnpm dlx storybook init
pnpm dlx storybook@latest init
```

0 comments on commit 9923805

Please sign in to comment.