How to deploy a React App to Github Pages and Netlify | React JS Tutorials for Beginners

[@DaveGrayTeachesCode]

After building React apps for your portfolio, you need free and easy options for deploying those apps. In this final tutorial of the Learn React series, we walk through two free and easy options for deployment: Netlify and GitHub Pages. If you are just starting out with React, I suggest you start at the beginning of the Learn React series playlist here: kzbin.info/aero/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp

[@EventLoopHero]

Hello guys! After deployment, I can't refresh the page because of getting a 404 error. I can walk on my website but I can refresh the page only on the root page in other cases I get a 404 error after trying to make refresh it. I thought it was the problem with react-router, that I used old syntax but after rewriting the problem isn't disappear. Also, I checked my routes/index.js in the server directory and everything should be ok. I also thought this was a problem because of the deployment to Vercel, so I decided to deploy the server and the client separately on different servers, but the problem remained and did not help. Maybe I'm misunderstanding something and configuring it wrong. if someone can help me I will be so appreciated! 🙏🙏🙏

[@RawFatGod]

This was the best tutorial on this I could possibly find. I was really stuck on this and had to take a break for a while after being frustrated. Explained every single step slowly and well. Thank you.

[@DaveGrayTeachesCode]

You're welcome! 💯

[@herberthipolito9941]

This video is the best one about deploying on github. Thanks so much!

[@pgrAbhilash]

Vercel is also the best option to deploy application. Thanks Mr. Dave for this best react playlist, you touched every main topics nicely. Thanks once again

[@umoruabdulazeez8438]

Thanks so much Dave, you're a life saver. After so many attempts with different videos online, God bless❤❤❤❤❤

[@blue_berry_pie64]

many thanks to Dave!!! I have spent a lot of time try to deploy on Netlify and had to do this and that, but your way is very simple!

[@DaveGrayTeachesCode]

Glad it helped!

[@Hashir-704]

more love and support for you sir!

[@luisdwq123]

Great overview on how to deploy on both sites and the diferences between them, thanks!

[@DaveGrayTeachesCode]

Glad I could help! 💯🙏

[@blaircfleming]

Thanks for this series Dave, its been great fun. Looking forward to learning about Node next!

[@DaveGrayTeachesCode]

You're welcome Blair 🙏💯

[@irandomgarbagei7432]

Very useful tutorial even in 2024. I really appreciate the time you took to explain all the basics of react. Thank you

[@DaveGrayTeachesCode]

Glad it was helpful!

[@ahmad-murery]

another plus goes to Github for allowing customizable page address which may look more friendly than the Netlify one (and easier to remember) Thanks Dave, it was an awesome series indeed,

[@DaveGrayTeachesCode]

Ahmad, that is a great observation. GitHub Pages does allow you to customize the URL by choosing your repo name. Thank you for the kind words, and I hope you have been well! 😀

[@ahmad-murery]

@@DaveGrayTeachesCode Except for the lacking of electricity, the expensive living and the hot weather, other than that all is Ok 😁, looking forward for your next video.

[@kettlebellsandkickflips]

I kept getting a 254 build error for Netlify. The only thing I've found to fix it is to make a _redirect file with /* / index.html 200 in it. Another option running npm run build and making CI as an environment variable set to false when deploying.

[@gimtwi]

Such a great course! Thank you very much! So glad i found you!

[@DaveGrayTeachesCode]

Thank you! I'm glad I could help!

[@honeybutter7074]

Finally successfully completed full react learning course. Thank you so much this precious learning content. I finally have the confident to be able to understand the code of react projects. Again, thank you so much and great respect to you sir. Gonna do my own projects and practice more tutorials from channel.

[@DaveGrayTeachesCode]

Great job!

[@vyahruthnetcherla4952]

You have a great explaination Dave, especially when it comes to error handling. Glad I learnt React from you ❤TYSM

[@DaveGrayTeachesCode]

Glad you liked it!

[@RawFatGod]

If you get this error *Module not found: Error: Can't resolve 'web-vitals' in 'C:\Users\matt-\Desktop\OdinProject\shoppingCart ealshoppingcart\shoppingcart\src'* You must delete the files related to web-vitals in your src folder. Then it should work.

[@ionikdev]

Thank you sir, you made my work easier Looking forward to learn more from you

[@DaveGrayTeachesCode]

Glad to hear that!

[@younow3353]

finally, I finish this react tutorial, it's amazing thank you so much for your effort, what next to do (advices to master reactJS)??

[@DaveGrayTeachesCode]

