History routing not compatible with static hosting like GitHub Pages (404 on refresh)

[lukasjuhas]

Describe the bug

Hey guys, thanks so much for the amazing package and your hard work in making this possible. We've been trying it out and we have run into an issue.

• Deploying to Github requires a bit of set up which we've figured out by providing some config for vite:

import { defineConfig } from "vite"

export default defineConfig({
  vite: {
    base: process.env.HISTOIRE_BASE || "/",
  },
})

We pass HISTOIRE_BASE in our Github action workflow.

However, the issue comes when you open up the page in Github pages and then navigate to a specific component story. It works all fine but as soon as you refresh the page you get a 404 page.

Any thoughts on how to go about this?

Reproduction

Repo:
https://github.com/lukasjuhas/histoire-ghpages-repro/

Github pages branch:
https://github.com/lukasjuhas/histoire-ghpages-repro/tree/gh-pages

The url:
https://lukasjuhas.github.io/histoire-ghpages-repro/

To see the error:

1. Visit https://lukasjuhas.github.io/histoire-ghpages-repro/
2. Click on the button story page
3. Refresh the page
4. You get 404

System Info

All in the repo. Fresh vue 3 setup + hitoire.

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[lukasjuhas]

Just to add, I understand that this might be an issue with the way how Github pages work and that they don't really support routes and history... however, it would be great to find a way to get this working as I imagine, people would want to deploy Histoire to Github pages, just as it is possible with Storybook.

[lukasjuhas]

Thank you @Akryum ❤️

[samuveth]

If anyone is experiencing 404 on refresh on Vercel, you can create a vercel.json and add this as a fix

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}