Skip to content

Manager: Redirect index.html to root to fix initialization issues#33625

Closed
cyyoon0311 wants to merge 2 commits into
storybookjs:nextfrom
cyyoon0311:cyyoon0311/33548-fix-index-html-redirect
Closed

Manager: Redirect index.html to root to fix initialization issues#33625
cyyoon0311 wants to merge 2 commits into
storybookjs:nextfrom
cyyoon0311:cyyoon0311/33548-fix-index-html-redirect

Conversation

@cyyoon0311
Copy link
Copy Markdown

@cyyoon0311 cyyoon0311 commented Jan 22, 2026

Closes #33548

What I did

I updated the Core Manager entry point (renderStorybookUI) to detect if the user is accessing the application via /index.html. If detected, it immediately redirects the browser to the root path / (preserving query parameters and hash) before the React application mounts.

Why?

When accessing Storybook explicitly via http://localhost:6006/index.html (without query parameters), the following issues occurred:

  1. Router Initialization Failure: The router logic in url.ts parsed index.html as part of the path, resulting in an undefined story path state. This prevented the "auto-select first story" feature from working.
  2. Malformed Iframe URLs: The Manager calculated the Preview URL by appending iframe.html to the current pathname, resulting in invalid URLs like /index.htmliframe.html, causing 404 errors in the preview iframe.
  3. Inconsistent Environment Behavior: While internal development (yarn storybook:ui) could be patched via user config, generated sandboxes (npm start) remained broken.

Attempting to fix this within url.ts state logic proved brittle due to build caching and complex state synchronization. A browser-level redirect at the entry point provides a robust, universal fix for all environments (Dev UI, Sandboxes, Production).

Checklist for Contributors

Testing

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

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

Manual testing

Caution

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

  1. Run a sandbox: npm start (or yarn storybook:ui for local dev)
  2. Open a browser (preferably Incognito to avoid cache).
  3. Navigate manually to http://localhost:6006/index.html.
  4. Verify: The browser automatically redirects to http://localhost:6006/.
  5. Verify: The first story loads correctly without 404 errors in the network tab.

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

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 22, 2026

📝 Walkthrough

Walkthrough

The PR adds URL redirect handling to Storybook's manager by implementing a guard that detects URLs ending with index.html, removes the suffix while preserving search and hash parameters, and performs a location replacement. The logic is applied via addon registration in the Storybook configuration and an additional guard in the manager UI rendering function.

Changes

Cohort / File(s) Summary
URL Redirect Configuration
code/.storybook/manager.tsx
Replaced addons.setConfig() call with addons.register('redirect-fix') that checks if the current pathname ends with index.html and rewrites the URL to remove index.html before performing a location.replace()
Manager UI Redirect Guard
code/core/src/manager/index.tsx
Added redirect guard logic at the start of renderStorybookUI() to detect and handle index.html URLs, rewriting the path and performing early return after redirect

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@JeroenBakker
Copy link
Copy Markdown

Removing index.html from the path can break storybook if it's being served from somewhere that only allows exact file matches.
For example, I also serve a static storybook build as a CI artifact, which needs the index.html filename to be present for it to work.

For what it's worth I think #33624 aims to solve the same issue in a more compatible way.

@valentinpalkovic valentinpalkovic changed the title [fix] redirect index.html to root to fix initialization issues Manager: Redirect index.html to root to fix initialization issues Jan 26, 2026
@storybook-app-bot
Copy link
Copy Markdown

Package Benchmarks

Commit: f6f5b1f, ran on 26 January 2026 at 14:28:12 UTC

The following packages have significant changes to their size or dependencies:

@storybook/addon-a11y

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 184 KB 🚨 +184 KB 🚨
Dependency size 0 B 2.98 MB 🚨 +2.98 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-docs

Before After Difference
Dependency count 0 18 🚨 +18 🚨
Self size 0 B 1.64 MB 🚨 +1.64 MB 🚨
Dependency size 0 B 9.25 MB 🚨 +9.25 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-links

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 14 KB 🚨 +14 KB 🚨
Dependency size 0 B 5 KB 🚨 +5 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-onboarding

