16 KiB
title |
---|
CLI options |
The Storybook command line interface (CLI) is the main tool you use to build and develop Storybook.
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may opt-out if you'd not like to share any information.
API commands
All of the following documentation is available in the CLI by running storybook --help
.
The commands work slightly differently if you're using npm instead of Yarn to publish Storybook. For example, npm run storybook build -- -o ./path/to/build
.
dev
Compiles and serves a development build of your Storybook that reflects your source code changes in the browser in real-time. It should be run from the root of your project.
storybook dev [options]
Options include:
Option | Description |
---|---|
--help |
Output usage information storybook dev --help |
-V , --version |
Output the version number storybook dev -V |
-p , --port [number] |
Port to run Storybook storybook dev -p 9009 |
-h , --host [string] |
Host to run Storybook storybook dev -h my-host.com |
-c , --config-dir [dir-name] |
Directory where to load Storybook configurations from storybook dev -c .storybook |
--https |
Serve Storybook over HTTPS. Note: You must provide your own certificate informationstorybook dev --https |
--ssl-ca |
Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)storybook dev --ssl-ca my-certificate |
--ssl-cert |
Provide an SSL certificate. (Required with --https)storybook dev --ssl-cert my-ssl-certificate |
--ssl-key |
Provide an SSL key. (Required with --https)storybook dev --ssl-key my-ssl-key |
--smoke-test |
Exit after successful startstorybook dev --smoke-test |
--ci |
CI mode (skip interactive prompts, don't open browser)storybook dev --ci |
--no-open |
Do not open Storybook automatically in the browserstorybook dev --no-open |
--quiet |
Suppress verbose build outputstorybook dev --quiet |
--debug-webpack |
Display final webpack configurations for debugging purposesstorybook dev --debug-webpack |
--webpack-stats-json |
Write Webpack Stats JSON to diskstorybook dev --webpack-stats-json /tmp/webpack-stats |
--docs |
Starts Storybook in documentation mode. Learn more about it in herestorybook dev --docs |
--disable-telemetry |
Disables Storybook's telemetry. Learn more about it herestorybook dev --disable-telemetry |
With the release of Storybook 8, the -s
CLI flag was removed. We recommend using the static directory instead if you need to serve static files.
build
Compiles your Storybook instance so it can be deployed. It should be run from the root of your project.
storybook build [options]
Options include:
Option | Description |
---|---|
-h , --help |
Output usage informationstorybook build --help |
-V , --version |
Output the version numberstorybook build -V |
-o , --output-dir [dir-name] |
Directory where to store built filesstorybook build -o /my-deployed-storybook |
-c , --config-dir [dir-name] |
Directory where to load Storybook configurations fromstorybook build -c .storybook |
--loglevel [level] |
Controls level of logging during build. Available options: silly , verbose , info (default), warn , error , silent storybook build --loglevel warn |
--quiet |
Suppress verbose build outputstorybook build --quiet |
--debug-webpack |
Display final webpack configurations for debugging purposesstorybook build --debug-webpack |
--webpack-stats-json |
Write Webpack Stats JSON to diskstorybook build --webpack-stats-json /my-storybook/webpack-stats |
--docs |
Builds Storybook in documentation mode. Learn more about it in herestorybook build --docs |
--disable-telemetry |
Disables Storybook's telemetry. Learn more about it here.storybook build --disable-telemetry |
--test |
Optimize Storybook's production build for performance and tests by removing unnecessary features with the test option. Learn more here.storybook build --test |
add
Installs a Storybook addon and configures your project for it. Read more in the addon installation guide.
storybook add [addon] [options]
Options include:
Option | Description |
---|---|
--package-manager |
Sets the package manager to use when installing the addon. Available package managers include npm , yarn , and pnpm storybook add [addon] --package-manager pnpm |
-s , --skip-postinstall |
Skips post-install configuration. Used only when you need to configure the addon yourselfstorybook add [addon] --skip-postinstall |
doctor
Added in: Storybook 7.6
Performs a health check on your Storybook project for common issues (e.g., duplicate dependencies, incompatible addons or mismatched versions) and provides suggestions on how to fix them. Applicable when upgrading Storybook versions.
storybook doctor [options]
Options include:
Option | Description |
---|---|
-c , --config-dir |
Directory where to load Storybook configurations fromstorybook doctor --config-dir .storybook |
--package-manager |
Sets the package manager to use when running the health check. Available package managers include npm , yarn , and pnpm storybook doctor --package-manager pnpm |
upgrade
Upgrades your Storybook instance to the latest version. Read more in the upgrade guide.
storybook upgrade [options]
Options include:
Option | Description |
---|---|
-c , --config-dir |
Directory where to load Storybook configurations fromstorybook upgrade --config-dir .storybook |
-n , --dry-run |
Checks for version upgrades without installing themstorybook upgrade --dry-run |
-s , --skip-check |
Skips the migration check step during the upgrade processstorybook upgrade --skip-check |
-y , --yes |
Skips interactive prompts and automatically upgrades Storybook to the latest versionstorybook upgrade --yes |
--package-manager |
Sets the package manager to use when installing the addon. Available package managers include npm , yarn , and pnpm storybook upgrade --package-manager pnpm |
info
Reports useful debugging information about your environment. Helpful in providing information when opening an issue or a discussion.
storybook info
Example output:
Storybook Environment Info:
System:
OS: macOS 14.2
CPU: (8) arm64 Apple M3
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
Browsers:
Chrome: 120.0.6099.199
npmPackages:
@storybook/addon-essentials: ^7.6.6 => 7.6.6
@storybook/addon-interactions: ^7.6.6 => 7.6.6
@storybook/addon-links: ^7.6.6 => 7.6.6
@storybook/addon-onboarding: ^1.0.10 => 1.0.10
@storybook/blocks: ^7.6.6 => 7.6.6
@storybook/preset-create-react-app: ^7.6.6 => 7.6.6
@storybook/react: ^7.6.6 => 7.6.6
@storybook/react-webpack5: ^7.6.6 => 7.6.6
@storybook/test: ^7.6.6 => 7.6.6
storybook: ^7.6.6 => 7.6.6
remove
Added in: Storybook 8.0
Deletes a Storybook addon from your project. Read more in the addon installation guide.
storybook remove [addon] [options]
Options include:
Option | Description |
---|---|
--package-manager |
Sets the package manager to use when removing the addon. Available package managers include npm , yarn , and pnpm storybook remove [addon]--package-manager pnpm |
sandbox
Generates a local sandbox project for testing Storybook features based on the list of supported frameworks. Useful for reproducing bugs when opening an issue or a discussion.
storybook sandbox [framework-filter] [options]
The framework-filter
argument is optional and can filter the list of available frameworks. For example, storybook sandbox react
will only show React-based sandboxes.
Options include:
Option | Description |
---|---|
-b , --branch [branch name] |
Select the branch to use for the sandbox project featuring the available features present in the selected branch (next for the pre-release version, main for the latest stable release)storybook sandbox --branch main |
-o , --output [dir-name] |
Configures the location of the sandbox projectstorybook sandbox --output /my-sandbox-project |
--no-init |
Generates a sandbox project without without initializing Storybookstorybook sandbox --no-init |
If you're looking for a hosted version of the available sandboxes, see storybook.new.