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

[@linaspliki6589]

Heads up to anyone using Vite instead of create-react-app. Vite creates a "dist" folder instead of "deploy" on build so you need to add "deploy": "gh-pages -d dist" instead of "deploy": "gh-pages -d deploy" when adding to scripts. If you don't do this Vite won't locate the "build" folder and the gh-pages branch will not get created.

[@vanodee9757]

You're an amazing person. thank you for this. Been struggling for an entire afternoon.

[@Code.J]

Thank you very much! :D

[@iberry2689]

THANK YOU SO MUCH 😭

[@arkansavalder]

🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵

[@kasho_ali]

Thank you so much 😭😭😭❤️

[@artisticdevelopment7181]

As a self-taught developer it warms my heart to find someone that explains things so well. Thank you thank you thank you.

[@hopevandyne3258]

I AGREE!!! Tutorials r usually people giving the steps without any explanation as to why we’re doing it.

[@gcsandesh]

I searched for this problem everywhere, finally this video helped me solve the problem of deploying the react app. When I deployed the app I would get a blank page on the github page. But I followed your steps and it worked. The key is to 1. "put the scripts in order" and 2. "put the homepage url correctly".

[@liliyao317]

I faced the same problem, and after following this tutorial, I still got a blank page... 🤣

[@keldrogo175]

@@liliyao317 did you find a solution to that ?

[@dylaneamos]

@@liliyao317 Same man. I AM STILL GETTING A BLANK PAGE AND I DO NOT KNOW WHY and it's irritating hahaa. Incase you found the solution please share.

[@anon00s]

worked for me ty

[@bryan.gonzales]

bro i just did it and i got the same white blank page. been at this the whole day@@dylaneamos

[@rococococoa]

Thanks! I want to get faster and faster at deploying a static react frontend build, so I will try this out (though I wasn’t able to find a related repo linked).

[@PedroTechnologies]

Thank you for the support! I don't remember why I didn't put the link in the description but here it is: github.com/machadop1407/chartjs-react-tutorial

[@solice3473]

2 years later, still works perfectly. Thank you so much!

[@AlamMahmood]

Man you saved my life. I created an application on React but was having hard time to deploy to github pages..u helped

[@jasimrazamomin3117]

I rarely leave any comments on any video but this worked perfectly for deploying my portfolio. Thank you so much! It took me hours and hours of googling and installing stuff and doing complex things that didn't work but this worked on its first go. Once again thank you for making such a great and straightforward video!

[@ROGUE.119]

I read docs, digged stack overflow, etc for 3 hours plus to get by website up, ended up watching your video and voila! Thanks a lot chief, subbed!

[@ummi7292]

I was so lost, confused, distraught because i was facing a roadblock with this deplyment part ...UNTIL i found this !! cant thank you enoough ! May you be blessed!

[@visheshmp]

So if anyone wants to know how to keep updating the gh-pages with main branch then you have to simply do one thing : update your main branch and commit changes.. once it is done then .. again run the command in terminal : npm run deploy now after you will run this command it will update the gh-pages automatically Thank you

[@andresfelipecanobotero8814]

When I do 'npm run deploy' I get the following error: 'gh-pages' is not recognized as an internal or external command, operable program or batch file. This is after successfully deploying my site and pushing changes to the main branch. Does anyone know why? EDIT: Figured it out, gotta make sure 'gh-pages' is in your dependencies in the package.json file. If not, gotta rerun ''npm install gh-pages' and try 'npm run deploy' again!

[@visheshmp]

@@andresfelipecanobotero8814 Oh great! I was about to answer.

[@felipenegreiros1914]

@@visheshmp I got a different error: npm run deploy> ENOENT: no such file or directory, stat 'G:\programing\portfolio\portfolio\build' PS G:\programing\portfolio\portfolio>

[@trexon2360]

@@felipenegreiros1914 in your package.json file you edited, change "deploy": "gh-pages -d build", to "deploy": "gh-pages -d dist" when you you run build, it builds into the dist folder and not the build folder

[@shadowysuper-coder6120]

@@trexon2360 thank you so much for this reply, I fixed the ENOENT error and now have the Published message at the end ❤❤

[@shirouF]

My deployed site showed a blank page, and using HashRouter instead of BrowserRouter in my index.js file fixed the issue. Hope this helps anyone else facing the same thing. Thank you for the well put video!