Before After Difference
Dependency count 0 0 0
Self size 0 B 331 KB 🚨 +331 KB 🚨
Dependency size 0 B 670 B 🚨 +670 B 🚨
Bundle Size Analyzer Link Link

storybook-addon-pseudo-states

Before After Difference
Dependency count 0 0 0
Self size 0 B 21 KB 🚨 +21 KB 🚨
Dependency size 0 B 689 B 🚨 +689 B 🚨
Bundle Size Analyzer Link Link

@storybook/addon-themes

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 28 KB 🚨 +28 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-vitest

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 379 KB 🚨 +379 KB 🚨
Dependency size 0 B 338 KB 🚨 +338 KB 🚨
Bundle Size Analyzer Link Link

@storybook/builder-vite

Before After Difference
Dependency count 0 11 🚨 +11 🚨
Self size 0 B 123 KB 🚨 +123 KB 🚨
Dependency size 0 B 1.30 MB 🚨 +1.30 MB 🚨
Bundle Size Analyzer Link Link

@storybook/builder-webpack5

Before After Difference
Dependency count 0 188 🚨 +188 🚨
Self size 0 B 75 KB 🚨 +75 KB 🚨
Dependency size 0 B 32.04 MB 🚨 +32.04 MB 🚨
Bundle Size Analyzer Link Link

storybook

Before After Difference
Dependency count 0 49 🚨 +49 🚨
Self size 0 B 20.38 MB 🚨 +20.38 MB 🚨
Dependency size 0 B 16.52 MB 🚨 +16.52 MB 🚨
Bundle Size Analyzer Link Link

@storybook/angular

Before After Difference
Dependency count 0 188 🚨 +188 🚨
Self size 0 B 139 KB 🚨 +139 KB 🚨
Dependency size 0 B 30.27 MB 🚨 +30.27 MB 🚨
Bundle Size Analyzer Link Link

@storybook/ember

Before After Difference
Dependency count 0 192 🚨 +192 🚨
Self size 0 B 15 KB 🚨 +15 KB 🚨
Dependency size 0 B 28.76 MB 🚨 +28.76 MB 🚨
Bundle Size Analyzer Link Link

@storybook/html-vite

Before After Difference
Dependency count 0 14 🚨 +14 🚨
Self size 0 B 22 KB 🚨 +22 KB 🚨
Dependency size 0 B 1.46 MB 🚨 +1.46 MB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs

Before After Difference
Dependency count 0 534 🚨 +534 🚨
Self size 0 B 646 KB 🚨 +646 KB 🚨
Dependency size 0 B 59.53 MB 🚨 +59.53 MB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 0 123 🚨 +123 🚨
Self size 0 B 1.12 MB 🚨 +1.12 MB 🚨
Dependency size 0 B 22.11 MB 🚨 +22.11 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preact-vite

Before After Difference
Dependency count 0 14 🚨 +14 🚨
Self size 0 B 13 KB 🚨 +13 KB 🚨
Dependency size 0 B 1.44 MB 🚨 +1.44 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 0 155 🚨 +155 🚨
Self size 0 B 30 KB 🚨 +30 KB 🚨
Dependency size 0 B 23.41 MB 🚨 +23.41 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 0 113 🚨 +113 🚨
Self size 0 B 35 KB 🚨 +35 KB 🚨
Dependency size 0 B 19.91 MB 🚨 +19.91 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 0 274 🚨 +274 🚨
Self size 0 B 24 KB 🚨 +24 KB 🚨
Dependency size 0 B 44.43 MB 🚨 +44.43 MB 🚨
Bundle Size Analyzer Link Link

@storybook/server-webpack5

Before After Difference
Dependency count 0 200 🚨 +200 🚨
Self size 0 B 16 KB 🚨 +16 KB 🚨
Dependency size 0 B 33.30 MB 🚨 +33.30 MB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte-vite

Before After Difference
Dependency count 0 19 🚨 +19 🚨
Self size 0 B 55 KB 🚨 +55 KB 🚨
Dependency size 0 B 26.58 MB 🚨 +26.58 MB 🚨
Bundle Size Analyzer Link Link

@storybook/sveltekit

Before After Difference
Dependency count 0 20 🚨 +20 🚨
Self size 0 B 56 KB 🚨 +56 KB 🚨
Dependency size 0 B 26.63 MB 🚨 +26.63 MB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3-vite

