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

In this video i will go over How To Deploy a React Application really fast!
Repo: github.com/machadop1407/chart...
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
Timestamps
00:00 | Intro
01:19 | Create Github Repo
03:35 | Installing and Setup
07:50 | Deploy
09:51 | Outro
#reactjs #github

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

[@AlamMahmood]

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

[@rogue2557]

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!

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

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

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

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

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

[@DungLearnThings]

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

[@p.rusinov8732]

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

[@zzzzzzzzzz3567]

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

[@marcosmeneghetti3261]

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

[@nabilhaouam8497]

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

[@stransey]

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

[@kalinaszek]

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

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

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

[@asaventurasderobson]

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

[@user-lm2cg8kv3w]

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

[@kayraczerniewicz5047]

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

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

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

[@TheJockerproductions]

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

[@chandrashekharbhagat2435]

very clear and smooth explanation , thanks buddy!

[@liliyao317]

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

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

[@Amsanc]

Graças a você consegui finalmente publicar o site. Muito obrigado Pedro.

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

[@moonchild_ankita]

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

[@vivianeups]

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

[@j13131]

Thank you! It take me several tutorials to get it done.

[@vasilemidrigan50]

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

[@sayyedsameerbasir2593]

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

[@daniorandi2232]

First tutorial that actually worked for me, I appreciate it

[@ajaybisht1658]

You made this so easy, thanks a lot

[@nurdanokcu3906]

Loved it , very easy to understand. Thank you.

[@malouette3991]

Thank you for the clear explanations! It worked perfectly!

[@UAV_Musafhir]

youre amazing bro. simple steps. Tysm

[@kritidwivedi7744]

THANKYOUUUUUUUU, HAD BEEN STRUGGLING A LOT FOR THIS

[@user-nj3lg7wi5r]

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

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

[@shivsaxena90]

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

[@user-pk1so3dg2v]

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

[@19xalex89]

Thank you very much. Your help was invaluable and I cannot thank you enough

[@Matt_Kumar]

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

[@umaimafaisal6396]

You saved my life, thank you for existing

[@InvocateurSkyword]

you literally saved my day, thank you so much

[@shubhamaryan6064]

Very well explanied . Thanks a lot dude !!

[@lhomme_flaneur]

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

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

[@OddSpeech]

This helpped more than the documentation

[@vijayarajfullstack]

Thank you , Good explanation , Love from India

[@codingcody]

Very good and detailed explanation. Thank you

[@kennethimade4637]

thanks for making this video, really helped me out

[@vantal4115]

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

[@mohammedammarkurabi7520]

Many thanks. Excellent tutorial

[@robertobenedit]

Perfect! everything is working just fine!

[@PatrikRasch]

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

[@MrBox4soumendu]

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

[@pepsicolla123]

Thank you very much! It worked! 🎉❤

[@MrBill007]

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

[@ThColinPereira]

Super helpful as always!

[@mattholsten7491]

Just a perfect video. Thanks homie.

[@poeticider]

this helped me out a lot. many thanks!

[@ylahti6]

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

[@mennaelshahawy8207]

Thank you so much 😍 This was really helpful.

[@JoseGomez-ie3mi]

You are amazing.. So well explained.

[@bestakuma11]

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

[@davitazariani5009]

Thanks, very useful for beginners👍🏾

[@macskology]

Thanks a lot! This was so clear.

[@grandorf5967]

Great tutorial! It's just awesome!

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

[@jreezy6047]

Thank you so much! Very helpful!

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

[@giffarialfarizy7310]

Thanks. I really need this kind of videos!

[@PedroTechnologies]

Glad it was helpful!

[@user-uv7ym9hz2x]

yeeees! it works. Thanks a lot

[@djlastnight1]

Very usefull video! Thx

[@howtodoit1111]

Thank you so much, brother! You earn a subscriber.

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

[@fotios4902]

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

[@Amankumar-vv2cx]

Thank you so much I'm trying since last 4-5 hours😅

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

[@vcodr]

very easy and helpful tutorial 🙌🙌

[@giorgikiladze1151]

man thank you very much it was really helpful

[@melamelawen]

thanks a lot man! This helped me a lot

[@PatrikRasch]

Thank you man!

[@visheshpandey2001]

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!

[@visheshpandey2001]

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

[@felipenegreiros1914]

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

[@ChinonyeremBlessing-ty1ic]

Thank you so much for this 😊

[@anasfaisal5433]

thanks a lot! it's helping me on my course task, i'm from Indonesia by the way. And in Indonesia we'll say "mantaps 👍"

[@szymonduranowski4510]

omg tysm for such a great tutorial

[@user-jm7xn8li5g]

thank you for that clear explanation :)

[@animeshkalita9342]

Thank you so much for this video

[@kalustepheneke1838]

Excellent. Thank you very much 😊

[@lindaroy3453]

Thanks very much the video was of great help

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

[@codeWithSyam]

Thanks mate Really helping

[@dosbolaliev5718]

Thank you so much bro, I really appreciate it

[@ahmedbelloula9268]

it works pefectly .. thank you