How to Deploy React App to GitHub Pages

★☆★ My Courses: telmoacademy.com/
★☆★ 1-on-1 Mentorship: calendly.com/telmosampaio
★☆★ SkillShare 2 Months FREE : skl.sh/2Q2LsTi
★☆★ Best Website Hosting:
partners.hostgator.com/c/43399...
★☆★UDEMY COURSES:
*The Complete JavaScript Course 2018: bit.ly/2Ci2Fzk
*Modern JavaScript From The Beginning: bit.ly/2Br13BM
*JavaScript: Understanding the Weird Parts: bit.ly/2Epdgu2
*React 16.6 - The Complete Guide (incl. React Router & Redux): bit.ly/2Br2ikq
*The Complete React Web Developer Course (with Redux): bit.ly/2zXq9IH
* React Front To Back: bit.ly/2STDUPo
★☆★Best laptops for Coding:
Acer Aspire: amzn.to/2FJrOVh
Macbook Pro 2013: amzn.to/2NbYIUp
Asus VivoBook Pro: amzn.to/2YgrCUG
Macbook Pro 2019: amzn.to/2Xzi4qG
★☆★Best JavaScript Books
John Duckett JavaScript: amzn.to/2EAEvkj
JavaScript Easy Steps: amzn.to/2VRM4sN
JavaScript Good Parts: amzn.to/2EFul1V
Eloquent JavaScript: amzn.to/2Quq5qH
You dont know JavaScript: amzn.to/2K9I9VX
My Social Media:
Twitter: / devtelmo
Instagram: / sampaiotravels

[@diversecontent788]

I thought learning react was difficult but then I found that publishing it is more difficult thank you man!

[@owenmoogk]

yeah lol learning react is easy compared to this

[@oaaees]

lmao 😂

[@HafizRahmanBD]

😅😅

[@poeticider]

So true...!

[@rbonnici]

I've been programming for 20 years, and it always becomes more complicated instead of simpler. Pity.

[@jeffrey5718]

so to summarize it up: step 1: create your github repository step 2: initialize your local directory into a git repo using git init step 3: git remote add origin github.com/username/repo step 4: Add homepage in package.json file using "homepage": "myusername.github.io/my-app" make sure 'my-app' is named exactly the same as your git repo created in step 1. step 5: Install gh-pages using npm install --save gh-pages step 6: Add the following scripts in your package.json: "predeploy": "npm run build", "deploy": "gh-pages -d build", step 7: git add . and git com mit -m "whatever" step 8: npm run deploy step 9: git push origin master for pushing all the changes to git repo so you have a repo to reference to. Rigorously follow this order so that you don't fuck shit up. I messed up the order and ended up having heaps of errors, wasted a good 40 mins trying to solve it myself. Motherfucker!!!!

[@Matin1999_unique]

unfortunately i'm still getting the same errors. 'sw-precache' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-web-test-1@0.1.0 build: `react-scripts build && sw-precache --config=sw-precache-config.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-web-test-1@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\tmp odejs pm-cache\_logs\2021-12-30T20_41_32_006Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-web-test-1@0.1.0 predeploy: `npm run build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-web-test-1@0.1.0 predeploy script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\tmp odejs pm-cache\_logs\2021-12-30T20_41_32_033Z-debug.log

[@zakariaben-harchache2275]

amazing video! was struggling all day and had to keep deleting and recreating repositories, this vid helped a ton! Thanks Telmo, means a lot!!

[@MfanufikileNicholsonGalela]

Best tutorial... struggled whole night yesterday woke up this morning found and now my is deployed

[@Telmosampaio]

I hope it helped you, make sure to press the like button :)

[@andrywinmaquinto5387]

Best tutorial. The start of my very first own portfolio. Thank you!

[@Scapben]

For those that aren't that smart like me and new to github: Your original code is in the branch master Your uglified/optimized code is in the branch gh-pages So if you want to show your code for a job interview for example, make sure to link the master branch and not de default one that is gh-pages

[@makanmusty]

Hey! How do you push changes from Master to Gh-pages branch?

[@WowNemy]

@@makanmusty I have the same problem! Did you manage to make it work?

[@sukantadinda9130]

A bit thank you from my side. I have been stuck at this point for almost one night, finally, it is done.

[@Kayne1b]

Just started learning React recently and this was very helpful. Thank you so much!

[@ADogNamedMilo]

Thank you Telmo. I was struggling to get my react app delivered properly to github pages. This video helped me a through. Have a great time and be well.

[@itikasarkar4782]

I've searched and seen a lot of videos for hosting react app but ended with errors. I was loosing hope but at that time your vdo saved me and helped me to get an internship. Thank you means a lot. :)

[@Sapphiamur]

Thank you!! This tutorial saved me :dd.

[@Telmosampaio]

You're welcome!