[@ObserveEveryMove]

Worked seamlessly Thank you!!! Self taught and had no problems with the directions. Clear and concise.

[@juan83xd]

Thank you! I have been trying to deploy my app for hours. Your tutorial was the only one that worked for me. Thank you.

[@waelsta3103]

Ure my age and honestly ure such an inspiration … keep going man i love your videos

[@PedroTechnologies]

Thank you hahaha If it serves as motivation, I started learning react in the beginning of 2020 so you can learn a lot in a small amount of time!

[@ayotunde9183]

Thank you for this video Pedro. I deployed my react app to GitHub page and all it's showing is a blank page. Please what could be the error here?

[@rorocyr6450]

im having the same problem'

[@mukulvishwakarma3585]

Found any solution?

[@DungLearnThings]

I love you man :)) not only did you show us how to deploy but also explain some "aside" things and i like that

[@febindevassia333]

Thank you so much for this bro. I'm an aspiring react developer from KERALA,INDIA. This video helped me a lot to deploy and publish my website properly . Thanks a lot.

[@sonishn5222]

Its great tutorial Thank you. But you missed one Point. For those who are getting White screen make sure to add your repository name in route like this this will prefix '/' with reponame

[@sonishn5222]

@playmaker you are trying to read undefined value..check from which component your getting this error from. If your seeing this error only after deployment..may be you will have check filepaths used in that component

[@josephjose8292]

​​@@sonishn5222 i deploy react app using github pages but it returns default error page in this project. can you help me😢

[@dylaneamos]

Bro I have followed even this way but I still see white screen.

[@dylaneamos]

@@sonishn5222 What do you mean by filepaths? What could be wrong?

[@luan_ferreira_]

Thank you so much my guy, I looked for several videos here from my region Brazil, and none really helped me, yours was the most complete and correct, and by the way, your name "Machado" is the same as an important Brazilian writer Machado de Assis.

[@Hacking-NASSA-with-HTML]

Thank you, sir, So Much👍! You are my Hero! So simple and easy in ten minutes to deploy an app with your guidance! I have my first react app deployed to gh-pages🤝 it works ✅

[@kalinaszek]

helped me done task on deadline, great video, straight to the point

[@DreCode10]

First tutorial that actually worked for me, I appreciate it

[@terribletruth8201]

Tip: If you get a fatal error along the lines of "fatal: A branch named 'gh-pages' already exists", delete the folder in: node_modules/.cache/gh-pages VSCode kept giving me that error despite that branch not showing up in the repo anywhere. Deleting the folder and rerunning the deploy command worked.

[@pranit8437]

thanks a lot for this

[@felixmarvelian6118]

i cant find .cache

[@felixmarvelian6118]

how to fix i even delete everything that says gh-pages and still says alredy exists

[@p.rusinov8732]

Thanks a lot! Best react course i've seen on youtube keep going!

[@stodani]

5:49 i don't have any of those script tags.. i only have ""test": "echo \"Error: no test specified\" && exit 1" inside "script{ }". Should i deleta that one and type all the tags you have in there?

[@stransey]

Thanks, your tutorial is better than all i found in the internet

[@dailyvictoryy8633]

Loved the video Pedro. The way you teach, I can tell that you fully understand the things that you teach because of how simple you explain it. Even a 7 year old would be able to understand.

[@yashraj6565]

After 15 min, my site is still not appearing on given link by the gh pages!...

[@Verakissyou17]

You are the best teacher! Thanks for your help!!!

[@anselmpeter]

Today I deployed my site after the efforts and learning of many days. Thanks to PedroTech for this awesome very straightforward video to help me through the way.

[@누렁이-d4p]

I spent three hours alone but thanks to this video I solved problem at once Thank you very much

[@abdullahm6238]

i have been searching for this for ages

[@YummyJiu]

谢谢！

[@PedroTechnologies]

Thank you!!

[@nabilhaouam8497]

thank you , this helped so much I've never used github pages before and this tutorial made it easier

[@liliyao317]

Thank you so much! I finally got my pages after so many tries.

[@DanielMoreno-lc9bx]

I really appreciate your help, now I have a question, what if I want to deploy it with a back-end and database? I guess with the back-end is pretty similar, but what for the database? Thank you.

[@ahmed7253]

Thank you very much. but if I have a node JS server, what should I do?

[@shinobi_coder88]

