Storybook is more than a UI component development tool. Teams also publish Storybook online to review and collaborate on works in progress. That allows developers, designers, and PMs to check if UI looks right without touching code or needing a local dev environment.
First, we’ll need to build Storybook as a static web application using
build-storybook, a command that’s installed by default. If you're using Yarn run the following command:
If you're using npm run the following command:
build-storybookcommand with the
-oflag as you might unknowingly overwrite essential files and folders. For instance avoid running
build-storybook -o ./as this will replace the root project contents with the output of the command.
Storybook will create a static web application at the path you specify. This can be served by any web server. Try it out locally by running:
Asides from the
-o flag, you can also include other flags to build Storybook, for instance if you're using Docs, you can append the
--docs flag and Storybook will build your MDX and CSF stories into a rich and interactive documentation.
You can learn more about these flag options here.
Once your Storybook is built as a static web app it can be deployed to any static site hosting services. The Storybook team uses Chromatic, a free publishing service made by Storybook maintainers that documents, versions, and indexes your UI components securely in the cloud.
We also maintain
storybook-deployer to deploy to GitHub pages or AWS S3.
Publishing Storybook as part of the development process makes it quick and easy to gather team feedback.
A common method to ask for review is to paste a link to the published Storybook in a pull request or Slack.
If you publish your Storybook to Chromatic, you can use the UI Review feature to automatically scan your PRs for new and updated stories. That makes it easy to identify what changed and give feedback.
Storybook allows you to browse components from any Storybook published online inside your local Storybook. It unlocks common workflows that teams often struggle with:
Toggle between multiple versions of Storybook to see how components change between versions. This is useful for design system package authors who maintain many versions at once.