Connect Storybook

Brienne Wong
Brienne Wong
  • Updated

You can integrate Storybook with your zeroheight account. With our integration, you can connect your Storybook instance to zeroheight once in the styleguide settings and can easily add your stories to your styleguide.ย 

Set up in Storybook

You'll need to make sure Storybook is properly configured to connect it to zeroheight. If you need help, talk to your Storybook administrator.

When using the storybook block, Storybook must be set up to expose stories.json and this must be available at the root of where your Storybook instance is hosted.

For example, if you access a story at https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--default then it should be accessible at https://gitlab-org.gitlab.io/gitlab-ui/stories.json

You can configure Storybook to build stories.json by adding the following setting to your main storybook config

module.exports = {
  // ...
  features: { buildStoriesJson: true }
};

VPN Mode

If using the VPN mode, there might be additional technical setup required. The header Access-Control-Allow-Origin must be set to allow the editors' browser to be able to access the stories when adding. The value of the header must either be a wildcard (*) or the specific domain for your team on zeroheight (https://the-team.zeroheight.com)

Set up in zeroheight

Once you complete the setup in Storybook, you can finish setting up the Storybook integration in zeroheight.

1) In the Styleguide settings under Code Resources, add a Name and paste your Storybook URL

๐Ÿ‘‰ Tip: You can paste the URL for any of your Storybook stories here, and it will connect the entire Storybook instance

Storybook resources area in the Storybook section of the Styleguide settings

2) Click Add Storybook

3) Click Save

4) Youโ€™re ready to add Storybook into your styleguide!

Storybook is added in your zeroheight account

You can still embed your Storybook using the Storybook block

Update Storybook

  • If you update the version of Storybook that you want to reference, edit the Storybook URL in the Styleguide settings
  • This will update all stories currently in your styleguide, as long as the story structure and story name remain the same across versions
  • If you want to integrate multiple Storybook versions into your styleguide, click +Add another in the Styleguide settings to add these as separate integrations.
    Click Add another to add another Storybook to your account

Was this article helpful?