As the title says I am trying to deploy my Vite/Vue3 application to be hosted free on Github pages. I have been following many online tutorials and guides but they seem to be quite happy to tell you what to do despite the fact they dont really seem to know why. As a result my app seems to have deployed successfully but in fact when you go to the URL it is hosted at I’m greeted by an infinite spinner.

So I followed this process, starting from my master branch which is ready to go:

1. check out a new branch called gh-pages and push to remote using git push --set-upstream origin gh-pages
2. in the gh-pages branch go into vite-config.js and ensure the base property in defineConfig is set to ‘/<MY_REPOSITORY_NAME>/’
3. In package.json ensure there is a property called homepage which contains the full base URL of my site in string format
4. In my scripts in package.json I already have these two from before we started:

  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist",

I check out master branch and run npm run deploy
6. I ensure on github that ‘Deploy from branch’ is set to my gh-pages branch

So I assume all I need to do in this process is make my gh-pages branch and ensure all the config in that is correct like setting the base etc (because of course if I set the base in my master branch to my repo name I wont be able to test on localhost). I simply go back to my master branch and then using the deploy script from master branch it compiles the dist folder using my master branch code before then rebasing my gh-pages branch around that. The thing is I look in my gh-pages repo after I do this and I can see all the public assets like images but no actual code… and site.webmanifest doesnt look like it contains them either so maybe this is why nothing is coming up

Anyone spot anything I’m doing wrong?