Host your frontend site with AWS Amplify Console

hello and welcome back my name is michael leondo and this is another episode of focus auto solutions now today we're going to be talking about how aws amplify is making the traditional way that you would deploy your front end applications a thing of the past if that sounds interesting to you feel free to go ahead and like and subscribe video content can be found in the description below in case you want to skip ahead but without further ado let's get started [Music] all right so before we hop into the content i do want to go ahead and give us a quick little lesson on how things used to be done and if i'm being honest are still done today it's just that amplify makes things a lot simpler so in a lot of other architectures you can see something where the user would head to your site.com that would use a service known as route53 which is a dns provider of sorts to look up the certificate and then in addition kick things off once things got verified to cloudfront cloudfront is going to enable caching which makes the response times a lot faster based off of where they are and then it can reach out to s3 to grab the content for your website now that's all good except when it comes to updating your site you would likely want to integrate something like a git provider so here we have github that is hooked up to aws code pipeline via something like a web hook code pipeline is in charge of setting up various steps along the way one of those steps being aws code build which says hey build my application and kick off all of the artifacts so basically whatever comes out of that build directory to code deploy which then would update s3 by removing the content that was there and uploading the new content this is how things used to be done and as they used to just because now on modern web applications we really do want to go ahead and separate our front end from our back end and in that case something like aws amplified definitely comes in handy when we wanted to deploy it quickly and not have to worry about all these build steps because as you can imagine the more steps that we include that we have to touch well the more chances for error that we can introduce along the way let's take a look at aws amplify all right so i'm going to go ahead and kick things off by starting off a new front end application so i can do mpx create react app and then call this something like amplify sample i think that'll do just fine and this will go ahead and scaffold out a new application as you can see on the right hand side of the screen all right now i'm going to go ahead and cd into this directory and run it just to make sure that we have a working application this is going to open up a new tab in my browser and let's see what we get here localhost 3000 and sure enough we get a running application that i'm sure a lot of you have seen many times now that's not the exciting part of today we're actually going to go ahead and build this by doing npm run build and that's going to go ahead and create a build folder that we can see it gets generated right here inside of the amplify sample directory that we created perfect now that's pretty much all we're going to be doing from here i'm going to hop over to the amplify console and this is the aws amplify service that you may or may not have seen in before now if you haven't feel free to go ahead and just search amplify and you'll see that it's this very first service that pops up now feel free to read over the some of the content that they provided for us however at the very bottom we have two options for getting started either a full stack application or just hosting your front-end web app we're gonna go ahead and click on this option and you notice that we can deploy this from a lot of different get providers whether it be github bitbucket gitlab code commit and in our case we're not going to be using a git provider just yet so we'll go ahead and select deploy without git provider and it's given us the option to have a name here we can call this amplifysample environment this will be our dev environment and then we can deploy this from an s3 bucket drag and drop or some kind of other url now we already have this built on our machine so i'm going to go ahead and drag this over just like so and there we go this is taking our build folder that we just created and it's actually going to go ahead and upload it so that we can save and deploy this now the cool thing about this entire process is that not only do we get https instead of http which s3 would give us but it also sets us up on a cloud for distribution so that way we get cash in for free now this is saying that domain is already created just like that we have it all set and up and running so if i click on this you'll notice that we have our application set and ready to go super super cool now as far as domain management if you click on this little sidebar over here it'll open up a bunch of different options one of those being domain management and from here if you can go ahead and click on add a domain and any domains that you have purchased will show up right here all right so we're looking great but what about that whole get section every time i upload my code to github i wanted to go ahead and kick off a new build so let's take a look on how we can do just that i'm going to go ahead and take our code and open it up in vs code so that way we can make a quick little change and push it up to a new repository all right so i have our code opened up now let's go ahead and take a look at maybe make it a quick little edit so instead of learn react we'll say learn react with michael liendo i'll go ahead and save that and then from here i'm just going to go ahead and make a quick little commit and that commit will be something like um updated text how about that okay enter to commit that there we go and now i want to go ahead and push this up to a git repository but i don't have one set up just yet let's head over to github and configure one alright so on my repo i'm going to go ahead and type in amplify sample and then we can go ahead and not do any of these just click on create repository i'm going to grab this bottom section right here and head back over so that way we can upload this to github and paste that in so now that we have our repo set up and taken care of let's go ahead and connect this with amplify so back in the console i'm going to go ahead and create a brand new application just to show you what it looks like from scratch so host the web app this time we're using github continue and yes i do want to go ahead and authorize amplify put in my password and just like that it was taken care of now we called it amplify samples let's take a look here there it is main branch perfect and notice something really cool here it recognizes it as a react build so then it has all the necessary steps to go ahead and build it now i can of course edit this to my liking however that's looking pretty good for me so after clicking on next i can go ahead and review the settings and then save and deploy you can see auto detected settings will be used now once we have that all set up and ready to go it's letting us provision the app you can see that step just got taken care of it's building it now as a deploy step and then a verify now discussing amplify is a whole video on itself multiple videos in fact but you can do a lot of cool things just with the front end components such as connecting multiple branches again setting up domain management various build settings previews etc if you're using something like netlify or versailles this is pretty much aws's answer to what they have done already so we can go ahead and wait for this to get done building deploying and then we can check it out on the web all right it looks like it just got taken care of so i'm going to click on this main link here and there we go learn react with michael lendo is showing up and if i go back to my code and change something here we'll add a heart emoji just like so and then i can go ahead and save and commit this so we'll say updated with emoji and then push that up to github all right we got that taken care of now let's see what amplify is doing on its end back in the console you can see that updated with emoji has been triggered and it's going to provision and rebuild our application before deploying it to the web you

Channel: Focus Otter

Views: 416

Keywords: AWS Amplify, React, reactjs, cloudfront, github, code pipeline

Id: ucVK6Z55PZY

Length: 9min 9sec (549 seconds)

Published: Mon Apr 05 2021