stories.json #12336

JohannesAnd · 2020-09-01T10:05:09Z

JohannesAnd
Sep 1, 2020

Hello,

I am trying to use storybook composition by hosting the storybooks in google cloud storage. I am however getting an error where it looks for a stories.json file which does not get created when building storybook. How would I go about making this work? Do I need to create this stories.json file?` I've looked at a lot of issues etc. on this repo, but not found a solution yet.

Answered by shilman

Jun 10, 2025

It's now called index.json and you can generate it by calling storybook build or storybook index (much faster because it only generates the index file and doesn't build the rest of the Storybook)

Edit: If you don't need the file on disk it's also served by storybook dev

View full answer

shilman · 2020-09-05T01:31:22Z

shilman
Sep 5, 2020
Maintainer

You can generate the stories.json using npx sb extract. @ndelangen @jonniebigodes this needs documentation

9 replies

aharris Sep 16, 2020

Looks like you need to build prior to running this:

yarn build-storybook && npx sb extract

JohannesAnd Sep 18, 2020
Author

I found the issue. I am building storybook at a publicPath subStorybooks/xyz which is configured in the webpack config. As far as I can tell, there are no config for extracting from here. It will serve it at root, and the linked files will not be loaded correctly.

When I set the publicPath to / it works fine

JohannesAnd Sep 18, 2020
Author

Changing the line in the useLocation function in extract.js

const result = `http://localhost:${port}/iframe.html`;

to

const result = `http://localhost:${port}/subStorybooks/xyz/iframe.html`;

seems to solve the issue. Maybe you can expose an option for defining the publicPath for extract?

jonniebigodes Sep 18, 2020
Maintainer

@JohannesAnd i had a chat during this week with @ndelangen and he told me that you can use sb extract to a given folder. I've covered it in the pull request. You can use sb extract storybook-build-directory directory-for-stories-json/ with that you probably can use it for a nested one. Based on what he told me you'll need to add both arguments to make it work.

See if it helps

Stay safe

JohannesAnd Sep 23, 2020
Author

That would have worked if the requests from iframe.html were relative. If I serve the code from the subdirectory, the html still tries to read it from the whole path from root. Setting the paths makes the iframe.html (located at root) try to get files from '/subStorybooks/xyz/somefile.something'.

lainafoodx · 2020-09-11T03:57:22Z

lainafoodx
Sep 11, 2020

metadata.json also fails to be created. npx sb extract unfortunately does not resolve the issue.

2 replies

shilman Sep 11, 2020
Maintainer

I don't think metadata.json is required?

ndelangen Sep 23, 2020
Maintainer

metadata.json is optional indeed

aharris · 2020-09-15T14:50:25Z

aharris
Sep 15, 2020

npx sb extract resolved my this issue for me.

I will note though that this builds to ./storybook-static so you need to include that in your start-storybook command in order for it to work.

start-storybook -p 6006 -s ./storybook-static

2 replies

aharris Sep 15, 2020

Is there anyway to get this to run from the dev server rather than needed to extract with every file change?

ndelangen Sep 23, 2020
Maintainer

This should be pretty easy to implement, I'd be happy to assist a bit in a zoom call if you're interested in contributing this feature:

https://calendly.com/ndelangen/storybook

jonniebigodes · 2020-09-17T21:19:48Z

jonniebigodes
Sep 17, 2020
Maintainer

Just created a pull request to address this discussion in here. If all parties involved in this discussion are ok i would love to get some feedback in the pull request to see if you're all ok with it, so that we can merge it, or continue to work on it.

Stay safe all of you

0 replies

Meemaw · 2020-11-21T16:28:08Z

Meemaw
Nov 21, 2020

Is it correct that npx sb extract is required to make Storybook composition work? The documentation is a bit unclear on that. It mentions it is used as an optimisation, but it seems composition does not work without it.

Anyway, trying to do npx sb extract in CI (Github Actions) before uploading assets consistently throws an error:

