iframe URL 404s

[leanne2]

I have deployed this repo https://github.com/leanne1/swatch-book/ to GH pages but the Storybook iframe 404s: https://leanne1.github.io/swatch-book/

The iframe src is https://leanne1.github.io/swatch-book/iframe.html? which does not exist. So whilst the Storybook UI deploys, my repo demo does not. I followed the simple steps in the README. No custom config.

Any help on getting this working would be appreciated!

[klaidman]

I'm having the same issue. Storybook runs fine locally, but 404s on iframe.html either when built as a static site, or when deployed to gh-pages.

[neilpoulin]

I'm also getting this problem, however, I only run into it when I deploy to GH Pages via CircleCI.

In both cases, I execute a yarn script:
yarn deploy-storybook --ci
which in turns executes
storybook-to-ghpages --out=dist_storybook

Here are the files that get uploaded when using CircleCI:

When I run the same command locally on my dev machine, this is what makes it into GitHub (and the storybook works on the github.io url)

I can verify that I have my GH_TOKEN set in CircleCI and that I am able to push code

[AsukaSong]

any progress?

[shilman]

Just merged this, not sure if it's related: storybookjs/storybook#5947

[neilpoulin]

Yeah, actually. I got my deployments to work by pre-building the storybook assets and deploying in a separate step using the --existing-output-dir flag.

In case it's helpful, here is my CircleCI config (at least the job aliases) and my scripts in package.json

config.yml (excerpt)

  - &build-storybook-steps
    - checkout
    - restore_cache: *restore-root-dependencies
    - restore_cache: *restore-functions-dependencies
    - run:
        name: update npm and yarn
        command: "sudo npm install -g npm@latest && sudo npm install -g yarn@latest"
    - add_ssh_keys:
        fingerprints:
          - "xxxxx"
    - run: yarn build-storybook
    - run: ls dist_storybook
    - run:
        name: Check for iframe.html
        command: |
          if [ ! -f dist_storybook/iframe.html ]; then
            echo "iframe.html File not found!"
            exit 1
          fi
    - run: *fail_notification
  - &deploy-storybook-steps
    - checkout
    - restore_cache: *restore-root-dependencies
    - restore_cache: *restore-functions-dependencies
    - add_ssh_keys:
        fingerprints:
          - "xxxx"
    - run: yarn build-storybook
    - run: ls dist_storybook
    - run:
        name: Check for iframe.html
        command: |
          if [ ! -f dist_storybook/iframe.html ]; then
            echo "iframe.html File not found!"
            exit 1
          fi
    - run: yarn deploy-existing-storybook-ci

    - run: *fail_notification

package.json scripts (excerpt):

{
"scripts": {
  
  "build-storybook": "yarn run config:get && build-storybook -c .storybook -o dist_storybook",
  "deploy-existing-storybook-ci": "yarn run config:get && storybook-to-ghpages --out=dist_storybook --existing-output-dir=dist_storybook --ci",
 
}

Note, the yarn run config:get is just specific to my build process to set some env variables.

[artaommahe]

@shilman had that error (no iframe.html on build-storybook) too, changed from absolute output path to relative one and it has been fixed. Waiting for merging your pr into master, thx

[yairEO]

@artaommahe - in which file did you change the path?

[artaommahe]

@yairEO for my case

// const DIST_PATH = path.resolve(__dirname, 'dist');
const DIST_PATH = 'packages/ui-kit/dist';
const STORYBOOK_PATH = path.resolve(__dirname, '../../libs/ui-kit/src/storybook');

run(`yarn cross-env NODE_ENV=production build-storybook -c ${STORYBOOK_PATH} -o ${DIST_PATH}`);

changed DIST_PATH from absolute to relative

But now, with [email protected], it works with absolute paths.

[notable-spencer]

Ran into the same problem, we were using a docker image to deploy in the CI however the storybook config ./.storybook was not copied into the docker image.

I assume the storybook configuration files are missing or not setup correctly.

[HartiganHM]

I'm also seeing this same issue on our Storybook deployed to GH Pages. However, we only have issues with static assets like the favicon and background images. Some details are below, happy to provide anything else as needed. Thanks!

Dependencies

"@storybook/react": "^5.2.8",
"@storybook/storybook-deployer": "^2.8.7",

Scripts

"storybook-build": "build-storybook -s ./.storybook/public",
 "storybook-deploy": "storybook-to-ghpages --script storybook-build --existing-output-dir=storybook-static",

Error

iframe.html?id=docs-intro--page&viewMode=docs:1 GET https://featherweight-design.github.io/Logo-Mock-1-Square-Inverted.jpg 404

GH Pages branch assets

[Jack-Works]

I think this problem happens in storybook 6 again

[jasonworden]

@Jack-Works Did you solve your issue in Storybook 6?

[Jack-Works]

@Jack-Works Did you solve your issue in Storybook 6?

Yes, but I didn't remember how. Maybe some special command line argument

[jscastanos]

Still getting this error. I'm using Storybook 6 and github actions. Any tips?

[EthanStandel]

Is there a known fix for this yet? Currently experiencing in Storybook@6 seems crazy that there's no programatic solution to this issue

[jonathanadler]

I was having a similar issue.
My storybook deployed successfully to the repo's github page, using storybook-to-ghpages, and I would be able to see the live site.
However, when accessing a story I would get a 404 on /assets/iframe.html, that's cause the real file was under the path: /REPO_NAME/assets/iframe.html.

I fixed this by running a sed command after building storybook.
So my final script looks something like this:

npm run build-storybook && sed -i s=/assets/iframe.=/<YOUR_REPO_NAME>/assets/iframe.=g 'storybook-static/iframe.html' && storybook-to-ghpages --existing-output-dir=storybook-static --ci

I hope this helps anyone

p.s.
Maybe the library can accept an optional --assets-pathname argument, or something like that.

EDIT:
After writing this, I understand that instead of adding the REPO_NAME to the path of /assets/iframe.html it's actually just enough to remove the leading /, which will then make the url relative.
I wonder why build-storybook uses the absolute path for the assets.
Maybe it can be configured there?

ANOTHER EDIT:
Ignore everything I wrote, and use the configuration to add a public path:
storybookjs/storybook#1291

[leandrosrocha]

I am using Storybook Vite and this config worked for me:

module.exports = {
  viteFinal: (config, { configType }) => {
    if (configType === 'PRODUCTION') {
      config.base = './';
    }

    return config;
  },
  ...
};

[ernandosjunior]

@leandrosrocha your solution works for me, thank you.