Storybook maintainer here
We have an interesting issue report relating to storybook as a artifact in CircleCI.
I’d love for someone at CircleCI to have a peek at it, and possible offer some suggestions.
TLDR:
When static built of storybook is saved as an artifact, it can be opened, but some query parameters get added (for authentication?).
sub request (ESM modules/JS code) don’t get this?
causing 403 responses
for ease of reference, here’s the full text of the issue reported at the storybook repository:
We are currently deploying our generated storybook files as a artifacts on circleCI so we can test our doc.
It is working well with storybook 6.x, but it is not working with storybook 7.x anymore.
The reason is the following:
when loading a script from the generated index.html page from the output.circle-artifacts.com domain, we are being redirected to a AWS domain (e.g. circleci-tasks-prod.s3.us-east-1.amazonaws.com), using a url containing a bunch of query parameters so that the query can return the actual script without an actual authentication
some of those scripts are ESM scripts being copied as-is from the @storybook dependency files
since some of the storybook files are importing in a relative manner (e.g. import xyz from './some-path.mjs), it results in trying to import from that same AWS domain, but without the necessary query parameters, so we’re getting a 403
A solution would be to actually compile those ESM files and transform those paths and rely on webpack’s automatic public path handling to use the initial url of the script instead of the one after redirection.
Thanks for posting here @ndelangen . I checked with our team, We haven’t made a change around this particular process, and the core of the issue is something to do with a change in file type from v6 - v7.
Are you starting to do any process different? Creation of the .mjs files?
Edit: We do have some people looking into ways that we’ve seen this work to share.
@ndelangen I wanted to give you a quick update - we’re looking into enabling proxying Javascript in artifacts as a way to avoid what you’re experiencing and doing a security review. I will keep you updated.
