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.
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!
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.
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 ✅
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!
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 ❤❤
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.
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".
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.
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.
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!
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 😉
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?
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
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!
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.
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
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 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>
@@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
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
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?
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.
Thanks so much for this video Pedro! But I have an issue. The gh-pages branch doesn't show in my repository after npm run deploy and refresh the page. Only the main branch. Help!
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).
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
Hey Pedro, I got the project in a subfolder in my main github repo, how do I host that project? Is it by changing the option where it said "root" in your video?
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.
You're an amazing person. thank you for this. Been struggling for an entire afternoon.
Thank you very much! :D
THANK YOU SO MUCH 😭
🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵🥵
Thank you so much 😭😭😭❤️
As a self-taught developer it warms my heart to find someone that explains things so well. Thank you thank you thank you.
I AGREE!!! Tutorials r usually people giving the steps without any explanation as to why we’re doing it.
Man you saved my life. I created an application on React but was having hard time to deploy to github pages..u helped
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!
Thank you! I have been trying to deploy my app for hours. Your tutorial was the only one that worked for me. Thank you.
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!
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.
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 ✅
You are amazing. The way you explain is so clear and easy to follow. Thank you so much!
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!
I love you man :)) not only did you show us how to deploy but also explain some "aside" things and i like that
Thanks a lot! Best react course i've seen on youtube keep going!
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 ❤❤
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.
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".
I faced the same problem, and after following this tutorial, I still got a blank page... 🤣
@@liliyao317 did you find a solution to that ?
@@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.
worked for me ty
bro i just did it and i got the same white blank page. been at this the whole day@@dylaneamos
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.
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.
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!
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 😉
thank you , this helped so much
I've never used github pages before and this tutorial made it easier
Thank you so much! excelent tutorial, been looking for this everywhere!
thank you so much i was struggling with this for a while ! this is the easiest video to follow!
helped me done task on deadline, great video, straight to the point
Thanks, your tutorial is better than all i found in the internet
Obrigado, Pedro, pelo super tutorial. Estou aprendendo bastante contigo.
Forte abraco.
Thank you so much for the video. This helped me a lot. I didn't knew the script order was the issue.
Litteraly the best explanation i found so far! thank you so much
very clear and smooth explanation , thanks buddy!
Thank you so much! I finally got my pages after so many tries.
Great, thank you so much! It worked to me to deploy my first react-app!!
Thank you! It take me several tutorials to get it done.
Thank you for the video, it was easy to follow and I was able to get my page up with ease!
Really helpful video, you solved the problem for which i m struggling from last 1 month
Thank you man, that is an absolutely great tutorial, hard to find these days.
Loved it , very easy to understand. Thank you.
Thank you for the clear explanations! It worked perfectly!
I thank you for this tutorial. It helped me a lot to deploy React apps. 10 bows to you.
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?
Thank you so much, I spent all day and finally did it!
First tutorial that actually worked for me, I appreciate it
You made this so easy, thanks a lot
Graças a você consegui finalmente publicar o site. Muito obrigado Pedro.
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
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
muito bom, gosto do conteúdo dele
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!
Thank you very much. Your help was invaluable and I cannot thank you enough
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.
thank you man! that helped me a lot! keep postin
This is amazing!! If I make changes to the repo, do I run the deploy script again for the changes to reflect?
youre amazing bro. simple steps. Tysm
Very well explanied . Thanks a lot dude !!
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
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!
@@andresfelipecanobotero8814 Oh great! I was about to answer.
@@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>
@@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
@@trexon2360 thank you so much for this reply, I fixed the ENOENT error and now have the Published message at the end ❤❤
I spent three hours alone but thanks to this video I solved problem at once
Thank you very much
Here again after finishing my newest project, thank you again! 😂👏
THANKYOUUUUUUUU, HAD BEEN STRUGGLING A LOT FOR THIS
thanks for making this video, really helped me out
Very good and detailed explanation. Thank you
thank u so much .. i am in love with your teaching
Many thanks. Excellent tutorial
Perfect! everything is working just fine!
this helped me out a lot. many thanks!
Thanks a lot! This was so clear.
Thank you so much 😍 This was really helpful.
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
i have been searching for this for ages
Super helpful as always!
Thank you so much! Very helpful!
You saved my life, thank you for existing
Good that you mention that it takes a while after the page is actually visible in the address.
I appreciate...i love the part u talked about running "npm deploy" so many times.
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?
You are always a boss, following you from long back. ❤
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.
Thank you very much! It worked! 🎉❤
thanks so much very simple and easy language you explain ,search so many videos but this is best one thanks ...
Glad it helped!
After 15 min, my site is still not appearing on given link by the gh pages!...
you literally saved my day, thank you so much
You've earned yourself a subscriber sir !! you are amazing
Great tutorial! It's just awesome!
Thanks, very useful for beginners👍🏾
Thank you! I've been battling this issue for the WHOLE DAY - I'm such a noob D:
Thanks so much for this video Pedro! But I have an issue. The gh-pages branch doesn't show in my repository after npm run deploy and refresh the page. Only the main branch. Help!
Thanks. I really need this kind of videos!
Glad it was helpful!
thanks a lot man! This helped me a lot
Just a perfect video. Thanks homie.
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).
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
After adding url to package.json, images with relative source path don't load for local server. Is there a way around it?
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 👍"
that's what I was looking for thank you (dhanyawad)
man thank you very much it was really helpful
Thank you so much for this 😊
So how can I deploy other repository now? For example, I'm working on several projects, how to jump from one to another?
You are amazing.. So well explained.
Ure my age and honestly ure such an inspiration … keep going man i love your videos
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!
Thank you so much, brother! You earn a subscriber.
Very usefull video! Thx
where did you get the codes to enter in terminal?
This helpped more than the documentation
Hey Pedro, I got the project in a subfolder in my main github repo, how do I host that project? Is it by changing the option where it said "root" in your video?
This is really helpful for me as a beginner, thanks a lot bro
Anw, is it possible to modify the app after it is deployed?