sb extract alternative to puppeteer

[rmknecht]

I build and "extract" several static storybooks for composition within a docker-based CI/CD environment similar to Drone. The sb extract command leverages puppeteer to extract metadata. Puppeteer's headless browser is notoriously difficult to configure and use within docker and other virtual linux environments, and is currently blocking us from implementing fully automated storybook builds.

Is there an alternative for the json metadata fetch that sb extract executes that doesn't require launching a browser? Could a simple GET request be used in puppeteer's place?

Alternatively, a working docker image to use for the cli step would be incredibly helpful.

I can potentially contribute time for a fix if help with on-boarding and familiarization with the ecosystem is possible.

[shilman]

I'd propose a separate command, something like sb csf-extract that is only compatible with [component story format[(https://storybook.js.org/docs/react/api/csf#gatsby-focus-wrapper), which is statically analyzable. That command would be orders of magnitude faster and would not need any external dependencies. It would loop over the files from the stories glob in main.js, read in each one, examine its AST (e.g. using babel) and then dump the stories.json. I think the trick would be how to best support other CSF-like formats such as MDX or Svelte stories, but that could probably be scoped out. WDYT?

[rmknecht]

@shilman that sounds great, a dependency free csf-extract would meet our needs. What does a timeline look like for this feature?

[shilman]

@rmknecht it's not currently on the roadmap. if you're interested in taking a swing at making this happen, we could release it as early as 6.3.

[wKich]

Hi, @rmknecht. I'm working on a screenshot testing tool for Storybook and already have AST processing code to extract stories meta without a browser. And I glad to add the extract command to my tool, so you can use it instead of sb extract. Just give me some time to organize my code so I can add that command to CLI.

[wKich]

@shilman @rmknecht. I released a new version of Creevey 0.7.26 with the command 'creevey --extract'. It generates 'stories.json' file, and it's 10x faster than 'build-storybook && sb extract'.

[adrianiy]

@wKich nice work!

Is there any way to change the output dir?

[wKich]

@adrianiy, do you want to save it into the storybook-static dir? I'm going to make the extract step a part of the build process. So you be able to do 'storybook-build' and get stories.json automatically in the same directory with storybook static. Is it ok for you?

[adrianiy]

yep! that would be nice!

[ssddi456]

is there any progress on this?

[shilman]

@ssddi456 Yes. Starting in 6.3 there's an experimental feature flag called buildStoriesJson that causes storybook to create the file when it starts up in dev mode or in a static production build.

Try adding the following to your .storybook/main.js:

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

In 6.4 it is more robust and also updates stories.json in dev mode as you edit your storybook. It will be a default behavior by 7.0.

[ssddi456]

hmm..... got an empty stories.json like {"v":3,"stories":{}} with this feature switch on. (using 6.3.10) wait for 6.4.

[shilman]

@ssddi456 if you upgrade to 6.4 it has more robust handling and also better error reporting.

npx sb@next upgrade --prerelease

[rmknecht]

Following up to my original post:

6.4 fulfills the original feature request. Thanks @shilman!

Everything is working smoothly in CI with buildStoriesJson: true configured 👍

[stefan2718]

Thanks for implementing this!

For other googlers, I was able to get the stories.json from the dev-server by requesting the /stories.json route.

[saulrobe]

Why is this not documented anywhere? This took me hours to find. 😭