Vite React App with Routes Deployed on Github | Reload error resolved!
If you are working with a Vite React app and have encountered issues with routes not working properly when deployed on Github Pages, you are not alone. Many developers have faced the same problem, but there is a solution that will resolve the reload error and allow your routes to work as expected.
The Problem
When deploying a Vite React app with routes to Github Pages, you may notice that refreshing the page or directly accessing a specific route results in a 404 error. This occurs because Github Pages does not natively support single-page applications (SPAs) that use client-side routing. As a result, the server returns a 404 error for routes other than the root.
The Solution
To resolve the reload error and ensure that your routes work correctly when deployed on Github Pages, you will need to make a few adjustments to your Vite React app. Follow the steps below to implement the solution:
- Create a file named “404.html” in the public directory of your Vite React app.
- Add the following code to the 404.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;url=/index.html">
<title>Redirecting to main page</title>
</head>
<body>
<script>
location.replace('/index.html');
</script>
</body>
</html>
Once you have created and added the 404.html file to your Vite React app, you can deploy your app to Github Pages as usual. With this setup, any 404 errors encountered when accessing a route directly will be redirected to the root page, where your client-side routing can take over and display the appropriate content.
Conclusion
By implementing this solution, you can ensure that your Vite React app with routes works as expected when deployed on Github Pages. This will provide a seamless user experience and eliminate any reload errors that may have previously occurred. With these adjustments in place, you can confidently deploy your app and showcase its full functionality to the world.
Guide demonstrating the step-by-step process and the codes used in the video within the repository's readme!
thanks a lot
Bro my pages are upto 6 and I have backend
hello, I try this on my project but still throws an error "Failed to load resource: the server responded with a status of 404 ".
Can anyone help I am getting "unexpected application error 404 not found" when I open my github page after deployment?
when i publish mine i got white screen with no error in cmd or console so what the problem ?
Thanks man!!! i saw multiples websites, but only seeing to believe, and your video helped me!!!
no events triggeres defined in "on" in deploy.yml
man, i freaking do not know how, but it helped. I also have changed the browserrouter to hashrouter, so strugglers, keep that in mind too.
..wow, it took me 4 hrs in total in 2 days but now i am a bit more happy 😊
Please show how to deploy using windows too.
nah error in deployment phase
I have an ecommerce app only frontend with router and also react router 6.4. I am trying to publish my page to github. I m getting 404 application error. Should i follow this steps?
I was facing same issue on netlify as well as on vercel, will this work for them too or not?
Dear EK ,
🙌 Thank you so much for your incredible video!
I was stuck on a problem for hours until I found your video.
Your explanations were clear, concise, and helped me find the solution I needed.
Thank you, thank you, thank you!
After an hour of creating and deleting repos. Finally a fix. THANK YOU.
I forgot to add homepage directory in package json , it is working fine, should I add it?
God bless you for this vid, i've been questioning my life all day trying to fix 404 router error
Thank you
Why does reloading the page cause a 404 error? I'm not sure if I understand exactly what the 404.html & code snippet you added to index.html do to correct this, could you explain it, if you know?
Hero!
Kindly reply me