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

Поділитися
Вставка

КОМЕНТАРІ • 71

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode  3 роки тому +4

    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: ua-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html

    • @ambiguity1768
      @ambiguity1768 Рік тому

      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
    @RawFatGod 2 роки тому +5

    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.

  • @umoruabdulazeez8438
    @umoruabdulazeez8438 2 місяці тому

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

  • @pgrAbhilash
    @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

  • @irandomgarbagei7432
    @irandomgarbagei7432 3 місяці тому

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

  • @ahmad-murery
    @ahmad-murery 3 роки тому +1

    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
      @DaveGrayTeachesCode  3 роки тому +1

      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
      @ahmad-murery 3 роки тому

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

  • @blue_berry_pie64
    @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!

  • @herberthipolito9941
    @herberthipolito9941 Рік тому

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

  • @honeybutter7074
    @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.

  • @RawFatGod
    @RawFatGod 2 роки тому +1

    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.

  • @luisdwq123
    @luisdwq123 2 роки тому

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

  • @blaircfleming
    @blaircfleming 3 роки тому

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

  • @vyahruthnetcherla4952
    @vyahruthnetcherla4952 Рік тому

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

  • @younow3353
    @younow3353 2 роки тому

    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
      @DaveGrayTeachesCode  2 роки тому +1

      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.

  • @kettlebellsandkickflips
    @kettlebellsandkickflips Рік тому +1

    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.

  • @ionikdev
    @ionikdev 2 роки тому

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

  • @gimtwi
    @gimtwi 3 роки тому

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

  • @Hashir-704
    @Hashir-704 24 дні тому

    more love and support for you sir!

  • @competencebooster5316
    @competencebooster5316 3 роки тому

    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
      @DaveGrayTeachesCode  3 роки тому

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

  • @harag9
    @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
      @DaveGrayTeachesCode  Рік тому +1

      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
      @harag9 Рік тому

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

  • @pedrofranciscodominguez832
    @pedrofranciscodominguez832 2 роки тому

    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
      @DaveGrayTeachesCode  2 роки тому +1

      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! 💯

  • @devstuff92
    @devstuff92 2 роки тому

    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
      @DaveGrayTeachesCode  2 роки тому +1

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

  • @jonathanschimpf
    @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?

  • @Myszko3321
    @Myszko3321 3 роки тому

    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
      @DaveGrayTeachesCode  3 роки тому

      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! 🚀🙏

  • @iabdul85
    @iabdul85 3 роки тому +2

    Very Nice

  • @Pranauv
    @Pranauv Рік тому

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

    • @DaveGrayTeachesCode
      @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: ua-cam.com/video/f2EqECiTBL8/v-deo.html

  • @rajnori.
    @rajnori. 2 роки тому

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

  • @maryambibi9687
    @maryambibi9687 Рік тому

    Thankyou Dave

  • @jittojoyes7533
    @jittojoyes7533 Рік тому

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

  • @christopherpink842
    @christopherpink842 2 роки тому

    Thank you Very Much

  • @ubitubee
    @ubitubee Рік тому

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

  • @vaishnavivlogs8017
    @vaishnavivlogs8017 Рік тому

    how to change application name in netlify

  • @Sajal_Dadsena
    @Sajal_Dadsena Рік тому

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

  • @eduardofranca181
    @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
      @DaveGrayTeachesCode  Рік тому +1

      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.

  • @enjohsophie
    @enjohsophie Рік тому

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

  • @tonytony-fc6gq
    @tonytony-fc6gq 2 роки тому

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

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 роки тому

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

  • @shivamgupta5085
    @shivamgupta5085 2 роки тому

    It's showing 404 not found with hub

  • @DeepakGupta-hj2dv
    @DeepakGupta-hj2dv 3 роки тому

    please make redux thunk crash course

  • @ballonura
    @ballonura 3 роки тому

    Thx

  • @DeepakGupta-hj2dv
    @DeepakGupta-hj2dv 3 роки тому

    please make redux thunk crash course