Home » Film & Animation » How to deploy React App to Github Pages

How to deploy React App to Github Pages

Written By Esterling Accime on Friday, Oct 19, 2018 | 11:14 PM

 
Deploy your React application to Github Pages - FREE. This is a step by step video on how to deploy your React Apps to Github Pages. As long as you have a Gihub account, and a React app, you're ready to deploy it to Github Pages 🔔Don't forget to subscribe 🔔 https://www.youtube.com/c/EsterlingAccime?sub_confirmation=1 Cat app with React Hooks. In this video, I am going to build a cat app with React hooks. We'll utilize React useState, and useEffect throughout the video, and clearly explained the use of them. 🔔Don't forget to subscribe 🔔 https://www.youtube.com/c/EsterlingAccime?sub_confirmation=1 Interested in supporting this channel? Please use this link https://bit.ly/2Lfuf46 🤗Let's connect 🤗: 👉 LinkedIn: https://www.linkedin.com/in/esterling-accime-324a4181/ 👉Twitter: https://twitter.com/accimeesterlin 👉Facebook: https://www.facebook.com/accimeesterlin1 👉Instagram: https://www.instagram.com/accimeesterlin Other Related Videos (Email) : ✅ How to deploy a MERN Stack App to Heroku: https://youtu.be/5PaUiPyBDJY ✅ Enable automatic deployment to Heroku: https://youtu.be/y_7czmJXK_c ✅ How to get a FREE Domain: https://youtu.be/jwddTU8RM6o ✅ Connect MongoDB Atlas to your Heroku application: https://youtu.be/imR9LlbG3pU ✅ Deploy Angular app to AWS S3: https://youtu.be/CKJoNI4Ypxw ✅ How to deploy your Vuejs app to AWS S3 - FREE: https://youtu.be/TEPBWdfk1eo ✅ Deploy Reactjs to AWS S3: https://youtu.be/Kay-UvVCNFs ✅ How to run Heroku locally: https://youtu.be/Ue9b26817QA 🗣️Transcript 🗣️: what's up guys welcome to another react video and today we're going to be trying to learn or walk you guys through how you can deploy a react application to your github pages okay but before we go any further we are assuming that you have the Create React App if you don't have it make sure you can run this command this will allow you to run the create-react-app into your computer so we're gonna assume that you're on it that's gonna take a second of course all right guys let's say you've done everything you should be having something like this so maybe your project might be looking whatever your project might be looking but the bottom line is you should at least have a react application using the create-react-app okay so once you have an application like this we're gonna go ahead and open our terminal wherever your project is and it's a five-step process we're gonna walk you guys through okay the first thing that you need to do is we're gonna go ahead and do npm install a package that's gonna go and get all the packages and make sure that you guys are saving that as a dependency the first step is go ahead and store this package it's something called github-pages alright guys once you finish installing this process based on some of you guys it might take you longer or might not but the bottom line is you need to have this package in order for you to deploy your application to github pages all right the second step that you need to do is you need to head over github and we think you hope you're gonna go to this URL github slash knew what this kind of allow you to do is this gonna allow you to create a new repository or aka new repo over your get home I'm gonna call this one deploy react it doesn't matter what you name it but the bottom line is you need a repo in order for you to be able to host your code and for this itself to work alright once you have this repo this URL over here that you have you're gonna go ahead and copy over here you're gonna copy this URL once you copy this URL back to your terminal you're gonna run this command git remote add origin and right click and paste the URL that you copy okay once again the second step is very very basic you need to head out to github slash new and create a repo once you have that you're gonna copy this URL and add this repo over there all right the third step that you need to do is head over your package.json down here once you go over your package.json wherever next to the version or it doesn't matter where it is but the bottom line is it doesn't need to be inside a nested object it needs to be right at the top level and what we're gonna have down here is something that's called home page once we have the home page we're gonna paste it a URL in the UL that we're going to paste it is going to be this URL alright guys this is going to be the URL it's nothing fancy there are two things that you need to keep in mind here the first one which is going to be your github username okay this is going to be your github username if you don't ✍️Tags ✍️: github, github pages custom domain, github pages jekyll, github pages portfolio, github pages react, github pages blog, github pages website, github pages custom domain namecheap, github pages theme, github pages google domains, github pages tutorial, github pages add image, github pages angular deploy, github pages advanced, github pages best, github pages css, deploy html to github pages, how to deploy to github pages