Deploy Vite React App to GitHub Pages (2024)

Рет қаралды 4,679

Ай бұрын

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 #deploy
Blog post: www.vddeveloper.online/blog/v...

Пікірлер: 61

@VladyslavDihtiarenko 8 күн бұрын

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: kzfaq.info/get/bejne/q7mkmZV5sr7Hcac.html

@otzmediaz4387 2 күн бұрын

usually i don't comment in video but this video help me lot thanks for that 🥰

@VladyslavDihtiarenko 2 күн бұрын

Thank you a lot! Glad it helped!

@user-oz5mx1sd4u 27 күн бұрын

Thank you! It was vey helpful!

@VladyslavDihtiarenko 27 күн бұрын

Appreciate it!

@zyates 6 күн бұрын

You saved me! Thank you so much!

@VladyslavDihtiarenko 6 күн бұрын

You're welcome!

@Timepass-xb2yb 10 күн бұрын

Thank you so much This was really helpful

@VladyslavDihtiarenko 10 күн бұрын

Appreciate it!

@suryanagcs Ай бұрын

thanks buddy works like a charm appricated

@VladyslavDihtiarenko Ай бұрын

You're welcome!

@MonkeyWrenchMechanicManiac 20 күн бұрын

Thanks brother very helpful..

@VladyslavDihtiarenko 13 күн бұрын

Appreciate it! 😊

@user-dj2iu2zv7r 24 күн бұрын

thank you sir its works , it was more help full to me☺

@VladyslavDihtiarenko 13 күн бұрын

Appreciate it a lot!

@TheCodeBreaker190 22 күн бұрын

Thanks brother. appreciate a lot.

@VladyslavDihtiarenko 13 күн бұрын

😎

@mohiramansurovna4295 Ай бұрын

Thank you for this video

@VladyslavDihtiarenko Ай бұрын

thanks for watching!

@prodpreston 6 күн бұрын

Good looks crodie

@Tjiaz- 6 күн бұрын

Thank you

@VladyslavDihtiarenko 6 күн бұрын

You're welcome

@farazk9729 Ай бұрын

Thank you.

@VladyslavDihtiarenko Ай бұрын

👌

@potato-ip9tp Ай бұрын

it's work. thanks!!!!!!!!!!!!!!

@VladyslavDihtiarenko Ай бұрын

No problem :)

@funfstuck Ай бұрын

дякую!

@VladyslavDihtiarenko Ай бұрын

👌

@maryamsaleh5259 6 күн бұрын

Thanks, I successfully deployed my code, but there is a problem with images/icons. Seems like there is some problem with relative paths.

@VladyslavDihtiarenko 6 күн бұрын

Check out my new view where I showed how to fix this issue: kzfaq.info/get/bejne/q7mkmZV5sr7Hcac.html&ab_channel=VladyslavDihtiarenko

@kresimircosic3753 9 күн бұрын

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

@VladyslavDihtiarenko 9 күн бұрын

Hi, welcome to my channel! I've just released a video showing how to address this issue in Vite React projects. Check it out: kzfaq.info/get/bejne/q7mkmZV5sr7Hcac.htmlsi=xShS2ai5-dr4Ujl6

@user-km8rs4tj5w 8 күн бұрын

what if we use react-router-dom in the project? it requires more configurations to support react-router on GitHub pages

@VladyslavDihtiarenko 7 күн бұрын

Check out my new video where I covered issues when we use React Router along with base url in Vite config file: kzfaq.info/get/bejne/q7mkmZV5sr7Hcac.html

@Rootblack04 26 күн бұрын

it's work. thanks 🤗👌

@VladyslavDihtiarenko 25 күн бұрын

🫡

@Kerchiano 13 күн бұрын

Здравствуйте! Владислав, а у меня возникают проблемы с отображением картинок которые находятся в папке assets. И в принципе с переходами на другие урл если не добавить роуты. Есть ли возможность как-то это решить?

@VladyslavDihtiarenko 13 күн бұрын

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

@netizen_94 7 күн бұрын

I'm confused, so you push the entire project, or just the content of "dist" folder created by the build process? Answer:

@VladyslavDihtiarenko 7 күн бұрын

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)

@netizen_94 7 күн бұрын

@@VladyslavDihtiarenko thanks, why when I use the vite's website workflow it fails, I notice it doesn't create the extra branch

@VladyslavDihtiarenko 6 күн бұрын

@@netizen_94 It didn't create that extra branch for me as well

@kulikitakati549 10 күн бұрын

what vscode theme is that?

@VladyslavDihtiarenko 10 күн бұрын

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

@yacinbensidahmed6587 19 күн бұрын

I have a problem with my photos won't show in the page

@dheerajsaini1353 18 күн бұрын

Same issue occurred with my e-commerce project, I had to click on the shop menu button to render the product images.

@VladyslavDihtiarenko 13 күн бұрын

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.

@dheerajsaini1353 13 күн бұрын

Yes that was the problem i fixed it already

@Thee_Don96 Ай бұрын

In my sources i only have the options main and none, no gh-pages

@VladyslavDihtiarenko Ай бұрын

Try to switch to Github Actions, and then again back to Deploy from a branch

@Thee_Don96 Ай бұрын

@@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

@VladyslavDihtiarenko Ай бұрын

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/"

@Thee_Don96 Ай бұрын

I did, but when i deploy it first routes to the not found page

@VladyslavDihtiarenko Ай бұрын

@@Thee_Don96 send me a link to your repo