How to Deploy React App to GitHub Pages

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

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

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

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

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

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

[@winnizhang1224]

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

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

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

[@ionutmarian1356]

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

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

[@pearlstar1427]

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

[@pood_49]

Thanks for the tutorial! I have a question: How do I make updates if I want to add/delete a new file/folder?

[@yashdev42]

if you know how to update your repo tell me

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

[@TacklessNebula3]

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

[@youtubesubscriberguy5196]

If u have a problem try "deploy":"gh-pages -b master -d build " Instead of the usual deploy script + thnx bro ❤

[@tomasz3727]

Thanks

[@stevendna8956]

Thanks a lot bro. This method worked actually. 🥺😭😭😭😭

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

[@andrywinmaquinto5387]

Best tutorial. The start of my very first own portfolio. Thank 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.

[@sukantadinda9130]

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

[@SaeThunder]

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

[@tiagogrimaldirossi7412]

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

[@Telmosampaio]

Obrigado Tiago

[@avkumar1764]

Thank you bhaiya...i deployed my first project on github...thanku 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.

[@shaneilkapadia4660]

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

[@tusharjaiswal9480]

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:Strin g) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException What to do?

[@mesamzardari]

same did you found out any solution

[@orewa9591]

Thank you so much, Btw, how to make changes to the deployed app ? Just change the code on local, and use npm run deploy again ? or should I use git add and commit first, and then git deploy ?

[@williamjog93]

After doing this process all of my images that I use on my project do not appear on the screen anymore when I run it locally (i.e "npm start"). It only works when I open the project through my githug page. Do you guys have any idea of what's causing this issue?

[@nicolindenau3349]

You need to import the pictures directly in your js files

[@Kayne1b]

This might be a dumb question, but if we want to edit the app after deploying to gh and update the github repo with the changes, do we just run 'npm run deploy' again?

[@melissahuerta8315]

did it work for you?

[@Kayne1b]

@@melissahuerta8315 Yeah doing that was fine.

[@JohriAnkesh]

I am getting below error. Please suggest. PS C:\Users\test\Desktop\UI Tool\my-app> git init 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

[@prasenpatil4201]

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

[@ShyamSundar055]

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

[@ejsmagic8011]

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

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

[@danielsladecek8258]

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

[@alezibezerra]

You're a livesaver. I has spent 2 hours on stackoverflow already and none of the posts halped me. I guess I'm too much of a newbie. Anyways, this worked perfectly. I just ran into a problem because "private:true" in my json file so git only showed a blank page but after i changed it to "private:false" it worked perfectly ;

[@VijoPlays]

Thanks, I was missing that part!

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

[@sahilimrosezahin4403]

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

[@Sapphiamur]

Thank you!! This tutorial saved me :dd.

[@Telmosampaio]

You're welcome!

[@lovelytingy]

:w

[@ДмитрийЮсов-н4ъ]

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 Всё так, пацаны

[@salahuddinhissam]

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

[@HiddenInformation10]

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

[@mythm2063]

10:59 hello please i got a porblem here, i don't get published messsage, inseatd i get Cloning into C:\User... can anyone help me please

[@saraa404]

adding "predeploy": "npm run build", "deploy": "gh-pages -d build", after "start" worked for me. Also.. running npm run deploy after pushing the code worked for me

[@bryansantamaria5412]

Switching places on "predeploy and "deploy" after the "start" worked for me as well. All though i did run deploy before pushing..

[@topeadebayo8863]

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

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

[@ajeyamadhavarao]

I have made a few changes to the app.js after I posted it on github. How do I update the same? Thank you and Great content

[@melissahuerta8315]

hello, did you find out? I want to know too.

[@shubhamcodes9030]

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

[@Migsfigs]

I'm.a bit confused with where/when to push. When you run git push to origin master, is that different than just running "git push"? Do we not run the latter bc it will push changes locally and cause a headache when running the deploy script? Do we ever even have to push to origin master?

[@SaifUlIslam-di5xv]

Does anyone know how to get a page up and running on the '/' level? It seems weird that I'm thrown a 404 there, but the app is actually there. just not a root '/' level.

[@Ttlwar]

maybe add a index.html as entry point

[@kryoleks]

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

[@kryoleks]

One question, you was pushing the project to the remote repository using: "git push -u origin master". What is "-u" mean?

[@lefty6258]

thanks Telmo. Finally know how to deploy

[@devricardonovais1294]

Excellent Telmo. Thanks! I have one question: In case I prefer to start my project using a template, how would I deal with the first command? I´ll make my guess, you tell me if I´m right: "$ npm init react-app [projectName] --template [templateRoute]"

[@Kayne1b]

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

[@leopolis91-d2i]

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

[@JD-hq1kn]

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

[@АннаПотреба-я2щ]

Много часов мучений с гитхаб - репозиторием, чтобы мне за пару минут показали, как это сделать?) спасибо тебе, добрый человек)