If you have a NodeJs server (Backend), you can deploy it somewhere like Heroku or similar and deploy your React App (Frontend) to Gh Pages as normal

[@ahmed7253]

@@shinobi_coder88 ok thx 💙

[@PedroTechnologies]

Yeah, what Benedict said is correct! You upload the backend to something like heroku and then just change the api call url's to be the heroku url

[@earpoon]

@@PedroTechnologies how can i hide my password to my mongodb atlas database in my backend before i upload it to heroku?

[@notfahadh]

where did you get the codes to enter in terminal?

[@AyseHauck]

thank you so much i was struggling with this for a while ! this is the easiest video to follow!

[@codingwithkenny6492]

Thank you so much! I used to struggle so much with the entire process involving using the terminal. This is the best tutorial I've found and it was also very easy to follow along! You just earned a new subscriber 😉

[@Ninboy_1]

How do you get to the quick setup page to copy that text 3:02

[@PatrikRasch]

Here again after finishing my newest project, thank you again! 😂👏

[@ankushchavhan1332]

Intro music is refreshing 🤩

[@PedroTechnologies]

I think so too hahaha

[@sayyedsameerbasir2593]

Really helpful video, you solved the problem for which i m struggling from last 1 month

[@marcosmeneghetti3261]

Obrigado, Pedro, pelo super tutorial. Estou aprendendo bastante contigo. Forte abraco.

[@aabhasjain96]

Thanks Pedro for everything, I am loving your content. From last one week I have started watching your videos and there isn't a single day when I haven't watch your video. Thanks once again ❤❤

[@leviackerman1521]

Hey man i upload site and its done but when i click on link for my web site it shows a empty white page what should i do ?

[@fichanegratt]

How can I deploy a create-react- app with react router dom in github pages?

[@PedroTechnologies]

There is a component called HashRouter in react router. Try replacing the BrowserRouter component (also called Router) with the HashRouter component.

[@ylahti6]

Thank you! I've been battling this issue for the WHOLE DAY - I'm such a noob D:

[@zzzzzzzzzz3567]

You are amazing. The way you explain is so clear and easy to follow. Thank you so much!

[@kritidwivedi7744]

THANKYOUUUUUUUU, HAD BEEN STRUGGLING A LOT FOR THIS

[@kayraczerniewicz5047]

Thank you so much! excelent tutorial, been looking for this everywhere!

[@samuelsolomon348]

hey there great tutorial, but i have one question, when i opened link it immediately took me to my "missing" page instead of my "home page", i had to redirect the page to the homepage, is that normal

[@vyvxxxx]

If you are having issues with: no such file or directory, stat ... /build Change deploy script to: "deploy":"gh-pages -d dist"

[@lucasmacielptu]

