How to deploy React App on AWS Amplify

hey everybody welcome back to code with Vinnie today I'll be showing you how to deploy your react application on AWS amplify it's actually a really straightforward process and uh pretty quick too so let's go ahead and get to it so the first thing we actually have to do is create a react app obviously so I just have an empty directory here and I'm just going to go ahead and run the command npx create react app and then a space with a DOT and so what this is going to do is say create uh use create react app to create a new react app in our current directory so I'm going to go ahead and run that and this will take a little bit so I'm just going to fast forward okay so it looks like we have successfully created our react app so what I'm going to go do now is Run npm start in the terminal and this will get our react app started okay so if we look here I can see that our react app is up and running so perfect okay so now that we have our react app created I'm just going to go ahead and create a GitHub repository so we can store our code inversion control that'll make things a lot easier for us in the future so let me go ahead and do that right now GitHub okay so I'm just going to create a new repository and I'll just call this amplify tutorial okay and we'll go ahead and create this Repository so I'm just going to take this line here and go back to our code okay and I'm just going to create a new terminal and we're going to go ahead and just paste that line right there this adds our repository as a remote and then from here I can just do git push origin master or main depending on what you have it set up as and we can see that we've successfully pushed our code to GitHub so if I go back to GitHub at this point and refresh you can see that our code is all here so perfect so now that we have our code successfully on GitHub we can actually go to AWS so as you can see I'm already logged in so I'm just going to go ahead and go to AWS amplify I'll go ahead and click on get started and amplify hosting and we're going to just pick uh whatever company we're using for Version Control in our case that's GitHub okay and just allow this okay so after you allowed its permission then you're just going to go ahead and select a repository so I'm going to click amplify tutorial because that's what I'm working on and you just select the branch in our case it's master so I'm just going to go ahead and hit next and this right here is basically the commands it's going to run when it's trying to build your application so before it actually runs the build command it's going to run npmci which will install all your dependencies and then run the build command which creates a production build and it will go ahead and deploy that so all this is fine we don't need to worry about that right now so I'm just going to go ahead and click next and save and deploy okay so you can see it is attempting to deploy our application to AWS amplify so a pretty straightforward process right now it's provisioning resources and then it's going to move to the build phase and then it will finally deploy so this will kind of let us know what's happening what stage we're in right now and also when the deployment is finished so we'll just go ahead and wait on that for a second okay so it actually looks like our build failed this is actually a good thing uh in case people run into this uh I can show you how to kind of fix it and how to debug this so I'll just click on the build icon and we can actually see the error message and see what the problem is okay so it says npmci can only install packages when your package Json and package lock are in sync please update your log file with npm install before continuing okay so typically the way I get around this is I will go to build settings and I will actually edit this script that I kind of showed you guys earlier instead of running npmci I'll just run npmi which is essentially npm install that was a command it suggested for us to fix this issue okay so you can see I updated this successfully so now that we're using the right pre-build command you want to just go back to build and essentially redeploy this version so as you can see it is starting another build hopefully we have some some success on this one uh typically that's the only issue I ever have ran into with amplify but like I said really easy fix and once I switch it to npm I I don't typically have issues after that so it shouldn't be too concerned okay so we can see that our build is actually complete so amplify gives us this domain here and if we click it let's open that in a new tab we can see our react app is successfully deployed to this URL you know you can send this to your friends and family and show them what you've built so the last thing I want to show you is when you're using amplify you get built-in continuous delivery which means your application is going to be deployed every time you push changes to the branch that we're watching in our case master so if I go back to our code real quick uh open the source file and just go to app and instead of learn react we'll go ahead and say okay so now that I've made a change I'm just going to go ahead and push this I'll just do get add dot okay commit okay and then I'm just going to push this margin master okay so now I successfully pushed my code to GitHub and because I pushed it to the master branch which should trigger a new build and amplify so let's go ahead and check to see if that's happening so if I just go back to here so we can see it's provisioning resources and it is building our application so that's one of the nice benefits is every time you push your code it's going to automatically redeploy there's nothing you have to worry about it will just be handled for you so that's a pretty nice feature okay so now that our build has successfully deployed again I'm just going to go ahead and go back to the same URL and just refresh the page and you can see Hello amplify successfully deployed our new changes so that's about it for this video hope you guys enjoyed it I'll see you in the next one

Channel: Code With Vini

Views: 21,011

Keywords:

Id: lHgxFfioaR4

Length: 7min 42sec (462 seconds)

Published: Mon Jun 12 2023