Before After Difference
Dependency count 0 108 🚨 +108 🚨
Self size 0 B 35 KB 🚨 +35 KB 🚨
Dependency size 0 B 43.67 MB 🚨 +43.67 MB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components-vite

Before After Difference
Dependency count 0 15 🚨 +15 🚨
Self size 0 B 19 KB 🚨 +19 KB 🚨
Dependency size 0 B 1.50 MB 🚨 +1.50 MB 🚨
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 0 183 🚨 +183 🚨
Self size 0 B 775 KB 🚨 +775 KB 🚨
Dependency size 0 B 67.55 MB 🚨 +67.55 MB 🚨
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 0 176 🚨 +176 🚨
Self size 0 B 30 KB 🚨 +30 KB 🚨
Dependency size 0 B 66.12 MB 🚨 +66.12 MB 🚨
Bundle Size Analyzer Link Link

@storybook/core-webpack

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 11 KB 🚨 +11 KB 🚨
Dependency size 0 B 28 KB 🚨 +28 KB 🚨
Bundle Size Analyzer Link Link

create-storybook

Before After Difference
Dependency count 0 50 🚨 +50 🚨
Self size 0 B 1000 KB 🚨 +1000 KB 🚨
Dependency size 0 B 36.90 MB 🚨 +36.90 MB 🚨
Bundle Size Analyzer node node

@storybook/csf-plugin

Before After Difference
Dependency count 0 9 🚨 +9 🚨
Self size 0 B 7 KB 🚨 +7 KB 🚨
Dependency size 0 B 1.26 MB 🚨 +1.26 MB 🚨
Bundle Size Analyzer Link Link

eslint-plugin-storybook

Before After Difference
Dependency count 0 20 🚨 +20 🚨
Self size 0 B 131 KB 🚨 +131 KB 🚨
Dependency size 0 B 2.82 MB 🚨 +2.82 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-dom-shim

Before After Difference
Dependency count 0 0 0
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 788 B 🚨 +788 B 🚨
Bundle Size Analyzer Link Link

@storybook/preset-create-react-app

Before After Difference
Dependency count 0 68 🚨 +68 🚨
Self size 0 B 32 KB 🚨 +32 KB 🚨
Dependency size 0 B 5.98 MB 🚨 +5.98 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-react-webpack

Before After Difference
Dependency count 0 170 🚨 +170 🚨
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 31.29 MB 🚨 +31.29 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-server-webpack

Before After Difference
Dependency count 0 10 🚨 +10 🚨
Self size 0 B 7 KB 🚨 +7 KB 🚨
Dependency size 0 B 1.20 MB 🚨 +1.20 MB 🚨
Bundle Size Analyzer Link Link

@storybook/html

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 29 KB 🚨 +29 KB 🚨
Dependency size 0 B 32 KB 🚨 +32 KB 🚨
Bundle Size Analyzer Link Link

@storybook/preact

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 16 KB 🚨 +16 KB 🚨
Dependency size 0 B 32 KB 🚨 +32 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 0 57 🚨 +57 🚨
Self size 0 B 1.23 MB 🚨 +1.23 MB 🚨
Dependency size 0 B 12.95 MB 🚨 +12.95 MB 🚨
Bundle Size Analyzer Link Link

@storybook/server

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 8 KB 🚨 +8 KB 🚨
Dependency size 0 B 716 KB 🚨 +716 KB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 45 KB 🚨 +45 KB 🚨
Dependency size 0 B 230 KB 🚨 +230 KB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 63 KB 🚨 +63 KB 🚨
Dependency size 0 B 211 KB 🚨 +211 KB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 61 KB 🚨 +61 KB 🚨
Dependency size 0 B 47 KB 🚨 +47 KB 🚨
Bundle Size Analyzer Link Link

@ghengeveld
Copy link
Copy Markdown
Member

Thanks for making an attempt at fixing this! However, I don't think redirecting is the appropriate fix here, because not all environments will serve index.html when requesting /. Closing this because there's other PRs which fix this in a different way, and in fact should already be fixed with #33647.

@ghengeveld ghengeveld closed this Jan 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Built SB renders with wrong path and no addons if visiting /index.html directly

4 participants