I have published tutorials on all of the hooks that were not covered in this course. I suggest going through those next and building a few small projects with them.

[@jonathanschimpf]

This is great! If im already deployed on Netlify, but i would prefer the non random name for my project and much prefer the github name + repo name from gh, is there anything wrong with deploying to both at the same time from the same repo?

[@iabdul85]

Very Nice

[@DaveGrayTeachesCode]

Thank you 🙏

[@harag9]

Great series of lessons, many thanks for doing these. One question (well 2), do you have a tutorial on turning the react app into an app that can be uploaded to an android phone? If not, would you create one?

[@DaveGrayTeachesCode]

I don't have a tutorial for that yet.. but what you want is React Native. You can use it to create cross-platform apps for both Android and iOS.

[@harag9]

@@DaveGrayTeachesCode Thanks I'll take a look into that.

[@maryambibi9687]

Thankyou Dave

[@DaveGrayTeachesCode]

You're welcome!

[@rajnori.]

🚀 You're a legend mate. Thanks for the great video 👏

[@DaveGrayTeachesCode]

You're welcome, Raj!

[@pedrofranciscodominguez832]

Thanks man, the best tutorial so far in YT. Just one question, for the github-pages tutorial you recommend us to delete the web-vitals dependency, but when I did an error showed saying I needed it and I wasn't able to compile the project. Only after I installed it again I managed to publish. I'm really curious as to why this is the case and any insight about it would be helpful. Thanks again for the tutorial! I hope to see this channel grow.

[@DaveGrayTeachesCode]

It sounds like you left the import statement in your index.js file. Just guessing as it is hard for me to troubleshoot the code of viewers. Thanks for the kind words on the tutorial! 💯

[@louisminogue]

Hey Dave, sorry for unrelared comment, but i have a question - would you agree with a statement that you should learn React, or any other framework, when you first fully understand why was it made in the first place, and what problems it deals with compared to vanilla JS, and you came across this problems and sort of "made your own implementations same as a framework"? Or is learning a framework just a next step in learning front-end development? Should you first make those big projects in vanilla, which will come to basiclly making your own bad version of modern frameworks?

[@DaveGrayTeachesCode]

Very good and insightful question. 💯 I have heard it explained as you did. I believe it is important to learn Vanilla JS first to appreciate how much easier frameworks and libraries can make our jobs as devs. In addition, React leans towards declarative programming vs imperative. Most beginners progress from procedural to imperative and learning to use React helps us think more declaratively, too. It's all a learning and growing progress. Keep up the good work! 🚀🙏

[@competencebooster5316]

Thank you for the playlist. I would like to request you to make some big front-end react projects as you did in vanilla js. Because those big projects are very helpful to learn deeply.

[@DaveGrayTeachesCode]

Thank you for the request 🙏 I am planning some React projects to share 🚀

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

[@DaveGrayTeachesCode]

Thank you, and correct! Hosts like Netlify will build the app when it deploys from GitHub. 🚀

[@enjohsophie]

I got a page not found error is it cus of my backend?

[@Pranauv]

hey there dave! Love your course! Could you please help me out with deploying reactJs apps with json server in them?

[@DaveGrayTeachesCode]

JSON-Server can be deployed, but it is usually just used in a development environment. To build a REST API with Node.js, please check out the Node.js course on my channel: kzbin.info/www/bejne/nGOoonh5nrl1gpo

[@jittojoyes7533]

How to set up a application for open source. So that users can create pr and ready to merge etc :(

[@christopherpink842]

Thank you Very Much

[@DaveGrayTeachesCode]

You're welcome!

[@eduardofranca181]

When you deploy your app and access it using your browser, the host sends the full application to your browser, so you dont need to make any more requests to the host?

[@DaveGrayTeachesCode]

That depends. You might need to check for new data. Or a component that is not in use at first may request data when it is used.

[@vaishnavivlogs8017]

how to change application name in netlify

[@tonytony-fc6gq]

I followed every step but on the deployed website i dont see anything, the html just has

[@DaveGrayTeachesCode]

Something must be different. Look at my source code provided in the course resources.

[@shivamgupta5085]

It's showing 404 not found with hub

[@ubitubee]

mine shows just a blank page :( I'll keep trying

[@Sajal_Dadsena]

I am getting failed to install dependencies error on netlify Help!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@DeepakGupta-hj2dv]

please make redux thunk crash course

[@ballonura]

Thx

[@DaveGrayTeachesCode]

You're welcome! 🚀

[@DeepakGupta-hj2dv]

please make redux thunk crash course

[@DaveGrayTeachesCode]

Thank you for the request. 💯