How To Deploy A React Vite App To Github Pages (Simple)

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 129

  • @PedroTechnologies
    @PedroTechnologies  17 дней назад +4

    Quick note:
    For most people, my tutorial is working fine and they are able to deploy. Some people still run into a blank page when deploying or have issues with images. So if this is you, check this out:
    1. For the blank page issue, most of the time its because you forgot to add the {base: "/REPO_NAME/",} to the viteconfig or you put the repository name incorrectly. Remember, its not the url to the repo, just the name.
    2. If you are using react router, please use React Routers HashRouter instead of browser router since github doesnt work with browser router.
    Also, if you want to learn react and want to check out a platform we collaborate with, check out scrimba: scrimba.com/?via=pedrotech

  • @farazpc5882
    @farazpc5882 Месяц назад +6

    Thank you so much, I was spending more than 3 days just to run a react website in github but your 7 minutes video fixed all of it!

  • @AshishKumar-hw3um
    @AshishKumar-hw3um Месяц назад +2

    thank you soo much bro i tried many months to deploy but this is the first worked video I ever seen, From today onwards you got a new subscriber

  • @rockybarrios9177
    @rockybarrios9177 3 дня назад +1

    Thank you so much, bro. Simple, clear, short.
    I always forget and always come to this video.

  • @sid__shah
    @sid__shah 22 дня назад +1

    thank you so much bro i tried so many time and see so many different people tutorial and nothing work for me and you just solved my problem in 6min.
    from today onwards you got a new subscriber

  • @Mir0nHasen
    @Mir0nHasen 23 дня назад +2

    i was wasting 1 day to deploy vite react but your specific video helped me wowww

  • @PatelHarsh-mi2yg
    @PatelHarsh-mi2yg Месяц назад +1

    Thank you so much♥, i was facing so many problems in deploying react project to github and i wasn't known how it would work in github pages but your video was so informative, it just solved my problems .

  • @kollurilohit
    @kollurilohit Месяц назад +1

    Hey there guys i have updated the repo to serve images and files locally instead of using a blob storage it should allow more customisation for the website and fixed other minor issues as well.
    Thank You for using my Template ❤

  • @aiatiiazalieva2148
    @aiatiiazalieva2148 День назад

    Thank you so much Pedro, very awesome! Your video helped me a lot to deploy vite-app!

  • @Smit_malani_21
    @Smit_malani_21 29 дней назад +1

    Thanks bro, I was spending a day just deploy my rect app. Now saved your video for future reference. Again thanks bro. Love from India.❤❤❤

  • @Firestarter7877
    @Firestarter7877 10 дней назад +1

    Thanks it really helped, i've been stuck for hours

  • @NataliaCarrillo-x1i
    @NataliaCarrillo-x1i 9 дней назад +1

    Thanks a lot chief. It took me 4days to do this

  • @jaydenwebb8758
    @jaydenwebb8758 Месяц назад +1

    Thank you so so much, I spent hours trying to figure out why nothing was working, didn't even know a gh-pages package existed!

  • @feliperamalho4135
    @feliperamalho4135 2 месяца назад +2

    Salve Pedro, assistia bastante seu canal quando tava no estágio, fico feliz em ver que conseguiu tantos inscritos!

  • @serajali4621
    @serajali4621 Месяц назад +1

    Big love bro I was suffering with deploying my project until I saw your video ❤

  • @yatsuto6088
    @yatsuto6088 14 дней назад +2

    Thank you. I wasted a whole day trying to get my web page to work on github. Idk why i didnt just look up a video for help sooner.

  • @rahuldeee
    @rahuldeee Месяц назад +1

    been stressed for three days, only if i had come across your video earlier. thanks man

  • @abhaysharmafitness
    @abhaysharmafitness Месяц назад +2

    amazing, this worked first try

  • @dhanushr878
    @dhanushr878 7 дней назад +1

    Thank you so much brother ❤

  • @loaybig
    @loaybig 2 месяца назад +1

    didn't work initially because my repo was private , i changed it to public, and it worked thanks for the clear instructions. 👍

    • @PedroTechnologies
      @PedroTechnologies  2 месяца назад +2

      What didn't work? I can help you :)

    • @loaybig
      @loaybig 2 месяца назад

      @PedroTechnologies thanks it did work once I changed my repo to public. however, when I deployed i encountered some issues. For example, the images are not loading .. I'm getting a 404 images not found on console..some do work though.. it's weird

  • @thebeginnercoder
    @thebeginnercoder 9 дней назад +1

    It works, Thanks.

  • @adrianma78
    @adrianma78 20 дней назад +1

    worked perfect! thanks for sharing

  • @returncode0000
    @returncode0000 2 месяца назад +2

    Awesome as always ♥

  • @Alnz-b2b
    @Alnz-b2b 2 месяца назад +1

    🎉thank you, straight to the point.

  • @endeavour-q5o
    @endeavour-q5o Месяц назад +1

    Thanks bosss🤝 ..... Its working after 10000... of deployment

  • @Shou06
    @Shou06 2 месяца назад +2

    Thanks for making this video

  • @sumitsaurabh4670
    @sumitsaurabh4670 21 день назад +1

    awesome, thank you bro

  • @luisdss
    @luisdss Месяц назад +1

    Awesome video, thanks!

  • @mohitchoudhary7234
    @mohitchoudhary7234 21 день назад

    In the vite config file (base have / at the end )then it works for me ❤

  • @harithabandara3212
    @harithabandara3212 Месяц назад +1

    Thank you!

  • @JDK_24
    @JDK_24 2 месяца назад +1

    Bring series of questions asked in machine coding round in react. Also do cover advance js topics 🙏🙏🙏

  • @mitchellrcohen
    @mitchellrcohen Месяц назад +1

    Thank you!!!!!!

  • @Sexyeditedpodcastclips
    @Sexyeditedpodcastclips Месяц назад +1

    thx bro, this worked!

  • @Alnz-b2b
    @Alnz-b2b 14 дней назад +1

    Can i follow old react videos? Do i have to be on the exact same react version to follow? Thank you in advance.

    • @PedroTechnologies
      @PedroTechnologies  13 дней назад +1

      Yes! The only differences is that now we use vite instead of create react app and that i teach some hooks that are obsolete like useMemo and useCallback

  • @AashaPun-w2h
    @AashaPun-w2h Месяц назад +1

    Thanks man❤!

  • @neha_singh25
    @neha_singh25 Месяц назад +1

    Thank you so much ❤

  • @rinconzombie4166
    @rinconzombie4166 Месяц назад

    thanks for this video man
    :)

  • @user-t40Km8f09x
    @user-t40Km8f09x Месяц назад +1

    Thank you so much for the tutorial! I'm now trying to use a custom domain for my github pages site, do I need to change the homepage url inside my package.json?

  • @clintonscheible3146
    @clintonscheible3146 Месяц назад

    Is it this simple when you start adding in querying databases and verifying user identification? Processing credit card information or providing traffic/weather data?

  • @mutsamutepfa
    @mutsamutepfa 2 месяца назад +1

    nice👍, quick and easy

  • @ChinonsoOmada
    @ChinonsoOmada 2 месяца назад

    Thank you so much Pedro,you made me understand react very well,now I can deploy. looking forward to more react project 👍
    Please I want to ask, you will have to deploy to GitHub first before you deploy to firebase?
    I am asking based on your tutorial on react and firebase deployment

  • @mohamedgamer3213
    @mohamedgamer3213 Месяц назад

    Thank you so much, What is the best way to implement paths and routes so i don't run into issues with the github deploy

  • @ahpa1n
    @ahpa1n 5 дней назад

    this works perfect for me ^^^ ty so much, but i had problems open the gh pages url in my mobile phone, is this normal?

  • @javajoint
    @javajoint 2 месяца назад +1

    groovy, well done

  • @hardiantodwi6633
    @hardiantodwi6633 27 дней назад +1

    cool, thanks

  • @ivazr4527
    @ivazr4527 17 дней назад

    can you help me bro? my repository is on the parent of vite project react i had(several react app). i try to do some thing about it to make the gh-pages goes to every single of the project still doesnt works and end up just making buiild on the repository overwrite it over and over

  • @AndersonLima-ff8be
    @AndersonLima-ff8be Месяц назад +1

    fui fazer isso em outro pc, mas o vscode dele não tava com a opção de auto-save, pra quem não conseguiu tenta ligar o auto-save

  • @CrowLev
    @CrowLev 9 дней назад +1

    Thankyou

  • @206-tusharkantimukherjee3
    @206-tusharkantimukherjee3 27 дней назад

    Thanks❤

  • @BenedictStancu
    @BenedictStancu 25 дней назад

    Hi! I've got a blank page. I've used TypeScript instead of JavaScript, but I don't think that this is the problem. Any ideas?

  • @cyb3rge1st
    @cyb3rge1st 13 дней назад

    I followed your steps up to where I had to run npm run deploy, but then I got an error as follows:
    Error: Failed to get remote.origin.url (task must either be run
    in a git repository with a configured origin remote or must be configured with the "repo" option).

  • @HollowsDarkness
    @HollowsDarkness День назад

    When running the deploy I get an error that says denied to my stuff

  • @SAINARMADACHAMARTHI
    @SAINARMADACHAMARTHI 21 день назад

    helped alot:)

  • @tahaneji2102
    @tahaneji2102 Месяц назад +1

    is it possible to update the code after the deployment ?

    • @PedroTechnologies
      @PedroTechnologies  Месяц назад

      Yes! You just have to push the changes to the repository and it will update the deployment!

    • @tahaneji2102
      @tahaneji2102 29 дней назад

      ​@PedroTechnologies initially it worked but after updating my code it start showing a 404 error

    • @AnixSharma
      @AnixSharma 9 дней назад

      @@PedroTechnologies after pushing, there is no changes in the website. we don't have to run 'npm run build' again?

  • @JimmyC0
    @JimmyC0 2 месяца назад +1

    This won't work for SSR next project, right?

    • @PedroTechnologies
      @PedroTechnologies  2 месяца назад

      I recommend deploying next to vercel for free! I have a vid on it similar to this one :)

  • @farehaaslam5177
    @farehaaslam5177 17 дней назад +1

    i have used your way every thing is working fine except the image in public folder .how can i resolve that

    • @PedroTechnologies
      @PedroTechnologies  17 дней назад

      WHat is happening to the image? Is it not showing up?

    • @farehaaslam5177
      @farehaaslam5177 17 дней назад

      @PedroTechnologies yes they are not showing up, I have put them in public folder , they were showing up in local host

  • @MohammedAlziko
    @MohammedAlziko 2 месяца назад +1

    😘😘amazing

  • @SaurabPrasai
    @SaurabPrasai 2 месяца назад

    how can we configured the env varibles?

  • @AmanWebDev
    @AmanWebDev 16 дней назад +1

    It is showing white blank page

  • @marcellogallante
    @marcellogallante 2 месяца назад

    Salve, parabéns pelo canal! Onde voce fez ingles? Eu tenho esse débito como dev...

  • @jackal_sniperr
    @jackal_sniperr 27 дней назад +1

    I followed all the steps..... however the url at which my react website got deployed just shows blank.........it's flashes for a second then vanishes........might have something to do with API issue....... man this makes my cry 😢😢

  • @vamshikusuma-c3t
    @vamshikusuma-c3t 17 дней назад +1

    can anyone help me after deploying iam getting a blank white page

    • @PedroTechnologies
      @PedroTechnologies  17 дней назад

      Did you set the base on the viteconfig to be your repository name?

  • @ChintalapatiJayanth
    @ChintalapatiJayanth Месяц назад

    what about that dist folder, it is appearing M

  • @rshiya5018
    @rshiya5018 Месяц назад +2

    i did all of this and it got deployed but without any of my my media !!

    • @rshiya5018
      @rshiya5018 Месяц назад +3

      i managed to fix error in loading my media by adding a ./ in my src paths like "./images" instead of "/image"

  • @AyanSaifi-n5f
    @AyanSaifi-n5f 3 дня назад

    not working in router website.

  • @goneaway-o3z
    @goneaway-o3z 21 день назад +1

    waste 1 day but still this error git : The term 'git' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name,
    or if a path was included, verify that the path is correct and try again.
    At line:1 char:1
    + git init
    + ~~~
    + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

    • @PedroTechnologies
      @PedroTechnologies  21 день назад

      Are you using mac or windows? What happens when you run git -v or where git on your terminal? You can install git on this website: git-scm.com/download/win
      Also make sure to open a new terminal window after installing.

  • @O-02
    @O-02 2 месяца назад

    You look like Agurin with those glasses

  • @JahidulIslam-wc1dz
    @JahidulIslam-wc1dz 2 месяца назад

    Brother, can you start a brand new backend series (Node JS, Express JS, PostgreSQL, Prisma, Redis and Docker)

  • @goneaway-o3z
    @goneaway-o3z 21 день назад

    error is showing not working

  • @medunrajyason7620
    @medunrajyason7620 2 дня назад

    not working my portfolio

  • @shk01._
    @shk01._ 2 месяца назад

    How can I update the site?

    • @FrontendTribe
      @FrontendTribe 2 месяца назад

      You have to run `npm run deploy` again after you make changes

  • @faizansyed9514
    @faizansyed9514 18 дней назад +1

    I got white screen i did same as per video

  • @happy..1907
    @happy..1907 2 месяца назад

    Should have installed as devDependency

  • @anshusharma6560
    @anshusharma6560 2 месяца назад

    It actually didn't load desktop images in mobile phone

  • @DataBabo
    @DataBabo 19 дней назад

    Still Empty

  • @tesfaldethabte-q9m
    @tesfaldethabte-q9m 2 месяца назад

    error

  • @goneaway-o3z
    @goneaway-o3z 21 день назад

    i have installed git also but still this shit

  • @2ru2pacFan
    @2ru2pacFan 2 месяца назад +1

    Thank you Pedro 🫡