Im currently having this problem, but if i try this correction it just says "ENOENT: no such file or directory, stat 'D:\.....\dist'", not sure how to fix it :(

[@six2101]

why I cant see the content of my web? its always white background

[@moonchild_아포방포]

Thank you so much for the video. This helped me a lot. I didn't knew the script order was the issue.

[@ramb6500]

thanks so much very simple and easy language you explain ,search so many videos but this is best one thanks ...

[@PedroTechnologies]

Glad it helped!

[@MeriThrash]

Thanks dude! I couldn't find a decent tutorial and this helped a lot. I'm suscribing right now and I'll surely look your other videos. Thanks you soooo much!

[@vantal4115]

thank u so much .. i am in love with your teaching

[@vijayarajfullstack]

Thank you , Good explanation , Love from India

[@OddSpeech]

This helpped more than the documentation

[@vivianeups]

Great, thank you so much! It worked to me to deploy my first react-app!!

[@asaventurasderobson]

Thank you man, that is an absolutely great tutorial, hard to find these days.

[@t-uzithehunterxx5879]

sabia que tu era br!! muito bom teus videos, o curso de react pra iniciantes me deu uma ajuda absurda. valeu pedro tech, tamo junto

[@griffinkirkland9087]

muito bom, gosto do conteúdo dele

[@TheJockerproductions]

Litteraly the best explanation i found so far! thank you so much

[@EllanaTs]

Thank you for your video! I did all the steps, but my images are not displayed. They worked fine in local host 3000. Any suggestions?

[@PedroTechnologies]

Glad it helped! For the images, make sure they are matching the exact name, gh-pages is case sensitive

[@muhammadahmed5772]

@@PedroTechnologies thank you very much, but they aren't displayed too

[@umaimafaisal6396]

You saved my life, thank you for existing

[@chandrashekharbhagat2435]

very clear and smooth explanation , thanks buddy!

[@shivsaxena90]

that's what I was looking for thank you (dhanyawad)

[@lewisstrongofficial]

I deployed a personal website using the steps in this video but I had a couple issues. 1. My homepage isn't showing my tags so there is basically no content except a footer component and navbar component I made. 2. None of the URLs in my navbar load. They simply return a 404 error.

[@srinivijay5002]

same issues for me too.....only navbar is showing no other components.....have you solved it???? Please answer....

[@nargizasainazarova7427]

@@srinivijay5002 i have the same problem, its because react router dom is used, and now url is different. He proposed to use HashRouter instead of BrowserRouter, now its ok on localhost, but it didnot help on gh-pages, i have the blank page. did u solve the problem?

[@tomjohansson3520]

I followed this video and was surprised at the ease to follow along. Now i have a working github page where i can document my progress as i learn to code. i would love to see a follow up on how to add a github action to check if code is working before building

[@PepperoniePlays]

e os br que nao falam ingles pedrao kkkkkkkkkkkkkkk salvou demais irmao vlw pelo video

[@PedroTechnologies]

Kkkkkkkk vlww!

[@mohammedammarkurabi7520]

Many thanks. Excellent tutorial

[@ajaybisht1658]

You made this so easy, thanks a lot

[@vasilemidrigan50]

Thank you so much, I spent all day and finally did it!

[@idanlib]

Hey pal, thanks for the video! Does the process necessitate having a new repo, or can I deploy to an existing repo? I have an exiting github pages (based on a repo), and I'd like to deploy to that, as opposed to creating a new repo.

[@bestakuma11]

I appreciate...i love the part u talked about running "npm deploy" so many times.

[@sahoodmzr8892]

thank you bro you helped me to publish my first react app, even if i failed several times watching other tutorials , may be it is my fault as i failed

[@PedroTechnologies]

Not your fault, we all fail in the beginning!

[@roelineburger9172]

This is amazing!! If I make changes to the repo, do I run the deploy script again for the changes to reflect?

[@許潤璋]

I thank you for this tutorial. It helped me a lot to deploy React apps. 10 bows to you.

[@devstuff92]

I love your videos man, I can't thank you enough! Question though, totally new with React here, we don't need to use" npm react build" before deploying our app to a github repository?

[@MeitoShirogane]

you literally saved my day, thank you so much

[@lhomme_flaneur]

thank you man! that helped me a lot! keep postin

[@fotios4902]

Good that you mention that it takes a while after the page is actually visible in the address.

[@Lik4nGaming]

Hi, first let me say thank you for the guide, it worked perfectly. Now, let's say i changed something in my project, do i need to only push to github or do both push and the run deploy command?

[@UAV_Musafhir]

youre amazing bro. simple steps. Tysm

[@nurdanokcu3906]

Loved it , very easy to understand. Thank you.

[@MrBox4soumendu]

You are always a boss, following you from long back. ❤

[@이름-f9z]

Thanks for the tutorial. Q) What if i make changes in my repo? should i push to my main branch then npm run deploy? or just git push origin main not sure about the process whenever i make a change

[@trexon2360]

just do a normal push to the same branch you initialy comitted to then rerun deploy comand

[@PatrikRasch]

Thank you man!

[@World_information5568]

Sir your videos are very very helpful 🙂

[@PedroTechnologies]

Glad to hear that!

[@HammedJimoh-vm8tt]

the homepage value does not have "s" after http. Does it count?

[@Matt_Kumar]

Thank you for the video, it was easy to follow and I was able to get my page up with ease!

[@djlastnight1]

Very usefull video! Thx

[@PixieTalesPoems]

You've earned yourself a subscriber sir !! you are amazing

[@JoseGomez-ie3mi]

You are amazing.. So well explained.

[@geosystems2106]

Thanks for the video !! Is this "gh-pages" the only way to deploy or is there another direct way to do this ?

[@richi5355]

Does this also work for deploying the back end?

[@saadowain3511]

Pedro you are my Hero.

[@PedroTechnologies]

Hahaha happy to hear :)

[@giffarialfarizy7310]

Thanks. I really need this kind of videos!

[@PedroTechnologies]

Glad it was helpful!