Storybook: Unable to host static build on sub folder

[jontansey]

I'm trying to host the static build of story book on a sub folder e.g. https://domain.com/shared-ui and I'm having some trouble. The index.html file generated by storybook has all of the scripts like this <script src="main.[hash].bundle.js"> which is an issue because they're not at main.[hash].bundle.js they're at /shared-ui/main.[hash].bundle.js I've tried all the config options and it's still not prepending shared-ui to those files.

Things I've tried:

• Changing values in the .storybook/wepback.config.js - config.output.path, config.output.filename & config.output.publicPath
• Changing the homepage value in package.json
• Running the build-storybook command with -o /shared-ui/ to output the static site to /shared-ui/
• Modifying the webpack config HtmlWebpackPlugin options to use a custom template for the page generation - this seems this only works for iframe.html (also built by the static site script) and not index.html

Ideally I'm looking for a way to configure sb correctly to generate the script tags in index.html with the correct url or override the template for index.html so I can do it myself

Many thanks for any help that you can give

[cogoo]

Having this same issue, anyway to resolve this?

[ndelangen]

Interesting, we do this ourselves, without problem:
https://storybookjs-next.now.sh/dev-kits/
https://storybookjs-next.now.sh/official-storybook/

Anything special to how you serve those subfolders?

Do you have a reproduction we could look at?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[drwpow]

Just wanted to chime in and say I too had this issue, but it was _because_ I had a configuration error in webpack.config.js unrelated to this. I was able to get this working out-of-the-box with the latest Storybook with no configurations 🎉.

If others are experiencing the same problem, it may be from some custom configuration you or someone on your team added. Try removing all of that, then adding your config back one-by-one to see what’s breaking the subfolder build.

[kimromi]

try it

$ echo '<base href="/shared-ui/">' >> .storybook/manager-head.html

and run build-storybook.

• https://storybook.js.org/docs/configurations/add-custom-head-tags/#add-tags-or-scripts-to-the-main-ui
• https://storybook.js.org/docs/configurations/serving-static-files/#absolute-versus-relative-paths
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

[gvinter]

This is still a problem for me. I'm in a Rails app, and want to load Storybook at abc.io/storybook, but the main, vendors, and runtime JS files and iframe.html files are all src'd to the root, when they should be at /storybook/....

Build command I'm using: build-storybook -o ./public/storybook

Here's what I have tried:

• Adding <base href="/storybook/" /> to manager-head.html
• Trying to update webpack in main.js, but when I add --debug-webpack this isn't represented in the config logged:

module.exports = {
  stories: ['../**/*.stories.(jsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
  webpackFinal: async (config) => {
    const updatedConfig = {
      output: {
        path: './storybook',
        filename: '/storybook/[name].[hash].bundle.js',
        publicPath: '/storybook/',
      },
      ...config,
    };

    return updatedConfig;
  },
};

• I've tried it with webpack instead of webpackFinal
• When I remove this webpackFinal, it also doesn't work (for an "out of the box" attempt)

Any help would be much appreciated!

[ndelangen]

@gvinter I'm unsure what's going on..

We use this ourselves:
https://next--storybookjs.netlify.com/cra-ts-essentials/

In the we have storybook running in a sub-dir without special config.
This should work out of the box.

[gvinter]

We got it sorted on our side. The <base> element was the way to go, no webpack alternations needed.

[marr]

The base solution seems to work fine for production (static) builds. But how do you get the dev server working with it?

[patsplat]

@marr If the web server doesn't enforce the trailing slash add a redirect to manager-head.html:

<script>
if (window.location.pathname == "/storybook") {
  window.location.pathname = "/storybook/"
}
</script>

This will also work for local dev, since the condition won't be triggered.