Deploy Vite React App to GitHub Pages (2024)
ฝัง
- เผยแพร่เมื่อ 27 ก.ย. 2024
- Looking to deploy your Vite React app to GitHub Pages? This video provides a clear, step-by-step guide to get you started! Learn how to configure your project, set up a GitHub workflow, Vite config, and leverage GitHub Pages for deployment. Whether you're a seasoned React developer or just getting started with Vite, this tutorial will equip you to showcase your app to the world! ✨
#vitejs #react #react #github
Subscribe for more videos like this: / @vladyslavdihtiarenko
Blog post: www.vd-develop...
Let's connect:
Website: www.vd-develop...
Blog: www.vd-develop...
Instagram: / vladislavdegtyarenko
Telegram: t.me/@Vladislav_Degtyarenko
If you use React Router in your project, you're probably facing an issue with empty pages (blank screen with no errors in the console) or 404 not found errors for your assets. Check out this video, I've covered those issues there: th-cam.com/video/uStf2HMXcAs/w-d-xo.html
I have never once commented on a youtube video but this video just saved me big time. I spent hours trying to figure it out but luckily finally came across this video. Thank you very much!
Appreciate it!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
you did really amazing job !! after so main fail how to deploy on github after watching this video all problem solve great!!!
Thanks for your comment! Great it helped!
hey im not getting the gh-pages option, ive tried multiple times.
its showing deployed, but only a blank screen shows up
I'm facing an issue where after clicking on "first commit", I can't see the page that is displayed to you
Im also facing same issue.....did u got any solution?
Worked for me! Cheers you legend!!
guys, this guy is absolute straight to point guy. I wondered this is new channel owner. thanks man. love from INDIA.
Nice video. What VSCode theme are you using?
I'm interested in that too
@@isuskrist7416 Community Material Theme High Contrast: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme
How to make it automatically redeploy after pushing new changes to the repo? Because I've added some changes, pushed them to the repo, but nothing has changed on the page by public link.
Did you push to the main branch?
@@VladyslavDihtiarenko Yes, I pushed to the main branch
the problem is that when I refresh or when I type the url of the path of my pages by hand I get 404 error
It helps me a lot thanks ❤
I'm so glad!
thanks buddy, this is the best video I have seen
Glad you liked it!
Thank you! It was vey helpful!
Appreciate it!
The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
Thx, it was really helpful
make sure you replace main with master in the workflow or vice-versa
Yeah, don't just copy-paste blindly :)
Thanks, I successfully deployed my code, but there is a problem with images/icons. Seems like there is some problem with relative paths.
Check out my new view where I showed how to fix this issue: th-cam.com/video/uStf2HMXcAs/w-d-xo.html&ab_channel=VladyslavDihtiarenko
Blank page, console is completely empty.
When I added the base property with the repo name, the deployment manages to render the Vite icon as the app icon in the tab title, so that works, but it's like the index.html is not served at all
Hi, welcome to my channel! I've just released a video showing how to address this issue in Vite React projects. Check it out: th-cam.com/video/uStf2HMXcAs/w-d-xo.htmlsi=xShS2ai5-dr4Ujl6
well i got it you have used continuous integration for workflow to check the code format and its linting but one thing is bothering me ....say if i commit again on this repo will it reflect on the go like the vercel or we have to implement CD(continuous deployment ) for that?
Sure, that's the purpose of GitHub Actions, to automate that deploying process
The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
Honestly, I don't know what it is. I need a bigger picture of your issue. Contact me through social media to show a full error log
what if we use react-router-dom in the project? it requires more configurations to support react-router on GitHub pages
Check out my new video where I covered issues when we use React Router along with base url in Vite config file: th-cam.com/video/uStf2HMXcAs/w-d-xo.html
Thank you so much
This was really helpful
Appreciate it!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
You saved me! Thank you so much!
You're welcome!
awesome, thanks
You're welcome!
it's work. thanks!!!!!!!!!!!!!!
No problem :)
can u please tell how to add .env variables ? what changes should i make in the deploy.yml file
Environment variables are added in GitHub repository settings
can you help me sir, i followed but when i go to my website it doesn't show anything and it says error 404 in dev tools
ohh i got it, I misspelled my setbase😅 thanks anyway for the tutorial
Glad you solved it :)
Thank you so much!
Здравствуйте! Владислав, а у меня возникают проблемы с отображением картинок которые находятся в папке assets. И в принципе с переходами на другие урл если не добавить роуты. Есть ли возможность как-то это решить?
Приветствую! Похоже, что многие сталкиваются с этой проблемой. И она кроется в base адресе, который мы устанавливаем в vite config.
В случае с переходом на другие роуты, проблема в React Router (подразумевая, что именно его вы используете), в котором нужно тоже прописывать basename: v5.reactrouter.com/web/api/BrowserRouter/basename-string
А в случае директории src/assets нужно смотреть отдельные случаи. Если статический импорт через import, то Vite решает проблему автоматически. Но если указываем путь в самом jsx (к примеру, в src атрибуте img тега), то возможно нужно самому к пути прибавлять base url, который доступен через import.meta.env.BASE_URL: vitejs.dev/guide/build.html#public-base-path
Thanks brother very helpful..
Appreciate it! 😊
Thanks brother. appreciate a lot.
😎
Thank you for this video
thanks for watching!
I used your tutorial several times and it always worked! The last time I used it was like a week ago. I followed the exact same steps today and after pushing the project to GH and setting the actions permission, I don't see any workflow in the Actions section. I did the exact same thing as always. Do you have any idea what could went wrong? Thank you.
For anyone having the same issue - I figured it out! 😁 I used “npm create vite@latest”, which I sometimes used but not in the case of deploying it to GH pages. So don’t 😆 With “npm create vite” it works 😊 Also some may have problems because of not entering the project in terminal first before initializing the repo. So enter the folder with “cd project-name” and then “git init” 😊
Thanks for sharing your workaround. If anyone else struggles with missing workflows, try the steps below:
Go to Settings → Pages
Under Source, switch to "Github Actions", save.
Then, switch back to "Deploy from branch" and select the "gh-pages" branch.
It might help!
Good looks crodie
how do we deploy the backend?
This video is only about the frontend part. Consider to find another tutorial for backend.
what vscode theme is that?
Community Material Theme High Contrast: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme
In my sources i only have the options main and none, no gh-pages
Try to switch to Github Actions, and then again back to Deploy from a branch
@@VladyslavDihtiarenko i also get this unusual error 404 (main.jsx resource not found)in my console.Is there a specific way to put my main.jsx file path
Did you set "base" in your vite config according to your repo name? 0:45
For example, If your repo name is vite-react, set base: "/vite-react/"
I did, but when i deploy it first routes to the not found page
@@Thee_Don96 send me a link to your repo
it's work. thanks 🤗👌
🫡
Thank you.
👌
дякую!
👌
Thank you
You're welcome
Your tutorial was very bad. Not even a single work has been done. He is not deployed
Welcome to my channel! To improve the tutorial, could you tell me what deployment issues you faced?
Have some respect and ask your doubts. If not him somebody will answer you. Learn to be polite dude.
net::ERR_ABORTED 404 (Not Found)
im not using React-Router-dom but its still blank
Thanks man, i spent a so much time figuring it out
Підписався на твій канал. Дякую за контент. Слава Україні!
usually i don't comment in video but this video help me lot thanks for that 🥰
Thank you a lot! Glad it helped!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
I'm confused, so you push the entire project, or just the content of "dist" folder created by the build process? Answer:
You don't need to push the dist folder. Push the entire project. 'Dist' is added to .gitignore automatically by Vite so Git doesn't track this folder (i.e. don't include it in commits history).
The dist folder (the builded project) is automatically created during the workflow as a build result (that's why we create this file)
@@VladyslavDihtiarenko thanks, why when I use the vite's website workflow it fails, I notice it doesn't create the extra branch
@@netbug94 It didn't create that extra branch for me as well
followed step wise but after push , i dont see deployment in action and after deploying nothing shows
Can i add google adsense to the webstite? If yes, how do i do it?
Mine displayed this:
Unexpected Application Error!
404 Not Found
Check this out: th-cam.com/video/uStf2HMXcAs/w-d-xo.htmlsi=kFW2bxrcodifhFvH
Doesn't work :c
Thanks for letting me know! To help debug the issue, could you tell me what step in the deployment process isn't working as expected? Are there any error messages you're seeing?
I have a problem with my photos won't show in the page
Same issue occurred with my e-commerce project, I had to click on the shop menu button to render the product images.
I could help you if you share a link to you repo here or through social media. The issue could be with the baseUrl we set in Vite config, or with React Router if you use it in your project.
Yes that was the problem i fixed it already
Thanks a lot!
You're welcome!
Lifesaver tutorial for real, Deployed Easily at one go, Underrated Channel! Thank you, you have my like and subscribe!
So glad it was helpful! Thanks for subscribing!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
This is greatly helpful!
THanks!
thank you sir its works , it was more help full to me☺
Appreciate it a lot!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
thanks buddy works like a charm appricated
You're welcome!
i am gettingn a blank page bro !!
any errors in the console?