Excluding specific story exports from static builds

[ccrowley96]

Hi everyone : )

Our team is building a React component library with Storybook. Certain components are tied to backend APIs which require callback URLs, because of this, these components error out in the static / docs build of our storybook. We've created mock stories for documentation purposes and only want those stories exported in the build process.

Here's what we're trying to do:

• Render all stories when running start-storybook.
• Build only stories marked (in some way through args, filename, params, etc) as mocks when running build-storybook

I'm not sure how to get this working. So far, it seems like the .storybook/main.js webpackFinal configType may be of use here.

• When running start-storybook - configType=DEVELOPMENT
• When running build-storybook - configType=PRODUCTION

If anyone has any tips / configuration for something like this, please let me know!

[shilman]

You might be able to conditionally set CSF's excludeStories based on an environment variable:

https://storybook.js.org/docs/react/api/csf#non-story-exports
https://storybook.js.org/docs/react/configure/environment-variables

[ccrowley96]

Oh very cool @shilman. Do you know if excludeStories works on a global level? Or does that need to be in each .stories.tsx file's default export object?

[shilman]

It currently works per file. I might reconsider this in a future version of CSF.