mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 04:31:06 +08:00
46 lines
5.3 KiB
Plaintext
46 lines
5.3 KiB
Plaintext
- Add the `--type angular` flag to the installation command to set up Storybook manually:
|
|
|
|
```shell
|
|
npx storybook 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
|
|
```
|
|
|
|
- Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
|
|
|
|
```shell
|
|
npx storybook@next automigrate
|
|
```
|
|
|
|
Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.
|
|
|
|
- If you're using the custom Storybook builder, Storybook will not automatically open a browser window or tab. It's is a known issue that we plan to fix in future releases.
|
|
|
|
- When adding Storybook to your Angular project, check if you're running the install command from the root directory. Or in a monorepo environment inside the directory where the `angular.json` file is located.
|
|
|
|
- If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
|
|
|
|
| Configuration element | Description |
|
|
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| `"browserTarget"` | Build target to be served using the following format. <br/> `"example-project:builder:config"` |
|
|
| `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace. <br/> `"tsConfig": "./tsconfig.json"`. |
|
|
| `"port"` | Port used by Storybook. <br/> `"port": 6006` |
|
|
| `"host"` | Set up a custom host for Storybook. <br/> `"host": "http://my-custom-host"` |
|
|
| `"configDir"` | Storybook configuration directory location. <br/> `"configDir": ".storybook"` |
|
|
| `"https"` | Starts Storybook with HTTPS enabled. <br/> `"https": true` <br/> Requires custom certificate information. |
|
|
| `"sslCa"` | Provides an SSL certificate authority. <br/> `"sslCa": "your-custom-certificate-authority"` <br/> Optional usage with `"https"` |
|
|
| `"sslCert"` | Provides an SSL certificate. <br/> `"sslCert": "your-custom-certificate"` <br/> Required for `https` |
|
|
| `"sslKey"` | Provides an SSL key to serve Storybook. <br/> `"sslKey": "your-ssl-key"` |
|
|
| `"smokeTest"` | Exit Storybook after successful start. <br/> `"smokeTest": true` |
|
|
| `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br/> `"ci": true` |
|
|
| `"quiet"` | Filters Storybook verbose build output. <br/> `"quiet": true` |
|
|
| `"docsMode"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.md#preview-storybooks-documentation). <br/> `"docsMode": true` |
|
|
| `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.md#importing-css-files) to be used with Storybook. <br/> `"styles": ["src/styles.css", "src/styles.scss"]` <br/> |
|
|
| `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br/> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` |
|
|
|
|
- For other installation issues, check the [Angular README](../../app/angular/README.md) for additional instructions.
|