info connecting to: http://localhost:43277/iframe.html
info installing puppeteer...
TimeoutError: waiting for function failed: timeout 30000ms exceeded
    at new WaitTask (/home/runner/.npm/_npx/4034/lib/node_modules/sb/node_modules/puppeteer-core/lib/DOMWorld.js:549:28)
    at DOMWorld.waitForFunction (/home/runner/.npm/_npx/4034/lib/node_modules/sb/node_modules/puppeteer-core/lib/DOMWorld.js:454:12)
    at Frame.waitForFunction (/home/runner/.npm/_npx/4034/lib/node_modules/sb/node_modules/puppeteer-core/lib/FrameManager.js:657:28)
    at Page.waitForFunction (/home/runner/.npm/_npx/4034/lib/node_modules/sb/node_modules/puppeteer-core/lib/Page.js:1141:29)
    at read (/home/runner/.npm/_npx/4034/lib/node_modules/sb/node_modules/@storybook/cli/dist/extract.js:30:14)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async extract (/home/runner/.npm/_npx/4034/lib/node_modules/sb/node_modules/@storybook/cli/dist/extract.js:87:18)

Any ideas @shilman | @ndelangen ?

11 replies

remysabliet Mar 19, 2021

Same issue, this npx sb extract command is finishing with timeout error because of puppeteer

DimmDell Apr 23, 2021

Still having the same with storybook 6.1.14, npx sb extract finishes with TimeoutError: waiting for function failed: timeout 30000ms exceeded. I checked that there are no runtime errors in my SB, so i dunno why that happens.

ndelangen Apr 23, 2021
Maintainer

@DimmDell Do you have a reproduction you can share so I can debug this?

TomWebbio Jun 4, 2021

@ndelangen

I literally cannot get any situation where this does not happen, so it should be easy to reproduce. Even generating a new Storybook project it will give a timeout on the Puppeteer install.

To be clear, just generate a new CRA project, run SB init and start it up to see that it's working, then run sb extract and watch it fail.

tobi1220 Jul 30, 2021

if you're struggling with the waiting for function failed: timeout 30000ms exceeded error from puppeteer, try having a static version of your storybook build with the script build-storybook instead of running start-storybook and then try to generate the stories.json
e.g.

npm run build-storybook
npx sb extract

also make sure you're passing the location your static storybook is residing in as an argument if it's not the default path, like referenced here:

npx sb extract my-built-storybook-directory my-other-directory/stories.json

avegancafe · 2021-08-10T16:56:47Z

avegancafe
Aug 10, 2021

Has anyone gotten npx sb extract to work locally? I'm trying to point to a local version of storybook via linking to something like localhost:3001 and it requests for the stories.json file and then is permanently stuck in the loading animation for that sub-storybook instance

17 replies

innoveltec Oct 5, 2021

@shilman my stories are located in the libs/my-ui. There you have the .storybook folder with the main for the my-ui library. Running the storybook for my-ui library can be done with the command ‘nx run my-ui:storybook’ building can be done with ‘nx run my-ui:build-storybook’

innoveltec Oct 5, 2021

I am on windows.

shilman Oct 5, 2021
Maintainer

Thanks for providing the repro, and it's working fine on my machine (mac).

I've opened this issue for windows compatibility and will try to track it down this ASAP: #16237

istvandesign Dec 23, 2021

@shilman my stories are located in the libs/my-ui. There you have the .storybook folder with the main for the my-ui library. Running the storybook for my-ui library can be done with the command ‘nx run my-ui:storybook’ building can be done with ‘nx run my-ui:build-storybook’

Hi shilman, did you find a solution to generate the stories.json with nx ?

shilman Dec 23, 2021
Maintainer

You'll need to ask the nx team about that cc @mandarini @juristr

Tim-arts · 2021-09-23T18:25:05Z

Tim-arts
Sep 23, 2021

Setting up buildStoriesJson: true with the latest version (6.4.0 beta) of Storybook makes the interface flickers between the project stories architecture and this message:

Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.

When you reload the page if you're lucky enough you can see your stories, but most of the time you'll see this message

4 replies

MickL Oct 8, 2021

Im at 6.4.0 beta and I dont understand why there is no stories.json and why I should create it manually.

alb3rtuk Oct 14, 2021

Same. How do we disable this? It seems to work fine without the stories.json being there, I just want get rid of the error.

shilman Oct 14, 2021
Maintainer

Did you try upgrading to the latest beta?

npx sb@next upgrade --prerelease

We've fixed a ton of issues in the past couple weeks that were caused by this massive rewrite of Storybook's core.

If you're still seeing the problem after upgrading and can share a reproduction, I'd be happy to take a look. Thanks! See how to create a repro for more info.

