Closes #29576

What I did

Added two workaround for polka+sirv:

1. sirv doesn't support serving single files, only directories (which is fair). added a workaround to detect when files need to be served, and if so, serve the parent dir instead, but filtering only for that file.

2. sirv+polka has a bug (🤷) where serving multiple dirs on the same endpoint results in only the first sirv instance to work. added a workarund so any number of middlewares will continue to work.

I noticed when testing, that if you serve multiple dirs at the same path with conflicting files, dev and build are inconsistent. (in the testing scenario below, that would be /my-static/file-b.txt) dev will serve the file that matches the first staticDir entry with a match, while build will produce the last file that matches.

This is because serving stops at the first sirv that matches, while building copies the files over one by one, and so the last one wins naturally. A solution would be to traverse the staticDirs in reverse order in either serve or build, so they match, but I'm not sure if that will break other use cases, so I've opted for just not fixing that here. 🤷

Checklist for Contributors

Testing

@valentinpalkovic I haven't added any tests for this. I don't think this is really unit-testable. Adding a bunch of static dirs to all sandboxes seems a bit too much. I could add some static dirs just for the UI Storybook and have a story show their content. Then it would be tested by Chromatic, but only the built Storybook would be tested, not the dev one which we're fixing here. 🤷

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Add the following to code/.storybook/main.ts:

  staticDirs: [
    {
      from: './some-static/a-dir',
      to: '/my-static',
    },
    {
      from: './some-static/b-dir',
      to: '/my-static',
    },
    {
      from: './some-static/just-a-file.txt',
      to: '/the-file.txt',
    },
    {
      from: './some-static/just-a-file.txt',
      to: '/my-static/the-file.txt',
    },
  ],

2. Add the corresponding files to code/.storybook with some content:

some-static/
├── just-a-file.txt
├── a-dir/
│   ├── file-a.txt
│   └── file-b.txt
└── b-dir/
    ├── file-b.txt
    ├── file-c.txt
    └── sub/
        └── file-d.txt

3. Start Storybook dev and visit the following URLs and see that they work:

   1. http://localhost:6006/my-static/file-a.txt
   2. http://localhost:6006/my-static/file-b.txt
   3. http://localhost:6006/my-static/file-c.txt
   4. http://localhost:6006/my-static/sub/file-d.txt
   5. http://localhost:6006/my-static/the-file.txt
   6. http://localhost:6006/the-file.txt

4. Build the storybook and visit the same URLs and see that they work.

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Based on the provided information, I'll create a concise summary of the PR changes focusing on the static file serving improvements in Storybook:

This PR adds workarounds for serving static files in Storybook, addressing issues with the sirv and polka middleware stack to improve static file handling.

• Added fix in code/core/src/core-server/utils/server-statics.ts to serve single files by using parent directory with filtered access
• Implemented workaround for serving multiple directories at the same endpoint by preserving request URL state
• Fixed regression from Express to Polka migration that prevented serving individual files in staticDirs config
• Maintains backward compatibility with existing staticDirs configurations including single file paths
• Note: Dev and build environments may handle conflicting files from multiple directories differently