Vite React App with Routes Deployed on Github | Reload error resolved!
HTML-код
- Опубликовано: 11 сен 2024
- In this video, I will teach you how to deploy a Vite React App using React Router through GitHub Pages. In addition, I'll show you a simple and fast way to resolve the 404 error when reloading the page.
📚 References
GitHub Code (give it a star ⭐): github.com/Eri...
Vite: vitejs.dev/
React Router: reactrouter.com/
🔔 Like and subscribe
⌚Time Stamps
Deployment: 00:00
Routing: 03:09
Fixing Error: 6:14
🎵 Musics
Faixa: "Know Things"
Música pela slip.stream
Download gratuito / Stream: get.slip.strea...
Faixa: "All Day We Dance", Mr. Milk
Música pela slip.stream
Download gratuito / Stream: get.slip.strea...
Faixa: "Versions", Birdo
Música pela slip.stream
Download gratuito / Stream: get.slip.strea...
Ouça no Spotify: go-stream.link...
Faixa: "Omwow"
Música pela slip.stream
Download gratuito / Stream: get.slip.strea...
Guide demonstrating the step-by-step process and the codes used in the video within the repository's readme!
help me, I am getting "unexpected application error 404 not found" when I open my github page after deployment.
I got white screen and a console error saying loading module from my git page was blocked because of a disallowed MIME type (“text/html”). what should i do?
I am getting a white screen
God bless you for this vid, i've been questioning my life all day trying to fix 404 router error
Thank you
I'm glad I could help😃
After an hour of creating and deleting repos. Finally a fix. THANK YOU.
an hour?! It is nothing!I was strugling 2weeks!
you absolutely saved my bacon with this one! thank you SO MUCH for taking the time to put this together!
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!
Great! I'm glad I helped you
Thanks man!!! i saw multiples websites, but only seeing to believe, and your video helped me!!!
This fixed two repos for me this morning. Filing this away for future reference!
If if this tutorial has 1 year and some minor things had changed, tysm for your guide. Thanks to you I could properly persue my project, I'll add a link to your Github guide within my README
God bless you mate🙏
I have a question, in my case I have an app that has dynamic url when you acces a specific element which id is at the final url.. how can I make it work if I have to specify each url at the route const declaration? Thank you in advance!
Thanks brother for this information.
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?
It's been a while since I had researched this issue, but the error is something caused by GitHub's SSH. I'll research again to confirm it!
best video for vite react app with route deployment thanks bro
Many thanks from Russia! It worked!!!
when i publish mine i got white screen with no error in cmd or console so what the problem ?
Try to fork my repo and compare it with your project.
same issue
sometimes you must change the paths of your script and css in your html in the dist folder, just change /assets for assets
Same happening with me
have u solved this error ??
bro i am using appwrite for backend and i have used client routes of react dom and i have deployed my project using vercel now when i am reloading its going on 404 page of vercel its not reloading my route and i have used your method of changing the html file but its not working . when i realoding using your method its reloading by ~and ~ and keep going . help me through
I also have this problem
I might be too late but try setting the pathSegmentsToKeep variable in the 404.html file to 0 instead of 1.
Man you are live saver huge thanks 🥰🥰🥰
I was facing same issue on netlify as well as on vercel, will this work for them too or not?
If you run into the issue where when reloading the page infinitely tries to reload and the URL keeps adding the text ~and~, try setting the pathSegmentsToKeep variable in the 404.html file to 0.
hello, I try this on my project but still throws an error "Failed to load resource: the server responded with a status of 404 ".
Same error
same
Amazing! Thank you. 🔥🔥🔥
You are my guardian angel 😇😅
my case I'm getting this error: App.tsx:1 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong
What is the app you are using to save the code snippets?
Workflow permissions read and write is disabled... I can't seem to enable it
thank u so much!!! I had been struggling with routing for deploying on Github pages for 2 days.
To me, the build calls the scripts "src="/assets", so it doesn't work. "src=./..." should do it, but I have to do it manually,
And still,l when I do that, all I have is an empty ""
this is driving me insane
Can anyone help I am getting "unexpected application error 404 not found" when I open my github page after deployment?
Did you correctly copy the content from the .yml file and configure the actions?
Can you guide me to change the domain name? I'm changing the domain name but it's getting an error when reloading the page
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?
same
Thank you very much!
Error: Action failed with "The process '/usr/bin/git' failed with exit code 128"
nah error in deployment phase
Hero!
🔥🚀
Bro i am trying this but after i push it and when i go to the github and change the workflow setting and after that what i see that my deployment is failed (means i see a red cross) please help me sir please because their no more videos about this error
I got this error message "Deploy
Action failed with "The process '/usr/bin/git' failed with exit code 128""
thank you so much
thanks man
I'm glad it helped you
Ur a god bro
nah youre the goat
no events triggeres defined in "on" in deploy.yml
thx you bro. !
thanks a lot
thnx bro
not working
Bro my pages are upto 6 and I have backend
Please show how to deploy using windows too.
But I'm using Windows
thx buddy
I forgot to add homepage directory in package json , it is working fine, should I add it?
If everything is fine don't touch it😂😂😂😂
😂😂@@danishsk6805
@@danishsk6805legendary quote 😂
Hi - do you have to use typescript for this to work?
I'll answer my own question: No, you don't have to use typescript. I changed the file endings (and references to those files) from .tsx to .jsx and all worked. Note: on main.jsx I removed 'as HTMLElement' -- vscode was marking this as typescript only. There is one 'gotcha' in the README, 04. Configuring the routing on App.tsx: The import statement doesn't include 'Link', i.e. import { Outlet } from "react-router-dom"; should be import { Outlet, Link } from "react-router-dom";. I'm not criticising, though. I was tearing my hair out trying to get the routing to work until I came across this EXCELLENT video. Thank you!
@@najmantube True, I didn't notice that the Link import was missing, I'll fix it! But I'm glad the video helped you.
@@ek-developer Extremely helpful! (I've given the repo a star)
Kindly reply me
First try to fork my repository and compare it with your project, especially the .yml file. Right after that, check the workflow permissions are selected correctly to be able to activate the gh-pages branch
@@ek-developer it's done.. I simply did it again and it worked
@@akshanshkaushal9422 Great!
@@ek-developer Thanks for replying!
Permission to Akshanshkaushal/3D_PORTFOLIO.git denied to github-actions[bot].