[@Telmosampaio]

English!

[@siddhantbhardwaj4268]

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

[@AldebaranCanacasco]

Best tutorial, I tried others and I fucked up my projects, you are awesome man. Thanks. Subscribed

[@kristijonasjurksas7088]

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

[@manasbansal7946]

best video on this topic!! thank you!

[@andrewsoseiagyemang3420]

I’ve been looking for this. Thank you

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

[@ninomuring6653]

What a very helpful content. One thing tho, I want to ask why it shows Compare & pull request? Thanks!

[@fedorevseev8867]

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

[@marniencueva9881]

Thanks Telmo! Now I have my own personal webite.

[@harshalsurwase2185]

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

[@mariyammajeed1754]

Hey after I make further changes to the code and website how can I push it again to the git and show on the hosted website

[@dayanr.5950]

life saver, thanks

[@Telmosampaio]

Hey no problem Dayan

[@manishshaw2393]

nice video ......will this way work if i am using making some api calls.. ...and please what are the pros and cons of this way over other ways ..thanks

[@quaidbergo]

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

[@jadynekena]

Waw thanks man!!! A hero without a cap

[@rashidk7223]

Hi man, thanks for this, just one thing, everything works fine but in the repo, none of my original react code is displayed fr example my componenst and stuff of how I build the page, just the a " static" htmlfolder, will it break the site if I pushed the code again so that it is the repo ?

[@Scapben]

Your original code is in the branch master Your uglified/optimized code is in the branch gh-pages Make sure to be in the good one, I took days to realize it :D

[@rashidk7223]

@@Scapben Thanks man!

[@Migsfigs]

Is this not designed for an app that you want to keep updating? Like once you run build, then you have the build folder in you main branch. How do you make changes to your app with the build folder in your project??

[@Lala-k4z]

You saved me. Thank you from Korea

[@yasmin-e]

Only tutorial that worked out for me! thank you.

[@alyssaderensy]

Hello, I'm trying to make a portfolio using a template. Locally, I have my portfolio appearing, but when I try to transfer it to Github, I only see the readme, any help?

[@meerashah5147]

Awesome tutorial.. qq, when I need to make updates to my project, can I just push updates to github and will it update automatically or would I need to "run deploy" again?

[@shanevasguitar1161]

you are a life saver! just one question, what if you want to update your project? do we have to make a new repository?

[@Telmosampaio]

Hi Shane, just do npm run deploy

[@shanevasguitar1161]

@@Telmosampaio Thank you very much!!

[@theboywonder2180]

@@Telmosampaio when trying to update my project, running npm run deploy doesn't work for me - I'm still unable to see the changes I pushed. Any idea what I'm doing wrong? I've been stuck on this for days.

[@neurofanaticyt157]

does it work with some kind of backend too like a database?

[@thulaninyama1608]

You made my deployment seamless, thanks

[@athena76308]

thank you, you were the only one who explained well and helped 😊😊

[@pjguitar15]

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

[@Telmosampaio]

Well done Phil :)

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

[@harshikerfuffle]

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

[@makanmusty]

great video, you actually helped me figure out how to get my image to work properly on my GH-pages, but how do you push new edits/changes to your live site?

[@alexissorianooo]

can you still edit your code after "npm run deploy" ? or should I only "npm run deploy" if I finished developed my react app?

[@alexanderfilippovich4757]

Wow! Telmo, now that's a piece of a one a lot convenient and usefull video! Thanks! I wonder if deploing the MERN project has the pretty same logic or it has any differences?

[@MeganRoberta89]

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

[@lifewithoutbigbrother355]

Awesome video man. Was wondering how i can update my site if it has already been deployed.

[@lifewithoutbigbrother355]

i tried npm run deploy but it doesn't update my gh-pages

[@yanlinghuang7002]

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

[@rahman5723]

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

[@SuperStar-hh1ul]

For beginners, also run "npm run build" to create build folder before running "npm run deploy".

[@mosalah5113]

What if you did "npm run deploy" first and didn't do "npm run build" as he didn't say do that first? So I didn't.

[@josemarques8666]

A partir de agora sempre que quisermos fazer um novo commit repetimos o processo a partir do "git status / git add ." certo? Obrigado pelo vídeo ajudou imenso.

[@Telmosampaio]

Sim e sempre a mesma coisa, e para fazer update ao website fazemos git deploy

[@MrTomski]

@@Telmosampaio Olá, Telmo. Então será só o 'npm run deploy' ou fazemos 'git add .' e depois é que fazemos 'npm run deploy'?

[@haruka3203]

So... How would you do "npm run deploy" on Github Desktop?

[@maciejjarmula]

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

[@EveryThingOnNow]

Please help me, im trying to deploy it remote but its loading just the navbar, not loading the body section?

[@doglezcode]

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

[@frankiejones8584]

Thanks Telmo! Very easy to follow as per usual!

[@Telmosampaio]

Thank you Frankie