How to Deploy React App to GitHub Pages
HTML-код
- Опубликовано: 7 фев 2025
- ★☆★ My Courses: telmoacademy.com/
★☆★ 1-on-1 Mentorship: calendly.com/t...
★☆★ SkillShare 2 Months FREE : skl.sh/2Q2LsTi
★☆★ Best Website Hosting:
partners.hostga...
★☆★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
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
I thought learning react was difficult but then I found that publishing it is more difficult thank you man!
yeah lol learning react is easy compared to this
lmao 😂
😅😅
So true...!
I've been programming for 20 years, and it always becomes more complicated instead of simpler. Pity.
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!!!!
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
Best tutorial... struggled whole night yesterday woke up this morning found and now my is deployed
I hope it helped you, make sure to press the like button :)
Thank you sir!!! Best video of explaining how to deploy react.js on github pages !!!!
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
Hey! How do you push changes from Master to Gh-pages branch?
@@makanmusty I have the same problem! Did you manage to make it work?
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.
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!
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. :)
amazing video! was struggling all day and had to keep deleting and recreating repositories, this vid helped a ton! Thanks Telmo, means a lot!!
Dude you should onestly receive an award for this video, very very useful
Thank you very much!
I was having trouble with it so I used "https" instead of "http". Then, it worked.
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.
Tried for two days and failure again and again. Then I found your video and my project is successfully deployed. Thank u man.
Thanks buddy,this was really helpful 🙌🏻,deployed my web app 😅in minutes
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.
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
Best tutorial. The start of my very first own portfolio. Thank you!
A bit thank you from my side. I have been stuck at this point for almost one night, finally, it is done.
Only guide that worked for me. You're a life savior.
Obrigado Tiago
Thank you bhaiya...i deployed my first project on github...thanku so much.
Best Tutorial for creating a react website using github pages!!! Thank you so much!
Enjoyed hearing the portuguese accent :)
Followed the instructions and now have my github webpage. Thanks!
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
Thank you so much :)
Telmo, thank u for your video, i was so simple to understand!!! it is already in my bookmarks video on pc!!!
Thanks a lot...successfully deployed my first react app to github
Came across many, but this one took my heart!
.
.
.
.
All I am saying is that it worked... thanks Telmo!
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
This was the easiest step-by-step and systematic method i found... Thank-you very much brother
Bro just saved my life u gained a subscriber
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!
thank you for sharing a free site to deploy react app. you are a helpful man.
Fantastic idea to write some parts of the text with a dark text on a dark background
THANKS ALOT! THE VIDEO REALLY HELPED ALOT AND I COULD SAVE A LOT OF TIME FOR MYSELF! NICE WORK! 🔥🔥🔥🔥🔥🔥🔥🔥
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!
На русском к сожалению, крайне мало актуальной информации по JS. Приходится переходить на английский)
@@dim3143 Всё так, пацаны
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?
same did you found out any solution
If u have a problem try
"deploy":"gh-pages -b master -d build "
Instead of the usual deploy script + thnx bro ❤
Thanks
Thanks a lot bro. This method worked actually. 🥺😭😭😭😭
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 ?
Thanks a lot. Keep it coming. Your content is easy for understanding!
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]"
I thought it's simple as deploying static webpages on GitHub , but now its more that that. Thank you✌✌
Thanks man. This was something new for me... Great tutorial
Thanks for the tutorial! I have a question: How do I make updates if I want to add/delete a new file/folder?
if you know how to update your repo tell me
Thanks Telmo, love having your videos to look back on now that your not my instructor anymore! :(
Alex I will miss you too!
got stuck from a udemy course then came here... thanks so much
thanks Telmo, since two days i have been straggling with this issue.
thanks Telmo. Finally know how to deploy
TE AMO, EL UNICO QUE ME FUNCIONÓ, 3 PUTOS DIAS MIRANDO TURORIALES Y TODOS ME DABA ERROR.
Thanks Telmo! Now I have my own personal webite.
Thank u sir for giving this class...its very helpful
Thank you!! This tutorial saved me :dd.
You're welcome!
:w
Just started learning React recently and this was very helpful. Thank you so much!
Thanks for the video, that was simple to deploy a project with your straightforward explanations)) thanks man!
best video on this topic!! thank you!
life saver, thanks
Hey no problem Dayan
Thank you, thank you, thank you!! This was almost a wasted evening until I found your video.
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
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
Waw thanks man!!! A hero without a cap
It worked!!! You're a lifesaver, thank you SO MUCH!!!! :D
Много часов мучений с гитхаб - репозиторием, чтобы мне за пару минут показали, как это сделать?) спасибо тебе, добрый человек)
English!
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
One question, you was pushing the project to the remote repository using: "git push -u origin master". What is "-u" mean?
Dude, you're awesome !!! Am an absolute fan of your work !! More power to you !!
Thanks for the detailed tutorial man. Hope this gets me the job...
You saved me. Thank you from Korea
I wanna cry. WHY IS THIS SO DIFFICULT. But thanks this helped me so much
Best tutorial, I tried others and I fucked up my projects, you are awesome man. Thanks. Subscribed
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.
I’ve been looking for this. Thank you
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
Switching places on "predeploy and "deploy" after the "start" worked for me as well. All though i did run deploy before pushing..
thank you @Telmo, this tutorial solved a lot of my deployment issues!
Thank you you just saved my computer from being thrown at a wall haha
This was of great help. Thank you so much
You are awesome. Thank you so much for sharing this information with us
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?
What a very helpful content. One thing tho, I want to ask why it shows Compare & pull request? Thanks!
Awesome explanation!!! Thank you😁
Thank you!
Very well explained, I just managed to run an instance of app I needed to go online.
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?
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 ;
Thanks, I was missing that part!
Thank you. I just got my first react app published on Github
Well done Phil :)
thank you, you were the only one who explained well and helped 😊😊
Thank you Telmo! Great.. even for rookies..
I did exactly as you instructed, and it is published all went well but I can't see anything when I go to the URL
Any suggestions might help me. Thank you.
I thought that deploying react app to git hub is more difficult. Thank you very much.
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
Thanks udini1
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.
Awesome video man. Was wondering how i can update my site if it has already been deployed.
i tried npm run deploy but it doesn't update my gh-pages
For beginners, also run "npm run build" to create build folder before running "npm run deploy".
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.
Only tutorial that worked out for me! thank you.
Thanks bro ,it is just so nice of you
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??
does it work with some kind of backend too like a database?
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?
did it work for you?
@@melissahuerta8315 Yeah doing that was fine.
Life Saver!!!!! The tutorial is so helpful!!! Thank you very much!!
Can you maybe do a video on how to update the page?
Thanks man worked flawlessly!
Please help me, im trying to deploy it remote but its loading just the navbar, not loading the body section?
Great video. Easiest explanation ever. Thank you!
awesome way of teaching .subscribed
It's 2022 and still works as intended.