Tim-arts Oct 14, 2021

Upgrading to beta.11 fixed all issues on my side (Angular project) (enabling buildStoriesJson flag doesn't make the interface flicker anymore and no error in console so far).

taismassaro · 2022-07-11T14:07:53Z

taismassaro
Jul 11, 2022

Trying my luck here as I spent the whole afternoon trying to find a good explanation on how to setup Storybook Composition without success.

We're splitting our internal UI library into a monorepo and would like to use composition to put all the separate package stories into one unified Storybook. Basically we have the following structure:

- docs/storybook
- packages/framework
- package/components

Where we'd like docs/storybook to compose the stories from the packages.

I'm on the latest version (6.5.9) and still struggling to understand what the steps actually are.

I've added the refs object to the main.js config file in docs/storybook and I'm running yarn storybook for all projects. I've tried both pointing the ref url to localhost while running the package Storybook locally and to a deployed version, none of them worked. I always get infinite loading on the UI and a 404 response for the stories.json file.

Could anyone help me understand what I should be doing instead? This is really blocking us at work right now.

8 replies

taismassaro Jul 12, 2022

@shilman update: after reading this comment in the code I realised the problem was that, because I was running both storybooks at the same time with turborepo, the package one was initializing after the composition one, which caused the check for isPublic to fail. when running them separately one after the other it worked, so thanks for well documented code!

maybe this could be better documented in the public docs? happy to contribute if that's the case.

shilman Jul 12, 2022
Maintainer

@taismassaro great job figuring it out! @jonniebigodes any thoughts on where that might fit in the documentation?

ranisalt Jun 10, 2024

What now that it got removed in v8?

shilman Jun 10, 2024
Maintainer

@ranisalt There's a file called index.json that gets automatically created since v7.

Also, FWIW, a v8 storybook can compose an older version of storybook. But an older version of storybook cannot compose a newer version.

ranisalt Jun 11, 2024

Are these files supposed to be equivalent? They don't share the same structure. The index.json file does not contain parameters, as stories.json used to.

We don't use it for composing, we use it to detect what stories contain changed components in a pull request in order to run snapshots.

Timbo925 · 2022-09-02T13:06:44Z

Timbo925
Sep 2, 2022

I had also had problems with running 2 static storybook pages in the same docker container using nginx to server both. I ended up copying the stories.json from sub-book as a static file in main-book.

main-book (the storybook served on example.com)
sub-book (the storybook served on exmaple.com/sub-book referenced in main-book)

Build Steps

Add features: {buildStoriesJson: true}, to your main.js file in both storybooks.
In sub-book project run build-storybook && cp .storybook/metadata.json storybook-static/metadata.json to build the storybook-static folder. metadata.json is an empty {} json file. (without is was fetching a html page for some reason).
in main-book add the following to main.js. Then run npm run build-storybook

staticDirs: [
    { from: '../../sub-book/storybook-static/stories.json', to: '/main-book/stories.json' },
],
refs: {
 platform: {
    title: 'sub-book',
    url: '/sub-book',
  },
}

Dockerfile for nginx container copies over both static storybooks. main-book is exposed on default path /, sub-book on /sub-book.

COPY ./main-book/storybook-static /usr/share/nginx/html/main-book
COPY ./sub-book/storybook-static /usr/share/nginx/html/sub-book

Seems abit like a roundabout way but by copying the story.json file over to the main-book and then building the static page, it seems like all the references will be correct without sub-book needing to be deployed. Then you only need to expose the static storybooks on the corresponding locations and storybook is happy.

Hopefully this is helpful for someone.

2 replies

mokone91 Oct 12, 2022

im also facing with metadata.json fetching problem, there is no such file in buld result, but storybook requesting it for some reason.

AntonyFagundez Nov 17, 2022

I'm having the same issue, to fixed in my case is make a dummy metadata.json. Because the problem is finding the file metadata.json,
metadata.json

{}

COPY ./workaround-composition/metadata.json ./metadata.json

Dependecies used:

{
    "@storybook/addon-a11y": "^6.5.13",
    "@storybook/addon-docs": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-jest": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/addons": "^6.5.13",
    "@storybook/react": "^6.5.13",
    "@storybook/react-docgen-typescript-plugin": "^1.0.1",
    "@storybook/builder-webpack5": "^6.5.13",
    "@storybook/manager-webpack5": "^6.5.13",
    "webpack": "^5.75.0",
    "@storybook/theming": "^6.5.13",
    "storybook-addon-outline": "^1.4.2",
    "storybook-addon-react-docgen": "^1.2.42",
    "eslint-plugin-storybook": "^0.6.7",
    "@storybook/addon-measure": "^6.5.13",
}

MrBra1nwash · 2025-03-25T10:31:59Z

MrBra1nwash
Mar 25, 2025

Hey folks. Is there any way to make stories.json to be created without a build of the storybook?
I am using storybook 8.6.7 with a composition:

    refs: {
      first: {
        title: 'First',
        url: 'http://localhost:6010/',
      },
      second: {
        title: 'Second',
        url: 'http://localhost:6011/',
      },
    },

And when I run this composed storybook locally (without building) it works well and all stories are presented on the screen. But the console is full of errors like:

GET http://localhost:6010/stories.json 404 (Not Found)
GET http://localhost:6010/metadata.json 404 (Not Found)
GET http://localhost:6011/stories.json 404 (Not Found)

Also http://localhost:6010/stories.json returns 404 by direct access too. I think these files are not generated at all without the build. Do you have any plans to resolve it?

7 replies

dablorhbryan-chwy Jun 9, 2025

For anyone who also had this question, I'm guessing its now called index.json.

shilman Jun 10, 2025
Maintainer

It's now called index.json and you can generate it by calling storybook build or storybook index (much faster because it only generates the index file and doesn't build the rest of the Storybook)

