Storybook: dynamic preview-head.html

[andre-brdoch]

Hi everyone 👋 Is it possible to somehow dynamically generate preview-head.html? Basically we want to include different resources, depending on the environment, for example:

<!-- staging -->
<script src="https://stagingdomain.com/lib.js"></script>

<!-- production-->
<script src="https://productiondomain.com/lib.js"></script>

The only way I found in the docs, was using the CLI option --config-dir. However, this would mean we need to have several dirs with mostly identical configs.

[andre-brdoch]

I just found the answer in the docs, it is actually possible to use env vars in preview-head.html:
https://storybook.js.org/docs/configurations/env-vars/#usage-in-custom-headbody

[andre-brdoch]

i created a PR for making this more clear in the docs: https://github.com/storybookjs/storybook/pull/11095

[donaldpipowitch]

Can this be re-opened? I actually just needed this, but with a little bit more logic involved than env variables. Something like this would be nice, so I can align preview-head.html a little bit more with the behaviour of our src/index.html:

<!-- my preview-head.html -->
<!-- ./some-module should be compiled by the same webpack config I use for the rest of my config -->
<%= require('./some-module').someExportedValueCalculatedAtBuildTime %>

Update

For now I'll manually override the template config.plugins[1].options.template = resolve(__dirname, 'iframe.ejs');

[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!

[MaRuifeng]

Can this be re-opened? I faced a similar use case on EJS syntax support documented here https://stackoverflow.com/questions/63613348/is-it-possible-to-access-webpack-config-properties-through-the-preview-head-html.

[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!

[dutscher]

Can this be re-opened? I actually just needed this, but with a little bit more logic involved than env variables. Something like this would be nice, so I can align preview-head.html a little bit more with the behaviour of our src/index.html:

<!-- my preview-head.html -->
<!-- ./some-module should be compiled by the same webpack config I use for the rest of my config -->
<%= require('./some-module').someExportedValueCalculatedAtBuildTime %>

Update

For now I'll manually override the template config.plugins[1].options.template = resolve(__dirname, 'iframe.ejs');

i end up with this
```// template default: @storybook/core/dist/server/templates/index.ejs
config.plugins[1].options = {
...config.plugins[1].options,
template: path.resolve(__dirname, 'index.override.ejs'),
};

index.override.ejs

<% // OVERRIDE START
const { name } = require('../package.json');
%>

<% // OVERRIDE ENDS %>
```

[donaldpipowitch]

In order to add some global styles to storybook which are the _same_ global styles I have in my app I'd actually need to generate this HTML file asynchronously 🤔 (Background: https://github.com/styleguidist/mini-html-webpack-plugin/issues/39)

[dutscher]

@donaldpipowitch look into my main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L26 then u can handle your override by yourself ;)

cheers