Deploy Vite React App to GitHub Pages (2024) 

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're welcome!

You're welcome!

Appreciate it!

The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error

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

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

😎

thanks for watching!

Check out my new view where I showed how to fix this issue: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uStf2HMXcAs.html&ab_channel=VladyslavDihtiarenko

Check out my new video where I covered issues when we use React Router along with base url in Vite config file: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uStf2HMXcAs.html

Приветствую! Похоже, что многие сталкиваются с этой проблемой. И она кроется в 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

Hi, welcome to my channel! I've just released a video showing how to address this issue in Vite React projects. Check it out: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uStf2HMXcAs.htmlsi=xShS2ai5-dr4Ujl6

No problem :)

Appreciate it! 😊

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

You're welcome

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

👌

👌

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

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

🫡

ohh i got it, I misspelled my setbase😅 thanks anyway for the tutorial

Glad you solved it :)

Community Material Theme High Contrast: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme

This video is only about the frontend part. Consider to find another tutorial for backend.

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

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

any errors in the console?

Welcome to my channel! To improve the tutorial, could you tell me what deployment issues you faced?