build-storybook to subfolder results in 404 from iframe.html

Failed to load resource: the server responded with a status of 404

/assets/vendor.[hash].js /assets/iframe.[hash].js /assets/iframe.[hash].css

To reproduce:

npx build-storybook  --output-dir build/docs
npx serve@latest build

Browse to http://localhost:3000/docs/

Cause:
in the generated build/docs/iframe.html these assets are loaded via absolute urls: src="/assets/...

Possible fix:. Generate relative urls: src="assets/... (no leading slash)

Workaround: Running a post build script:

const fs = require('fs');
const filename = 'build/docs/iframe.html';
let html = fs.readFileSync(filename, "utf8");
html = html.replaceAll('"/assets/', '"assets/'); 
fs.writeFileSync(filename, html);
// repeat for other files that use /assets/ urls.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:19 (11 by maintainers)

Top GitHub Comments

3reactions

bfangercommented, Feb 11, 2022

Thanks!

  viteFinal(config) {
    config.base = ''; //  './' also works, but i like "assets/.." urls better than "./assets/..." urls.
    return config;
  },

works in both start-storybook & build-storybook, should base: '' be the new default for storybook-builder-vite?

2reactions

IanVScommented, Feb 11, 2022

Is this helpful? https://github.com/eirslett/storybook-builder-vite/issues/96#issuecomment-1016548429

Essentially, I think you need to set the base for vite, so it knows that you have a nested directory.

Top Results From Across the Web

build-storybook to subfolder results in 404 from iframe.html - Issues ...

build-storybook to subfolder results in 404 from iframe.html. Failed to load resource: the server responded with a status of 404. /assets/vendor.

Build Storybook iframe.html Failed to load resource #11694

When build storybook is executed, output is executed or distributed. However, it failed to load resoure despite the bundle file in iframe.html.

Storybook IFrame 404 - Simon Online

In this case we had a project called Agent%20Portal on disk. Renaming it to just AgentPortal fixed up storybook right away.

iframe.html no longer built with --preview-url #14591 - Issuehunt

Initially, we built the static files with build-storybook -o public/view-components/stories . But we had an issue that when accessing localhost:4000/view- ...

404 page when trying to access a /media subdirectory file in ...

I try to load a pdf file into an iframe using JavaScript in a magento page: My pdf files are stored in /media/subdirectory....