Deploy Vite React App to GitHub Pages (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 #deploy
Blog post: www.vddeveloper.online/blog/v...

Пікірлер: 87

  • @VladyslavDihtiarenko
    @VladyslavDihtiarenkoАй бұрын

    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: kzread.info/dash/bejne/p4eoyJSBfbvJcdY.html

  • @alimanghat9114
    @alimanghat9114Ай бұрын

    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!

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    26 күн бұрын

    Appreciate it!

  • @zainmashhood7943

    @zainmashhood7943

    26 күн бұрын

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

  • @huzaifaimran9468
    @huzaifaimran9468Ай бұрын

    Lifesaver tutorial for real, Deployed Easily at one go, Underrated Channel! Thank you, you have my like and subscribe!

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    So glad it was helpful! Thanks for subscribing!

  • @zainmashhood7943

    @zainmashhood7943

    26 күн бұрын

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

  • @ashanime4867
    @ashanime48673 күн бұрын

    thanks buddy, this is the best video I have seen

  • @suryanagcs
    @suryanagcs2 ай бұрын

    thanks buddy works like a charm appricated

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

    You're welcome!

  • @user-oz5mx1sd4u
    @user-oz5mx1sd4u2 ай бұрын

    Thank you! It was vey helpful!

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

    Appreciate it!

  • @zainmashhood7943

    @zainmashhood7943

    26 күн бұрын

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

  • @zyates
    @zyatesАй бұрын

    You saved me! Thank you so much!

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    You're welcome!

  • @Timepass-xb2yb
    @Timepass-xb2ybАй бұрын

    Thank you so much This was really helpful

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    Appreciate it!

  • @zainmashhood7943

    @zainmashhood7943

    26 күн бұрын

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

  • @alvincalma1009
    @alvincalma100910 күн бұрын

    This is greatly helpful!

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    5 күн бұрын

    THanks!

  • @abrahamouattara8757
    @abrahamouattara87572 күн бұрын

    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

  • @TheCodeBreaker190
    @TheCodeBreaker190Ай бұрын

    Thanks brother. appreciate a lot.

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    😎

  • @mohiramansurovna4295
    @mohiramansurovna42952 ай бұрын

    Thank you for this video

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

    thanks for watching!

  • @user-dj2iu2zv7r
    @user-dj2iu2zv7rАй бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    Appreciate it a lot!

  • @zainmashhood7943

    @zainmashhood7943

    26 күн бұрын

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

  • @kresimircosic3753
    @kresimircosic3753Ай бұрын

    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

    @VladyslavDihtiarenko

    Ай бұрын

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

  • @otzmediaz4387
    @otzmediaz4387Ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    Thank you a lot! Glad it helped!

  • @zainmashhood7943

    @zainmashhood7943

    26 күн бұрын

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

  • @arunuraj1532
    @arunuraj15329 күн бұрын

    can u please tell how to add .env variables ? what changes should i make in the deploy.yml file

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    8 күн бұрын

    Environment variables are added in GitHub repository settings

  • @MonkeyWrenchMechanicManiac
    @MonkeyWrenchMechanicManiacАй бұрын

    Thanks brother very helpful..

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    Appreciate it! 😊

  • @maryamsaleh5259
    @maryamsaleh5259Ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    Check out my new view where I showed how to fix this issue: kzread.info/dash/bejne/p4eoyJSBfbvJcdY.html&ab_channel=VladyslavDihtiarenko

  • @user-km8rs4tj5w
    @user-km8rs4tj5wАй бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

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

  • @zainmashhood7943
    @zainmashhood794326 күн бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    24 күн бұрын

    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

  • @potato-ip9tp
    @potato-ip9tp2 ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

    No problem :)

  • @Kerchiano
    @KerchianoАй бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

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

  • @netbug94
    @netbug94Ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    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)

  • @netbug94

    @netbug94

    Ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

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

  • @jjyyyy-zc6cr
    @jjyyyy-zc6cr26 күн бұрын

    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

  • @jjyyyy-zc6cr

    @jjyyyy-zc6cr

    26 күн бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    24 күн бұрын

    Glad you solved it :)

  • @Rootblack04
    @Rootblack04Ай бұрын

    it's work. thanks 🤗👌

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    🫡

  • @prodpreston
    @prodprestonАй бұрын

    Good looks crodie

  • @farazk9729
    @farazk97292 ай бұрын

    Thank you.

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

    👌

  • @funfstuck
    @funfstuck2 ай бұрын

    дякую!

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

    👌

  • @kulikitakati549
    @kulikitakati549Ай бұрын

    what vscode theme is that?

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

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

  • @fatimajimoh3405
    @fatimajimoh340512 күн бұрын

    Mine displayed this: Unexpected Application Error! 404 Not Found

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    11 күн бұрын

    Check this out: kzread.info/dash/bejne/p4eoyJSBfbvJcdY.htmlsi=kFW2bxrcodifhFvH

  • @jaysontadayca8838
    @jaysontadayca88382 ай бұрын

    how do we deploy the backend?

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

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

  • @yacinbensidahmed6587
    @yacinbensidahmed6587Ай бұрын

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

  • @dheerajsaini1353

    @dheerajsaini1353

    Ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    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

    @dheerajsaini1353

    Ай бұрын

    Yes that was the problem i fixed it already

  • @Thee_Don96
    @Thee_Don962 ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

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

  • @Thee_Don96

    @Thee_Don96

    2 ай бұрын

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

    @VladyslavDihtiarenko

    2 ай бұрын

    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

    @Thee_Don96

    2 ай бұрын

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

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    2 ай бұрын

    @@Thee_Don96 send me a link to your repo

  • @Tjiaz-
    @Tjiaz-Ай бұрын

    Thank you

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    You're welcome

  • @The_DollMaster
    @The_DollMaster18 күн бұрын

    Doesn't work :c

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    15 күн бұрын

    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?

  • @yaswantkumar9112
    @yaswantkumar9112Ай бұрын

    i am gettingn a blank page bro !!

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

    any errors in the console?

  • @user-vw8rh9rp3k
    @user-vw8rh9rp3kАй бұрын

    Your tutorial was very bad. Not even a single work has been done. He is not deployed

  • @VladyslavDihtiarenko

    @VladyslavDihtiarenko

    Ай бұрын

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

  • @jeevan1409

    @jeevan1409

    Күн бұрын

    Have some respect and ask your doubts. If not him somebody will answer you. Learn to be polite dude.