storybook: Unable to host static build on sub folder

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 19 (3 by maintainers)

Most upvoted comments

@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.

patsplat on Aug 27, 2020

try it

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

and run build-storybook.

kimromi on Jan 28, 2020

If you want to inject the base rule only for the production (static) builds, and leave the dev server untouched, you have to:

do NOT use the .storybook/manager-head.html file
add a managerHead preset in your main.js file and inject the base there, checking for confType condition, like this:

module.exports = {
  managerHead: (head, { configType }) => {
    if (configType === 'PRODUCTION') {
      return (`
        ${head}
        <base href="/shared-ui/">
      `);
    }
  },
}

Ref: #13432

MXTcomunica on Nov 15, 2021

Having this same issue, anyway to resolve this?

cogoo on Sep 27, 2019

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

marr on Mar 16, 2020

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.

drwpow on Dec 12, 2019