GitHub Community
Blank Page on GitHub Pages Deployment for Vite + React Project #145772
-
Select Topic AreaBug BodyI am deploying my Vite + React project on GitHub Pages, but the site only displays a blank white page. The index.html file is being served, but it seems that the assets and scripts are not loading correctly. Here is my index.html: <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>###Steps Taken:
###Possible Causes:
###Additional Context:
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
💬 Your Product Feedback Has Been Submitted 🎉 Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users. Here's what you can expect moving forward ⏩
Where to look to see what's shipping 👀
What you can do in the meantime 💻
As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities. Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐ |
Beta Was this translation helpful? Give feedback.
-
|
You need to know that this is not how react works, as your projet needs to be build, optimized and bundled into one single file of HTML, CSS, JS which you will see in the Beside this, For the deployment it's better to use vercel, as it's more suitable for this kind of projects, as github pages are more likely made for simple static websites (you can use github pages but vercel is better), go to vercel website, create new project, link your github repo and select vite then click deploy and all good! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much for your thoughtful and detailed guidance—it truly made a difference! Your clear explanations and examples not only resolved my issue but also deepened my understanding. |
Beta Was this translation helpful? Give feedback.
You need to know that this is not how react works, as your projet needs to be build, optimized and bundled into one single file of HTML, CSS, JS which you will see in the
/distfolder using the commandnpm run buildand to preview them you need to run the commandnpm run preview(why?, because the code you worked on is for development and the setup provided is for you to develop your app, for more info check this blog for example),Beside this, For the deployment it's better to use vercel, as it's more suitable for this kind of projects, as github pages are more likely made for simple static websites (you can use github pages but vercel is better), go to vercel website, create new project…