[@lovelytingy]

:w

[@quaidbergo]

Thank you, thank you, thank you!! This was almost a wasted evening until I found your video.

[@harshikerfuffle]

thank you @Telmo, this tutorial solved a lot of my deployment issues!

[@alexcost6353]

Thanks Telmo, love having your videos to look back on now that your not my instructor anymore! :(

[@Telmosampaio]

Alex I will miss you too!

[@prasenpatil4201]

This was the easiest step-by-step and systematic method i found... Thank-you very much brother

[@maciejjarmula]

Thank you! Very well explained, I just managed to run an instance of app I needed to go online.

[@TacklessNebula3]

Came across many, but this one took my heart! . . . . All I am saying is that it worked... thanks Telmo!

[@albertvilagrana6116]

Awesome tutorial. It was quick and straight forward.

[@salahuddinhissam]

thanks Telmo, since two days i have been straggling with this issue.

[@ShyamSundar055]

Thanks a lot...successfully deployed my first react app to github

[@dayanr.5950]

life saver, thanks

[@Telmosampaio]

Hey no problem Dayan

[@beenyshsaeed4559]

Thank you for the help. You are awesome. It had been quite a headache for some time, now you have helped me figure it out so easily. Thanks again.

[@MarsTheProgrammer]

Thanks bro! I'm currently using Netlify for my smaller portfolio projects, but it is giving me issues with .env files. This is much more simple! I'll be moving all my smaller React projects to github pages now.

[@user-zc6vc6ss2u]

That is great man! Thank you so much! I tried to find something worthy in my native language, but your explanation was easyer even for my knowledge. Your tutorial pritty easy and cool!

[@dim3143]

На русском к сожалению, крайне мало актуальной информации по JS. Приходится переходить на английский)

[@djpe4ka]

@@dim3143 Всё так, пацаны

[@adamm2716]

guide worked for me once i stopped trying to do everything beforehand and just followed along. then when you changed the app around i just brought in my src and just like that good to go. 10/10

[@Telmosampaio]

Thank you so much :)

[@jamesbatbondman988]

Thank you very much, your explanations are really detailed, at a perfect pace.

[@pearlstar1427]

Thank you very much! I was having trouble with it so I used "https" instead of "http". Then, it worked.

[@andrewsoseiagyemang3420]

I’ve been looking for this. Thank you

[@HiddenInformation10]

TE AMO, EL UNICO QUE ME FUNCIONÓ, 3 PUTOS DIAS MIRANDO TURORIALES Y TODOS ME DABA ERROR.

[@thulaninyama1608]

You made my deployment seamless, thanks

[@doglezcode]

Thank you!!! It took me a while to find this

[@patrickbrycesteen7388]

If anyone is having an issue and is seeing a blank white screen when your repo is uploaded double check that your branch is being built from gh-pages and that production build is deleted from your git-ignore file. # production /build This worked for me.

[@luisantonioloustaunaubauti7312]

I also had a blank page and just redid all the steps. I had to remove the origin and do it again, and the second time it worked!

[@danielsladecek8258]

Telmo, thank u for your video, i was so simple to understand!!! it is already in my bookmarks video on pc!!!

[@igor49134]

Brother, this video has just made my life sooo easier. Feels like the most important video on YT rn :D Thank you so much! Liked, subscribed

[@Cat-vd4ju]

Awesome Telmo, refresher tutorials are very helpful! :)

[@Telmosampaio]

I'm very happy you enjoyed it Cath :)

[@olinkirkland]

Great video. Easiest explanation ever. Thank you!

[@frankiejones8584]

Thanks Telmo! Very easy to follow as per usual!

[@Telmosampaio]

Thank you Frankie

[@JD-hq1kn]

Thanks man. This was something new for me... Great tutorial

[@tiagogrimaldirossi7412]

Only guide that worked for me. You're a life savior.

[@Telmosampaio]

Obrigado Tiago

[@siddhantbhardwaj4268]

Dude, you're awesome !!! Am an absolute fan of your work !! More power to you !!

[@tasteofbengal7908]

Tried for two days and failure again and again. Then I found your video and my project is successfully deployed. Thank u man.

[@norahwinda6034]

This was of great help. Thank you so much

[@joshypeepoo]

Dude, thank you so much! You are a lfesaver! I have been trying to do this for the past 3 hours and ran across your video.

[@andrewpham3933]

Thanks man worked flawlessly!

[@kryoleks]

Thanks a lot. Keep it coming. Your content is easy for understanding!

[@kristijonasjurksas7088]

Thanks for the detailed tutorial man. Hope this gets me the job...

[@ionutmarian1356]

Dude you should onestly receive an award for this video, very very useful

[@lefty6258]

thanks Telmo. Finally know how to deploy

[@winnizhang1224]

