How to deploy a React App to Github Pages and Netlify | React JS Tutorials for Beginners
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to deploy a React app to Github Pages and Netlify. In this React JS tutorial for beginners, you will learn how to build and deploy your React apps from a Github repository to either Github Pages or Netlify or both!
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a Learn React tutorial series playlist:
• React Tutorials
🔗 Repository to Deploy: github.com/gitdagray/react_us...
How to deploy a React App to Github Pages and Netlify | React JS Tutorials for Beginners
(00:00) Intro
(00:05) Welcome
(00:20) Overview
(00:31) How to deploy a React App to Netlify
(07:35) How to deploy a React App to GitHub Pages
(14:13) Which is better? Netlify or GitHub Pages?
❗ Remember to git add, commit and push the changes to your package.json file.
🔗 Get Started with Node, Express, and MongoDB:
• How to Build a REST AP...
and • Must Know REST API Sta...
🔗 Easy Peasy Redux:
easy-peasy.vercel.app/
🔗 Rules of Hooks:
reactjs.org/docs/hooks-rules....
🔗 Collections of Hooks:
nikgraf.github.io/react-hooks/
www.npmjs.com/package/react-use
🔗 Axios:
www.npmjs.com/package/axios
🔗 React Router:
reactrouter.com
🔗 JSON-Server:
www.npmjs.com/package/json-se...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
🔗 Styled Components: styled-components.com/
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about how to deploy a React app helpful? If so, please share. Let me know your thoughts in the comments.
#react #app #deploy - วิทยาศาสตร์และเทคโนโลยี
![NONT TANONT - ดอกไม้ที่รอฝน (spring) - Reimagined [Live Session]](http://i.ytimg.com/vi/nY2PsFZFEOg/mqdefault.jpg)
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: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
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! 🙏🙏🙏
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.
You're welcome! 💯
Thanks for this series Dave, its been great fun. Looking forward to learning about Node next!
You're welcome Blair 🙏💯
This video is the best one about deploying on github. Thanks so much!
Thanks so much Dave, you're a life saver. After so many attempts with different videos online, God bless❤❤❤❤❤
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!
Glad it helped!
Thanks again Dave! Your tutorials are always as clear as posible!
You're welcome! 💯
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
Such a great course! Thank you very much! So glad i found you!
Thank you! I'm glad I could help!
You have a great explaination Dave, especially when it comes to error handling. Glad I learnt React from you ❤TYSM
Glad you liked it!
Great overview on how to deploy on both sites and the diferences between them, thanks!
Glad I could help! 💯🙏
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.
Great job!
Very useful tutorial even in 2024. I really appreciate the time you took to explain all the basics of react. Thank you
Glad it was helpful!
Thank you sir, you made my work easier
Looking forward to learn more from you
Glad to hear that!
finally, I finish this react tutorial, it's amazing thank you so much for your effort, what next to do (advices to master reactJS)??
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.
🚀 You're a legend mate. Thanks for the great video 👏
You're welcome, Raj!
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.
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,
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! 😀
@@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.
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.
Very Nice
Thank you 🙏
Thankyou Dave
You're welcome!
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?
Thank you Very Much
You're welcome!
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.
Thank you for the request 🙏 I am planning some React projects to share 🚀
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, and correct! Hosts like Netlify will build the app when it deploys from GitHub. 🚀
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.
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! 💯
I got a page not found error is it cus of my backend?
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?
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! 🚀🙏
hey there dave! Love your course! Could you please help me out with deploying reactJs apps with json server in them?
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: th-cam.com/video/f2EqECiTBL8/w-d-xo.html
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?
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.
@@DaveGrayTeachesCode Thanks I'll take a look into that.
Do you have any tutorial about contentful and react? I'm trying to use it as a backend to store images for a website and I want my client to be able to edit those images.
I do not right now, but that's a request I'll remember for the future! 🚀
Thx
You're welcome! 🚀
how to change application name in netlify
How to set up a application for open source. So that users can create pr and ready to merge etc :(
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?
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.
It's showing 404 not found with hub
I followed every step but on the deployed website i dont see anything, the html just has
Something must be different. Look at my source code provided in the course resources.
mine shows just a blank page :( I'll keep trying
I am getting failed to install dependencies error on netlify
Help!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
please make redux thunk crash course
please make redux thunk crash course
Thank you for the request. 💯