Edit: If you don't need the file on disk it's also served by storybook dev

Answer selected by shilman

levrik Jul 2, 2025

Why is this file actually not automatically served by storybook dev? Do I really have to build it manually? Seems weird and unintuitive for local development.

shilman Jul 6, 2025
Maintainer

@levrik It's also automatically served by storybook dev. Updated.

ekeijl Jul 8, 2025

It's now called index.json and you can generate it by calling storybook build or storybook index (much faster because it only generates the index file and doesn't build the rest of the Storybook)

Edit: If you don't need the file on disk it's also served by storybook dev

@shilman I'm confused why I'm seeing 404 errors for stories.json and metadata.json. By looking at the origin of the request, I can see it's coming from these lines of code.

From this code it seems stories.json is not optional?

I'm using storybook build to build the individual Storybooks. The build output directory only contains index.json and the network request for this file is successful, but the other two files are missing.

Currently using Storybook v9.0.15

shilman Jul 8, 2025
Maintainer

Only index.json is produced in 9.x. stories.json was produced in older Storybooks. metadata.json was never produced.

Uh oh!

stories.json #12336

Uh oh!

Replies: 10 comments · 62 replies

Uh oh!

shilman Sep 5, 2020 Maintainer

Uh oh!

Uh oh!

JohannesAnd Sep 18, 2020 Author

Uh oh!

JohannesAnd Sep 18, 2020 Author

Uh oh!

jonniebigodes Sep 18, 2020 Maintainer

Uh oh!

JohannesAnd Sep 23, 2020 Author

Uh oh!

Uh oh!

shilman Sep 11, 2020 Maintainer

Uh oh!

ndelangen Sep 23, 2020 Maintainer

Uh oh!

Uh oh!

Uh oh!

ndelangen Sep 23, 2020 Maintainer

Uh oh!

jonniebigodes Sep 17, 2020 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ndelangen Apr 23, 2021 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shilman Oct 5, 2021 Maintainer

Uh oh!

Uh oh!

shilman Dec 23, 2021 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shilman Oct 14, 2021 Maintainer

Uh oh!

Replies: 10 comments 62 replies

shilman
Sep 5, 2020
Maintainer

JohannesAnd Sep 18, 2020
Author

JohannesAnd Sep 18, 2020
Author

jonniebigodes Sep 18, 2020
Maintainer

JohannesAnd Sep 23, 2020
Author

shilman Sep 11, 2020
Maintainer

ndelangen Sep 23, 2020
Maintainer

ndelangen Sep 23, 2020
Maintainer

jonniebigodes
Sep 17, 2020
Maintainer

ndelangen Apr 23, 2021
Maintainer

shilman Oct 5, 2021
Maintainer

shilman Dec 23, 2021
Maintainer

shilman Oct 14, 2021
Maintainer