Adding base tag to stories/preview-head.html

[dgibson666]

Summary

I tried adding a base tag to my preview-head.html but it's not working because Storybook is adding its own . How can I update the base path? Everything works locally, but when deployed in a project folder my assets using a relative path starting with / are broken. Thanks.

Additional information

Storybook 8.1.6

Create a reproduction

No response

[Marklb]

I don't have an answer for changing the base, but if the problem is just with accessing assets then there may be another solution. Have you looked at Storybook's staticDirs config? https://storybook.js.org/docs/configure/integration/images-and-assets#import-assets-into-stories

Even if you change the base, files may still not be reachable, if Storybook doesn't expose the directory. With staticDirs, you can configure what directories should be hosted as static directories. They are also fairly configurable.

[Marklb]

I don't know if I am understanding what exactly you are trying to do.
If I have the following structure:

.storybook
  main.ts
src/assets
  image.png

Then in .storybook/main.ts:

const config: StorybookConfig = {
  ...
  staticDirs: [
    '../src/assets',
  ],
};

In a component, I can use that image, like the following:

<img src="/image.png" />

If I want more control, I can configure further:

// .storybook/main.ts
const config: StorybookConfig = {
  ...
  staticDirs: [
    { from: '../src/assets', to: '/my-assets' },
  ],
};

<img src="/my-assets/image.png" />

Is that not what you are asking about?

[dgibson666]

Everything works locally, but when deployed in a project folder (not in the root) my assets using a relative path starting with / are broken. This is pretty much what base is meant to solve.

[Marklb]

I think I understand and get why staticDirs is probably not enough.

I am not positive what "deployed in a project folder" means, exactly. To me that could describe multiple scenarios, such as hosting two applications in different directories, hosting storybook in a sub directory, etc. Depending on your hosting platform or framework, it could also have other meanings.

I will mention the two scenarios that I can think of, without more information.

Scenario 1

Are you trying to host storybook and another application in different directories, but you want storybook to use the assets from the other application? So, your assets aren't published with the storybook application?

I am picturing a scenario, like the following structure:

storybook/
  index.html
my_app/
  index.html
  assets/
    image.png
    script.js

In that scenario, if you host both as separate sites, with your host resolving based on the root of each app's directory then "/assets/image.png" would only work from my_app/index.html.

If that is what you are referring to, changing the base to where your assets are would then make storybook's scripts not be found, unless a script can update all of the paths that storybook uses, right? If that is possible, I haven't seen it, but I don't know for sure that there isn't a way.

I don't know your hosting configuration, but if you this is your situation then could you set an alias/redirect that resolves the correct asset path?

Scenario 2

Are you trying to host storybook in a subdirectory of another application, where storybook isn't hosted at the root of the site?

I am picturing a scenario, like the following structure:

index.html
assets/
  image.png
  script.js
storybook/
  index.html

In that scenario, I assume site.com resolves /index.html and site.com/storybook resolves /storybook/index.html. I used to do something, like that, on an old version of storybook and if base is causing that to not work then I would have to search to see if it is still possible. This situation has been discussed before, but I don't remember the answer. If I get more time then I could try to find those other discussions on this type of scenario.

[dgibson666]

You're really overcomplicating it. Storybook is the root in local development. When deployed, it goes in a folder based on the project name, so it's a level deeper. /assets doesn't work because it now lives in /project/assets.

[Marklb]

Sorry if I am over complicating it and causing the answers to be more confusing. I am just trying to make sure I understand the problem. When it comes to folders, that doesn't really clarify how your site is hosted, because the folder structure isn't always how they are always resolved, it sounds like it is the case for your setup.

Let's say your website is https://my-site.com, which is resolving files at the root of a directory and your storybook files are in /project. So, you would access your storybook application with the url https://my-site.com/project.

If I am still not understanding then an example project that can be run would help. It could be as simple as generating a sandbox npx storybook@next sandbox then maybe adding a script to package.json that would host the site in a way that recreates your problem, such as "host-storybook": "http-server ./storybook-static".

If that is correct, I think you would need a build step that replaces your paths, such as the solution described in this comment: #12444 (comment)

Based on my understanding of base, I don't think it is going to solve your problem and is why you may need to use a build step to replace your paths, but correct me if I am wrong. If you access your storybook application with my-site.com/project and your assets are at my-site.com/project/assets then if you add <base href="...">, with any thing for the href, any thing with a leading / will still be relative to the root. While many sources seem to say / is a relative URL, for some reason, I have always considered it an absolute url. It is always relative to the root. So, <img src="/assets/image.png" /> should always be my-site.com/assets/image.png, no matter if you are are my-site.com/project, my-site.com/project/other.