gh-pages does not render anything to the page

[roymansoor]

Select Topic Area

Question

Body

I created vite app and built and deploy it properly. it worked for a while, then when i brought some changes to my page now it doesn't render anything and there is just a white page. i have 2 branches main and gh-pages but still doesn't render anything.
i get "[gh-pages] had recent pushes less than a minute ago "messages. when trying to compare and pull there is nothing to compare. the screenshots are attached.

Appreciate your help know how to solve this problem.

[melvincwng]

Hey @roymansoor 👋, if you are trying to deploy your Vite/React app (i.e. https://roymansoor.github.io/) on GH pages, please take at look at the following below.

Based on Vite's documentation link over here:

From what I'm seeing in your repository, your current vite.config.js is setup like this:

It could be an issue with the 'base' key in vite.config.js, hence consider doing the following:

1. Omitting line 7 - meaning to remove the 'base' key in vite.config.js
2. Run 'npm run build' to generate the new /dist folder/files
3. Commit those files into your code repository
4. Finally redeploy the web app on GitHub pages, and see if it works.
5. Consider looking at the 'References' section below to continue to debug the issue (if the above suggestion doesn't work).

References for your perusal:

1. Vite Official Documentation
2. Youtube Video - How to deploy Vite App on GitHub Pages
3. Medium Article on Deploying Vite Apps
4. Dev.to Article on Vite App Deployment
5. StackOverFlow

Hope this helps and answers your question 😄!

[roymansoor]

Hi @melvincwng,
Thank you for the links and instructions. I have checked my work and confirmed I have done all the steps but still facing the same issue. I made sure the base is properly set. I feel like it has to do with some configuration of GitHub or that specific repo. It was working fine earlier. I will try to delete the repo and create a new one and try again.

[roymansoor]

I tried it again with the new repo and all processes, it perfectly works fine when in run preview. but when its deployed its just a blank page. on the console, i get this error (Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.)

[roymansoor]

@melvincwng, that worked! thanks for the help

[melvincwng]

@roymansoor, glad to have helped! 👍🏻

[ZainilMehta]

Hi @roymansoor

I struggled with the same issue for a long! The following solution worked for me and rendered the html pages correctly!
Include index.html as well as the CSS files on the gh-pages orphan branch of the repository!