Thank you sir!!! Best video of explaining how to deploy react.js on github pages !!!!

[@Morangodone]

Thank you very much, sr! You helped me to put my first project online! I'm brazilian, but i understood everything you said. Nice pronunciation. thanks again!

[@fedorevseev8867]

Thanks for the video, that was simple to deploy a project with your straightforward explanations)) thanks man!

[@manasbansal7946]

best video on this topic!! thank you!

[@jadynekena]

Waw thanks man!!! A hero without a cap

[@shaneilkapadia4660]

Best Tutorial for creating a react website using github pages!!! Thank you so much!

[@gaurabdas6503]

Worked like a charm!

[@romankoval1573]

Fantastic idea to write some parts of the text with a dark text on a dark background

[@topeadebayo8863]

got stuck from a udemy course then came here... thanks so much

[@rishabhgawai278]

Thanks bro ,it is just so nice of you

[@islandev2422]

Thank you very much, this tutorial was truly a lifesaver!!!!!

[@MeganRoberta89]

It worked!!! You're a lifesaver, thank you SO MUCH!!!! :D

[@ejsmagic8011]

Thank you you just saved my computer from being thrown at a wall haha

[@luciferkhusrao]

Awesome explanation sir. Thanks a bunch. This really helped me a lot.

[@HamadAli]

Thank you so much Telmo, you are the best teacher ever!!

[@Telmosampaio]

[@hv6411]

Awesome explanation!!! Thank you😁

[@arunsooryak6351]

You are really amazing! Very clear and understandable

[@udini1]

Straight forward explanation of how to setup your React app on GitHub - The only thing I found lacking is information about different options for uploading . But the video suits the title. Good job anyway . +1

[@Telmosampaio]

Thanks udini1

[@awaraamin6850]

Great work, helped me out!

[@udayan285]

Thanks man, finally I can do it.

[@asadali1268]

awesome way of teaching .subscribed

[@sahilimrosezahin4403]

thank you for sharing a free site to deploy react app. you are a helpful man.

[@harshalsurwase2185]

I thought it's simple as deploying static webpages on GitHub , but now its more that that. Thank you✌✌

[@phananh8589]

So clear ! thank you Sir.you 're saver, i have seen 2 another clips but you' re the best one, i wish to know this at first ! keep doing your good job .

[@Telmosampaio]

Thank you Phan

[@yanlinghuang7002]

Life Saver!!!!! The tutorial is so helpful!!! Thank you very much!!

[@anetaaneta260]

Dziękuję za pomoc!!!!!!!!!!!!!!! :) Bardzo dobrze tłumaczysz!!!

[@pratikgohil7821]

if you are using react-router on your app, then add this line to your router `( ) this will point to homepage that you add in your package.json file

[@touche8020]

Thank you so much :) Best tutorial, hands down! :D

[@jubomdivnishvili8638]

Thank you very much! ❤️ your tutorial was awesome, everything was explained well and it worked!

[@Telmosampaio]

Thanks Jumbo, Great to hear! :)

[@yasmin-e]

Only tutorial that worked out for me! thank you.

[@tobyroy336]

Thank you so much Telmo

[@stephanwong7432]

Beautiful! Thank you bro!

[@muhammadfaizan1553]

Thanks a lot for this video. Really helpful

[@shubhamcodes9030]

Thanks buddy,this was really helpful 🙌🏻,deployed my web app 😅in minutes

[@edersonmarques7897]

Awesome tutorial. thanks!

[@pjguitar15]

Thank you. I just got my first react app published on Github

[@Telmosampaio]

Well done Phil :)

[@limehouseblues]

Huge Help, thank-you!!!

[@vsvaix]

perfect tutorial it covers everything thanks

[@rahman5723]

Thank u sir for giving this class...its very helpful

[@AnkitM414]

Worked for me!!!! Thanks bro.

[@ngel6171]

Thank you Telmo! Great.. even for rookies..

[@ayushsharma397]

Thanks a lot sir, u made it so easy to follow!

[@jennifershen4273]

Thanks a lot for this awesome tutorial!

[@glowingember1466]

Thanks for the tutorial!

[@SaeThunder]

Enjoyed hearing the portuguese accent :) Followed the instructions and now have my github webpage. Thanks!

[@dinhvanchuong5956]

you are my lifesaver! thanks a lot for making this video.

[@kempisabel9945]

thanks so much!!! this was fun

[@asifurrahman5436]

Such a clear understanding

[@avkumar1764]

Thank you bhaiya...i deployed my first project on github...thanku so much.

[@juanarguelles5032]

thanks brother it works perfectly for me

[@Akki8181]

Thanks... you are a good teacher

[@luisantonioparamoromero9512]

Bro, this is the best explication ever!!! I tried it and success at first try! Thank you bro, you are awesome! (Sorry for my english, i speak spanish)