Skip to content

Core: Fix favicon issue on dev server #30818

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 14, 2025

Conversation

MuhdHishamP
Copy link
Contributor

@MuhdHishamP MuhdHishamP commented Mar 16, 2025

Closes #30158

What I did

Fixed an issue where the favicon was not loading correctly in development mode. The fix ensures the favicon is served from its directory instead of attempting to serve the file directly.

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

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

Here’s a screenshot showing the favicon working correctly after the fix:

Screenshot from 2025-03-16 20-24-10

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

This PR fixes an issue where the favicon wasn't loading correctly in Storybook's development server.

  • Modified useStatics function to properly handle favicon serving in development mode
  • Implemented special middleware for favicon requests that serves from the favicon's parent directory
  • Fixed URL path handling to ensure the favicon file is correctly requested and served
  • Used the same pattern as other static files by leveraging sirvWorkaround to handle middleware conflicts
  • Ensured consistent approach with other static file handling by preserving the original parsed URL

Greptile AI

💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

@MuhdHishamP
Copy link
Contributor Author

MuhdHishamP commented Apr 11, 2025

Hey @kasperpeulen, could you please review this PR? It's been a month since i have issued this PR. Thanks.

Copy link

nx-cloud bot commented Apr 14, 2025

View your CI Pipeline Execution ↗ for commit ac836df.

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 1m 32s View ↗

☁️ Nx Cloud last updated this comment at 2025-04-14 13:27:08 UTC

@ghengeveld ghengeveld merged commit e7abe53 into storybookjs:next Apr 14, 2025
51 of 52 checks passed
@ghengeveld ghengeveld changed the title [Bugfix] Fix favicon issue on dev server (#30158) Core: Fix favicon issue on dev server (#30158) Apr 14, 2025
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile

const faviconFile = basename(faviconPath);
app.use('/', (req, res, next) => {
if (req.url === `/${faviconFile}`) {
return sirvWorkaround(faviconDir, {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider checking if faviconPath exists before attempting to serve it, similar to the check on line 28 for static files

Suggested change
return sirvWorkaround(faviconDir, {
if (!existsSync(faviconPath)) {
logger.warn(`Favicon file not found at ${faviconPath}`);
return next();
}
return sirvWorkaround(faviconDir, {

@github-actions github-actions bot mentioned this pull request Apr 14, 2025
10 tasks
@shilman shilman changed the title Core: Fix favicon issue on dev server (#30158) Core: Fix favicon issue on dev server Apr 14, 2025
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:normal core maintenance User-facing maintenance tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: favicon doesn't work for dev server
4 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy