AWS Amplify Admin UI Follow Along

hey this is andrew brown and what we're going to be doing here is building out an abus amplify application now if you're not familiar with this framework it is for building out uh rapidly mobile and front-end web applications for aws but the idea is that you don't need to know so much about the back end there's a lot of opinion opinions uh integrated into this framework that makes development a lot faster and easier for new beginners to aws now i did find uh having a bit of trouble using the abs amplify framework just because i'm not so familiar with the latest and greatest web frameworks and so the solution i have uh that i've built out here is going to be using playing javascript something you don't see a lot with amplify and so this is going to help us really understand uh at the base level what is it that we're working with and another thing is that i really want to utilize the amplify admin ui i do not want to write any back-end code and i want to make sure amplify is also hosting it so this is going to be as low code as i can go um with abus amplify so what we're going to be building out is the banana brigade app now i've already written the code and so when we get to the code part we will review it so this is really focused on provisioning the application and understanding uh the low code back end hookup to this and i have a fresh new aws account that we're going to use for that and i have also the application over here uh so yeah that will be what we'll be doing okay so let's just jump right into it and start setting up the back end low code solution in our aws account so we already have a front end so we don't have to worry about this for a while but here i am in aws this is the first screen you'll see when you log in and the way we're going to find that service is go to the top here to the search bar and type in amplify and so here we'll have amplify i'll go ahead and click that now i just want to clarify something because there can be a lot of confusion around the term amplify because it means more than one thing if we go back to the documentation you'll notice these four boxes here and that's because amplify can be the client-side libraries that are used to interact with database services they have a cli which is a way to provision new amplify apps or push pusher code or pull back end code then you have the amplify console that is a hosting solution which we're going to be using and then there's the new amplify admin ui which is the the big focus of this follow along here which is a low code back end so you don't have to know dynamodb cogniti and all that stuff you just press buttons and it works so hopefully that makes sense the distinguished distinction between these four if it doesn't it will as we proceed and so right now we are focused on the amplify console so that's where we are right now so we have this nice welcome screen and we have two options if we scroll all the way down the bottom we have create an app back end and host your web application and so these two options are a little bit uh worded clunky but what it means is that if you choose this option all you have is a back end and this one this one technically is just a front end but you can add a back end to it so we want a fully hosted solution both a front and a back end so this is the option we're going to choose um you might not be presented with the screen because this is only ever seen once and so what i'm going to recommend is we'll just go all the way the top here we're going to click that hamburger menu click all apps and then from here we'll just make it from here it's just a little bit more consistent so we'll click host web app and so the first option we have to provision the amplify console is we need to hook up our front end code which is here on github so what you're going to want to do is go ahead and fork this repo and you need to fork it so that when you connect to github you actually have something that you can pull from and this is a public repo so it shouldn't be too hard once you fork that come back here we're going to click on github we're going to go ahead and click on continue and uh you may experience a pop-up here to authenticate your github so you have to enter your your login credentials and once you are you'll get this nice little green green bar here and we'll go ahead and choose a repository so i'm going to go here choose banana brigade hit the refresh if you do not see it we will stick with the main branch we only have one branch we have this option called connecting a mono repo i think this is when you have um maybe there's like a folder within it yeah so let's say you you had multiple applications let's say you had like 10 applications and one application you want to deploy in a single github repository very common with service applications but this the main app sits at the root of this so we do not have to do that we'll go ahead and hit next and we will be presented with a build and test settings uh page here now um we don't we don't need to create one so in your base folder you're supposed to have a file i think it's like apps it's uh it's not absolutely ammo it's like amplify spec amplify yaml file um but we're gonna stick with the defaults here let's just look at what it does so the idea here is that it goes through phases and the first thing it's going to do is run ci ci is the same thing as saying install so npm install the next step it's going to run is mpn run build so we better have a build step in our application if we go over here actually i have a vs code so let's go over to vs code but if we open up our package.json notice that we have a build step here for our webpack so that's what it's going to try to run and we will go back to um our console here and then it's it's talking about artifacts so it's saying where uh where is the outputted files that we want to host and it's in that dist directory the disk directory so if we go back to the code notice that i have that here okay and then if we look here it says all files so basically it says everything within that distribution directory that's what we're going to upload for hosting and then it has cache paths i don't really understand that but i guess it's something for node and so i think that if we download that file the name of that file yeah it's amplify.yaml but you'll notice again that i don't have one in my repo but if you wanted to overwrite it you could put one in there and change all that information but i'm happy with the default we'll take a look here advanced settings so we can actually set a build image which is kind of cool but it seems a bit complicated to me and we can also set some environment variables that we might want to pass along i don't have anything to pass along here then we have live package update so override the default installed version of package tools this is not something that i want to do and we'll go ahead and hit next so we'll have our usual review screen i think everything looks fine here notice that it auto detected that it's using webpack we'll go ahead and hit save and deploy so now we'll just wait a little bit here and i'll see you back in a bit all right so now we are presented with the actual able samplify console but we're not ready just yet because if you notice here we have a front-end environment and a back-end environment and the front environment currently is provisioning so it's going to go through all these steps it's going to go provision build deploy and verify so what has happened here is that when we created a new amplify application what it actually did is it created a an s3 bucket it created a cloudfront uh cdn for us um and then it created also um an auto like a a probably a code pipeline so a pipeline to automatically deploy so every time every time we push to main um what it's going to do is automatically trigger uh this process here and automatically deploy our application and so that is the power of the able samplified console if you had to set all that up by yourself especially it's your first time probably could take one or two weeks but those resources are there now you can't see them so if i was to go to s3 right and see where that s3 static uh website hosting bucket is it's just we don't see it right so that is being managed by the amplify console so that is one of the trade-offs there so if you are used to having access to those um services and you like to configure them that's where amplify might you might uh not want to use the amplified console for uh but if you just want invest to take care of everything for you then that is a great choice uh there so there's that now this is going to take a little bit time and that's okay because we can keep busy while we're doing that and so what we're going to want to do is set up our backend environment now what i did and i made this mistake uh before is i went over here to admin ui and then i check boxed on this assuming that this would provision our backend but unfortunately that is not actually how it works um even though that's how i went about it what you actually have to do is go back to your app up here and what we're going to do is click on backend environments and scroll on down and hit get started and what this is going to do is is set up an amplify admin ui console for us so we'll hit get started and see now it's setting up something else so it's a bit interesting but the admin ui is separate from aws and you can set up separate credentials for people to log in but we're just going to have to wait for both of those to finish and so that takes a bit of time so i'll see you back when this is the admin ui is done and both the front end is done so here i want to show you something interesting uh my front end actually failed um this has never happened to me before so i think it's a great opportunity to see how we would actually debug something that's failed in our front end so here it went to the provision step so that went fine then went to build and then we had a failure and notice that these are clickable so what we'll do is go ahead and click on that and if you look down below i'm just showing the left-hand side that this is just down here in the history so if i go back up here if i wanted to get there as well i could just go down oh it actually appears when you click it okay that's interesting so we actually do have to click into there but notice that we have the steps provision build test deploy and this is where it failed so first it says cloning the repository that's grabbing it from github that is working no problem and then we have this front end code so remember that amplify yaml file that's what it's running here and so it's failing it's failing when it runs this webpack mode production and just scrolling through here i'm just going to take a quick glance and we're seeing something i'm not too sure what it is but a really easy way to find out is just simply to run that command locally right and that's something i didn't do so it's probably important that you test your build steps before you push them to production so i'm just going to flip back over here and this is my terminal and what i'm going to do is actually just run that command and see what happens so we'll do npn run um uh bill or sorry build that's what it's running and so that's what this is going to trigger webpack mode production and we might have to wait here just a little bit for this to error out so we'll just give it a moment here and while you're waiting if you have a banana go enjoy it there we go so here it says adamus exports does not exist uh in our source directory cannot resolve dot database exports in the source directory i know what this is okay so what we're gonna do is go back to vs code and i'm just opening up the index.js under our source directory here and what it's trying to do is load this dot database exports now this database exports file is used to communicate between the front end where the back end is now we don't have a back end yet uh so it's trying to find that file and it's airing out because that gets generated out by it with amplify and so what we're going to have to do is go ahead and comment that out that's going to be no good no bueno and uh then we'll also comment this out here and that should more or less fix it now this will probably air out because we have a lot of dependencies on amplify but the very least as long as the step builds we should be okay because we'll just deploy the front end see that it's broken provision the back and hook it up and then we'll be in good shape so let's just hope this builds here and it does so that's good some warnings no big deal there but that's all we need to make the application work and so what i'm going to do is go get add there and we'll say git commit hyphen m and we'll just say uh ignore uh aws exports for now okay i'm gonna go ahead and do a git push and so that will go ahead and push that and so that should trigger a new deploy right because if it's hooked up automatically it should just work so let's go see if it's actually doing that um so we'll go back to here and we'll go all the way to the top and notice it's provisioning so that is something that it does it's just automatic so again i'm going to wait until this is done and we'll see you back in a bit so this provisioning step does take a long time but i figured while we're waiting we might as well go register a domain because maybe we can hook that up in a later step so i'm going to go up here and just right-click and open new tab for the aws console and we'll make our way over to row 53. now this is totally optional you don't have to do it but i just thought it was fun to set up a domain here so we'll go over here i'm going to go ahead and go register new domain and i'm going to hit register and so i need something fun so it's called banana brigade banana brigade let's see if i can get that wow that's amazing so i'm going to go ahead and hit add to cart and what i'm going to do is i'm just going to pull that off screen here because i might have some sensitive credentials i don't want to share i'm going to hit continue yeah i just want to show you see i have to fill in all this information here okay so i'm just going to go ahead and fill this off screen and i'll have a domain registered here it should only take me a moment and while uh you're watching me you can you can watch the line okay i'm just filling out my address now okay i'm going to go ahead and continue whoops and so i won't show you the top part of this but when you register a new domain it asks you if you want to automatically renew um i don't know about that i'm going to say disabled for the time being i'm going to hit i have agreed here now we can say enabled sure why not i'm going to go ahead and complete that order and so you notice here it's just going to say you your order is being processed it might take a little bit of time uh yeah for your payment to be debited etc etc okay and then they talk about saying okay you have to wait a while and uh could take up to three days honestly it's usually the same day all right so it's just gonna send some stuff back uh forth and if this is all hooked up then we'll hook it up today if it's not well at least you saw how you could register a domain all right so it looks like our deploy is complete for our front end so we have the provision build deploy and verify step it's all good but let's just go take a look at some of the information that's here so under provision this is a provisioning the underlying infrastructure nothing very interesting there that's our build step we looked at this in our debug step this is running that amplify yaml file so in here you can see that it's running um the uh that uh the the build step um okay then there's a test phase we'd have to set this up manually but maybe we'd want to write some test code to make sure our app's running before it deploys we have the deploy step and because it's using static s through website hosting all really has to do is copy the files into that bucket and again we don't have access that bucket i just know that it's happening and then we have a verify step which is cool it actually renders out your home page in a variety of screens so you can visually confirm that it's working so that's pretty cool and if we scroll all the way the top here notice um that we have our domain so if we go ahead and right click there here we can see that our app is looks like it's working it's not hooked up to a back end yet but it visually works so that's pretty cool and so now what we're ready to do is go ahead and um uh set up our back end so what i want you to do is go to the top left corner here click on banana brigade and the way we access it is through this back-end environments now what i would have done and this is what i had originally done is i went to the admin ui management i would create a user uh and then i found out like that was the wrong way to do it okay the way you're gonna get into it and you could do it this way later on but the the easiest way is just go to this back environment tab and then look for this big orange button and go ahead and click that button that's what you want to do all right uh and so we'll go ahead and press that and that's going to open up the admin ui console which is a totally different ui from the ibus amplify console it's a sub service of amplify console and on the left hand side this is all the stuff that we can set up now most of these are kind of placeholders if you click into them it's just kind of like curl commands there's not a lot here but what uh is really powerful and what we are going to use today is authentication and data and probably content and user management so we are going to need data for our application and so we're going to have to set up a data model uh that's just a fancy way of saying let's set up the tables and what about samplify uses in the back is actually from the admin ui is using dynamodb which goes through appsync and that's how it works so what we'll do is we'll go ahead and create ourselves a new model and actually i don't remember exactly all my instructions but luckily luckily i wrote them all down here so i just can't remember what i want for my columns so we'll just scroll on down here and so we need a vector a cognito uuid and you know what there's a step missing there it's supposed to have nope that's actually all of them so what we'll do is we'll go back here and we'll drop this down and notice that we have three options so we have add model addy num and add custom type and so add model is when you have a table and it has to have an id all right and if you have a custom type it's the exact same thing it just doesn't have an id that's the only difference between these two so if you want to have an id or you have to have an id choose model if you don't want to have an id and you want to do full custom choose custom type uh so we definitely want an id there's also enum uh enum like it's stands for enumerable and just means like a bunch of variable values like this this could be like fruit uh banana apple okay um how use that what you use that for i don't know but i just know what it is and so i just kind of wanted to tell you a little bit about that but we're going to set up our banana and we're going to name it banana because um if we name it bananas then uh later on when we use it it's going to it's going to there's going to be like a button in the content that says add bananas and that doesn't make any sense so we make sure that it's singular i'm going to use the title case it doesn't matter you can make it lower case if you want but i'm just used to doing that when working with dynamodb tables at least for the the um table name and so what we want is a cognito uuid that is going to store the unique identifier for the cognito user and then we we're going to have a vector here and the vector here is going to be um about json and now notice that when you click this column we have a few options here like is required is array so i'm going to say that this one is required and this one is required so if those are not provided it will not create that stuff there and i think that yeah notice when i check boxes on it gives it an exclamation mark and when i check box it off that's how we know all right so those are the values we're going to need careful you don't press is array but this is just it gets passed as a string but it's going to store a json object which is going to be our x our y and our z value to say where our banana is going to appear on the screen now we want our data to be authenticated um meaning like someone logs in and that's the only way they can access the data we don't have that option just yet because we have to create a cognitive pool but we need to create one or the other first so um we have to do a couple steps here so we'll go ahead and save and deploy i'm going to go ahead and hit deploy now notice when we're deploying if you look in the top right corner i don't know why they put it here but that's where it is this is where we can monitor our deploy and all this is running is cloud formation templates so i'm just going to go back over here to the a different database tab opening tab i just want to show you you can see it over here as well so we'll go over to cloudformation type cloudformation the top click here and uh we will go and click into here sometimes it's more fun to watch over here depends up to you and these are the resources it's going to provision we can see what it's doing so it's setting up a deployment bucket an s3 it's setting up a role an on-not role an auth roll uh then there's something called an api banana brigade is that a nested stack it is so we can click into this one something for us to do so we might as well look at this while we're deploying and so that's the nested stack here what is this deploying we go to resources here this is setting up um this is datastore this is our dynamodb table then you have graphql that's part of appsync then you have your api key you have your schema and you have your data source and so these i believe that we'll actually be able to access now we don't again the front end abus amplify console we don't see the s3 bucket we don't see the uh cloudfront distribution but for these we actually can see them and we'll just give this a refresh here and we can see that they're created and we're going to wait a little while on this one but while this is going let's go over and take a look at our dynamodb table so we could click here to get to it but what i'm going to do is make another tab and i'm going to go to the top here and just type in dynamodb so i just want to show you how to get there on your own and this looks like the old layout i don't know why i don't have the new one usually it says hey do you want to use the new layout maybe people didn't like it they reverted it back we'll go into tables here yeah this is the old one where's the new one oh here it is try the preview of the new console it's going to be the future you're going to be watching this video and i want to make sure you're seeing the new latest one so on the left hand side we're going to go to tables and here we have two tables we have this data store table and then we have this banana table that's our actual model here i'm going to go click into this one and there's no data here yet so we don't know what these items are going to look like until we start inserting them go back to the table and there's a banana table again we won't say anything in here but it's good just to know that these things are around so let's go back to cloudformation is this done yet still going it's that schema takes forever uh and while we're waiting let's go take a look at the amplify or the appsync so the top here we'll type in appsync and here it is banana brigade staging we could run queries here if we like check out the schema so here's our actual schema notice that there's that exclamation mark that's because when we uh wrote that in the admin ui that's it translated over to this and so i assume that exclamation means required i don't know i'm not an expert in appsync just yet and you'll notice that we have those enums so there's an enum there of some sort i know you didn't make it but it just set that there for you um and so there's a bunch of stuff in here we have our data sources this is how appsync knows what dynamodb to hook up to so that's why they're in there functions would be for custom data so you know how in the amplify admin ui there's functions those are going to get hooked up through here through that um through that there in um where'd it go over here in the functions uh queries we can run any kind of query we want notice that it already created some pre-designed ones for us here so that's uh that's very nice of them so we can click that and hit run and it's going to try to return data we don't have any data right now so there's nothing for it to do um but again you know this is just a simplification so you don't have to deal with this stuff right uh but let's go back to cloudformation i like to click stack info this is update so this is all done if i go back uh we'll close out the app sync one it's getting a bit confusing here we'll lose dynamodb open and it's done sometimes sometimes this will say that it's still going and then clock formation says it's it's done but anyway now that we have that we want the cognito user pool so i'm going to go over here to authentication and we're going to make some choices here so by default it's going to expect you to have an email um we can choose our login mechanism so we got facebook google amazon your phone number uh notice we don't have github we don't have twitter we don't have linkedin this is all based on cognito it's not advice's faults um these other companies aren't following the standard for um off zero or not off zero that's another brand um uh oauth oh sorry and so uh you know it's like from a security perspective if they're not compliant with 100 we can't have those mechanisms you can code them in yourself it's a lot of work uh there are no examples on the internet but i just want to tell you why it is you can add mfa which is kind of nice and then we can configure sign up so we and we are going to so we are going to just need a nickname that's where we're going to store our hash node notice that it's going to require an email that is our main way of logging in and we're going to get down to password here and i just want to make it really easy this is not a critical app so i'm just going to checkbox all this stuff i'm going to switch this over to email because i think that's more cost effective i think sms it's all cheap but i think that email is like like free up to a point and sms i always think that it costs pennies so i just even it's pennies i just don't want to pay for it okay so what we're going to do is go ahead and hit save and deploy hit confirm deploy and again up to the top right corner that's where it is and it's just running cloud formation so while we're waiting let's go take a look and make our way over to cloudformation i'll give it a refresh here uh we should see a stack maybe click back on stacks here here it is down below so it's not creating a new stack while it is creating new resources but it's updating an existing one so it didn't make a new one it just updated an existing one so if we go over here we can go see now what it's adding so it is adding um iom roll and then we have some new nested cloth formation stacks right the reason it's going to update the original one is because it needs to tell dynamodb to if if we want to use it with um cognito to authenticate that's what it's doing so we can take a look at these nested stacks here there's one there looks like there's two but we'll click into this one um and this is the authentication stuff so this should be setting up yeah the user pool for cognito and the the name stretched out here like crazy so we got the user pool user pool client things like that the i am roll let's go take a look at cognito while we're waiting so i'm going to go and type incognito and amazon cognito is where we do all our authentication uh it's weird they don't this is one of the few services where they don't have a hamburger menu they always have these two buttons and so what we want is user pools and then notice that we have banana brigade and then the back-end manager i don't know what the back-end manager is um i guess it's for admins probably um i've actually never looked at this one but the um brigade one this is for users notice it requires a nickname and an email and we have a lot of options here could you go around and fiddle with the values here and would amplify respect it probably but you got to be careful because um you know with these kind of things they can get out of state and then you have a lot of problems so always try to just focus on whatever you have in here and not fiddle with the resources underneath but here we could add our users um we can see the attributes notice that it's with email and phone number it could have been with username but it's with email and we have a lot of options here right notice the checkbox on the nickname um and we'll go back to cloudformation just to see when this is done here and it's still updating oh updated complete cleanup in progress so that's one done just waiting for this other one here and again we could just sit here and watch it here um like there is a bit of delay between the two there we go so this one's now done it's all done we're just waiting for it amplified to refresh the page it's trying to figure out what to do there we go so now we have um that all set up and now we got to go back to data and then we can drop down cognitive user pool and type in change i know it's not really fun it's a lot of waiting right and then once we do that we now have to hit save and deploy it hasn't done anything yet we gotta hit save and deploy and then we have to hit deploy again i don't know why they have a double confirmation but uh i guess it doesn't hurt when i first did this the first time i like i got i just was sitting there i thought it was deploying the first time but it wasn't i had to hit save and deploy and deploy again and again we can make our way back over to cloudformation give it a refresh uh does it not need confirmation for this one there there we go yep it's updating it um and then we go to resources we can see what it's changing oh is it already done nope down here so it is updating this sub stack here we can go into the resources here and it is updating our graphql schema probably because we need authentication for that aim i'm not sure exactly what it's changing we could go check it out see if there's anything interesting over to appsync but you know i encourage you to even if you like you're not comfortable database just to explore these services and just view them from afar so you kind of get familiar with them and so i think what it did was it added this here right because this wasn't here before this top line i notice there's um [Music] i think it's just this is the major change we were seeing here so we will go back here uh and we will see this if this is done yet this might take a bit of time so what i'm going to do is just close these out here simplify this stuff and um i'll just do the dynomo db1 open here and i'll see you back when this is done deploying all right welcome back uh didn't have to wait too long there and our everything is done deploying just double check by clicking up here in the top right corner and now we have two things open to us we can create content right and we can add users so let's go ahead and create a user here and i'm just going to go add myself here i'm gonna make my password testing one two three i'm gonna hit create and that's fine it thinks there's a breach there's no breach it's just because i made the password testing one two three of course that's not secure and so notice that it says a force change password meaning the next time it wants me to reset my password but for our application i don't think it's required because we didn't enforce that we also have groups here i'm not pragmatically using groups in any way but i mean if you wanted to subdivide your users you could have like free users here and maybe you could have paid users right i wonder if you can move them over there no so i think it pragmatically would have to write in the code to do that you could delete suspend reactivate reset their password reset password probably come in handy uh but you know if you were to go over again over to cognito we can see them over there as well user pools we'll go to banana brigade user groups and notice there's that record there it's the same things you could do it over from here it's just that it's nice when it's all unified right there's a few other options like enable sms mfa and stuff like that but again it's pretty much the same then we can also add content for this user so we can go ahead and um there should be an add button we just gotta wait for it to load i'll go ahead create banana and here we're gonna enter two values in so this we need this person's sub that's what they call it if i click into here it's the sub id if i go back up to our content just give it a second to load we'll hit create banana i'll paste that in this takes a vector so i'm just going to say x is one y is one z is one there we go and so let's take a look at what that looks like now in dynamodb so what we'll do is go back over here and we already have our tab open i'm kind of curious about this other table i never looked at it before if we go here here it says banana so it looks like there's a single item cognito id versioning so i think this holds like the versioning of stuff because in when you're using datastore and we haven't talked about datastore yet but when you're using datastore with the amplify console for amplify in general the data is immutable so it never deletes your old data it always has the older records here um and so i think that's what the data store is now going over here i think this is where we see our pure records so here we can see the id um that it auto generated looks just like a random uuid the type it's a banana version one we can see the cognito user id and there's our data there so as we update records i believe the old records go into here this version will update to two so they're always there and we'll just go ahead and close that now this isn't going to be very useful for us so we'll go ahead and just delete these items and we'll go ahead and delete this user because i want to sign up for the first time myself all right and so our front end's deployed but our back-end code it doesn't know how to communicate with our back end and so that's our next step so what we'll do is first getting working your local developer environment and then we'll figure out how to do it in production here on on the deployed to aws so what i'm going to do is go back to my terminal here and you should clone this repo it'd be like get clone right you clone it and go grab that link there and once you have it you'll need just to do an npm install and then once you've done an npm install to run the app locally you're just going to run npm [Music] start all right and so i'm just going to start a new video here just do a hard break here and then we'll we'll uh go into uh the the uh the the code here okay all right so we're back here and again all i did was run npm install right and then an npm start in my code base here and i'm just going to flip over to my code base and i just want to show you where those commands are coming from if you go to package.json and you scroll on down here we have these scripts and so here's our build step here's our start so when we ran npm start it ran this line here which is for webpack and when we run anything but start this is an npm thing but if you run npm start if you run any kind of other script it's always npm run build npm etc why they do this i don't know but that's just what it is i think you can also write npm run start and it will work um but yeah that's how we're going to start up our application and so if we just go back to our terminal here it should start on localhost 8080. so let's go back to our browser here and let's pull that up so here's our application looks like it's in all good working order let's go ahead and hit login we have a login screen but i'm going to tell you right away this doesn't work it looks like it's working but i know it's not uh so if i just open up inspector here if you're wondering how i do that i just right click inspect and let's see if i have any errors i'll go to console here notice at the top author amplify has not been configured correctly right so yeah i know it looks like it's working but it's not so it's because we don't have that communication between the two and the way we do that is through that ava's exports file so what we'll do is go back to vs code and i want you to go to the index.js i know this is a bit hard to see i'm just going to collapse my distribution directory here but notice we have a source directory if you uh look at um webpack this is the thing that's running it so uh i'm just going to step you through here so we have webpack right down here webpack serve that's going to start a development server and that's going to load this file here and what this file does is it's going to need an entry point which is source.index.js which is over here right so this is the first file it reads and what it's going to do is take this file read it and then it's going to export it out as main.js when we run our um npm run build it's going to dump it into here um and so that's pretty much it then we have some stuff down here this is for loading files so assets this is for rendering style sheets this is for loading modern javascript okay and we'll go over here to index.js and notice here that we have we're importing amplify now this is something that can be a bit confusing but when you read about amplify and i'm going to pull it up over here the actual documentation the tutorial if i can um one thing that i find a bit confusing and i would say confusing but when they show you how to set up um in your back end if i can even find it here the import statement notice that they're using import database amplify uh and so i'm not doing that i'm doing aws amplify hyphen core the reason i'm doing that is because it's amplify has a lot of libraries in it i'm going to go over to github and we're typing amplify here amplify js we want the client side javascript but it actually contains a bunch of different packages okay these are all the different types of packages here right and so when you do um an amplify when you do this you're importing all the stuff even if you're not using it right and so if you want to keep things lightweight and easy to manage what you should do is import only what you need and so all we're working with is datastore and authentication that's the only two libraries we're working with but in order to use those we need the core library because the core has some things configured in it and this isn't in the documentation at least right now uh and they'll show you how to load individual ones but they don't they just kind of neglect to tell you to load the core in and so that's what you need to do you gotta load in the core all right and so once we load the core uh we have this command called amplify configure and amplify configure allows us to configure our our applications and i think if we just pull up the docs we'll try here again just pulling up the uh docs here just type amplify configure i'm not sure if it'll show us here um no it's always kind of hard to find the docs but that file contains all the configuration that we need to communicate that stuff but you're going to notice that we don't have that file so i'm just going to do that so how can we get all that configuration data well we can go back to the admin ui and we can just download that file so if i just click here in the top right corner no matter what this says up here no matter where you are just click on the top right corner and you'll pull the latest changes all right so and if you click this tab there's nothing here it doesn't matter these tabs don't matter what you're focused on is this up here okay and we'll hit copy and i'm gonna go back to my terminal and i'm going to go ahead i'm going to stop my server here type clear so we can see what we're doing and i'm just going to paste that in there we're going to amplify pull so now we're using the amplify cli and i didn't show you how to install the amplify cli that's something you'll have to figure out on your own um it's in the beginning of this tutorial here if we go back to this it's like the first thing they show you how to do um prerequisites here you're just doing this npm install hyphen g if you do that and you do your configure step then you'll be in good shape i feel kind of bad because uh this step is a little bit hard uh you you amplify cons configuring you have to set up an admin item user so we kind of glossed over that so i'm sorry about that but uh we can't go back and so what this is doing is it's just scanning for plug-ins it's trying to assess what's here there's nothing in our app so it's it's uh not gonna do much i'm just waiting for this to complete um while we're waiting we'll just see if it actually generates anything out here so if we go into here we now have an amplified directory and has back end which is interesting because i'm not pulling any backend right now um so i don't think anything will show up here i just think it's just provisioning an empty repository there we go so it goes back over here um are you sure you want to log in to the amplify cli yes because it has to authenticate us it just has to say okay you're pulling from this and we trust who you are and we have a bit of a complaint here fail to pull the back end and valid feature flag the featured flags are defined in the amplify cli json file configures are unknown to the current running amplify cli this issue likely happens when the project has been pushed with a new reversion cli maybe so maybe my cli is out of date also um this is a new account so i probably do have to set up that imuser so we'll update the cli first maybe we'll just install a cli here it's a good example to do that so i'm just going to do a hard break here on the video and i guess we are going to do that stuff i said i didn't do let's do that all right so welcome back um and so our aimless amplified cli is out of date there's a few different ways to install the amplify cli um and you can install it as a package you can install it as a node like a system package like if you're using ubuntu or etc or you can install it as a node package and depending on how you install it can be hard to get out so i really strongly recommend if you're going to do it the easiest way it doesn't matter if you see it another way be very careful about this but just do the um do the npm one so you have like see how we have mac you can that's a system installed that is not a npm i don't believe and then you have the windows one and i'm on a windows machine i'm using the windows subsystem linux so i'm actually technically running linux but i'm going to tell you right now it's the easiest way to use npm don't bother with these other ones and so i'm going to go ahead and go grab npm amplify click and i may already have this installed in some form so i don't know if this will hold on before i do that i'm just going to see if i actually have it first i'm going to type in amplify version so i do have it installed and there's an update okay great so it's it is installed by the um the npm install here so i can just run the same command i just did here apparently that will do an update and they they update frequently as you can see they're already on version four and so we'll go do that but i think we will have to do an amplify configure because we don't actually have a user in this account in this because it's a new adwords account i created so we will have to follow through the steps here down below and yeah amplify does take a little bit of time to install i do have some of these packages already pre-installed but like there's a lot of stuff so this is pretty normal to wait quite a while okay so i think i might just stop the video here because i don't want you to have to watch me install things for 100 years and i'll see you back in a little bit okay all right so after a very long wait i believe that our amplify console is up to date or cli it's something you really have to do quite often so it's not that unusual for that to happen so we'll do a hyphen knife inversion and make sure that we're on the latest here anytime once else the version oh it's initializing the new amplify cli version okay all right great so 4.442 that is definitely the latest um as it told us before and so if you type in amplify it actually shows you all the commands that we can have here and so we have a lot here what happened to me is i actually tried to do an amplify init it might even suggest us to do that but that's not what we want to do if we want to have a low code solution where we don't have to deal with the back end we do not need to initialize an application but we do need to pull the other side of it now we'll give it a go i still think we need a user but maybe we don't go back here and do a pull and we'll see what happens make it the same error or it might just pull it down and tell us complain that we don't have a back end we'll see yeah just i just can't remember if we have to do this step here just creating a user and all that stuff oh continue in browser to log in so we have to click this link here just to verify who we are um just copy that best i can we'll go back oh it's already open for us great i just hit yes we are now authenticated we will go back to here and it's going to choose us some options so we are using visual studio code so that's what i'm going to choose um it's it's easy if you're not using vs code it's fine we're using regular javascript today we are not using a javascript framework so it's none our source directory that's what we're using as our default so that's good we're using the default distribution directory um our build command is npm run build so that's correct our start command is npm start interesting that says run script i don't know what that means but npm start is the one we're using give it a moment here and so this this is where this confusion okay successfully generated out the models do you plan on modifying this back end what it's saying is are you using the admin ui right and if you are then you don't need a backend or do you want to make manual changes to your backend via code that's not something we want to do so we're going to say no okay because this will start pulling pulling back-end code and that's totally not what we want to do okay and so now when it's done if we go back to vs code i believe we should have our database exports file now under amplify there's nothing there right if we pull the back end we would have stuff under there which is fine in our source directory we should see something in here i don't know if we need to do a refresh here what i'm going to do is i'm just going to go ahead and close that out there and i'm just going to now type in um code period i just don't trust that my ui is up to date there so i'm just going to restart it that way since i'm using wls1 i'm pretty sure i'm using tube that's fine so there we go so notice that it didn't take effect right away that amplify folder is gone but notice that we have that abs export js and so this is what's telling our front-end application what resources to look at this is what it is so if you notice these things here these are actually like the ids and stuff so see we have the identity pool there didn't even know it did an identity pool but we have let's take a look at the user pool here okay so what we'll do is we will just make this a bit smaller put this off screen for a bit and i'm just going to uh go back here i just kind of want to show you how these things link up okay so if we go back and we just type aws amazon.com i'm going to sign into my console here and so this one is for the user pool go to cognito manage user pools the back end here notice the pool id is that i think they should match right so look at that 1 3 u l b 1 3 ulb so that's how it knows all right that's the connection to it and then this stuff needs to get configured into amplify so i'm going to just increase that here and in our index.js it's going to import those exports and then we're going to pass that in the config and that's going to populate the amplify cli so anywhere that we now use amplify for any of the sub services it's that's how it's going to know where those references are okay um so now that we have that hooked up our application should work like locally at least so what i'm going to do is go back here to my terminal and i'm just going to type in clear and i'm going to type in npm start and start up the application locally again and now it started on localhost 8080 and so we will go back to here and we have this one on localhost 88 i'll hit refresh and so we're going to do is right click inspect and we're going to see if we have any errors that's something that you should always try to check we'll go to console if you don't see consoles there might be like a what's new tab you might have to click to the right here but we'll scroll the way the top we have a 404 on the site webmaster web manifest that's fine but we're not having any real amplify errors i see 404 codes um these are the source maps these are like if you included those and you needed to read the javascript but we don't care about those these are all superficial errors are warnings there are really no errors okay so that means our app should work so what i'm gonna do let's go ahead and use it says sign up or log in to add your banana to the banned board how to use we can look up here how it works but i'm going to go ahead and hit sign up and so i'm going to put my email in so android exam pro.co i'm going to put in a secret password okay now i'll just put my standard one in because i can always go change it later via the admin panel and i'm going to put in my my hash node name that's one of the requirements here actually i guess i don't have it as a hard requirement which probably isn't a great thing but mine is i think it binds i am cloud and i got to put the at sign here there's me so i'm going to grab my name there i'm going to go back paste that in i'm going to go hit sign up and so it's warning because i used a very weak password that's totally fine and so that should i mean it didn't move the sign up maybe that's a minor bug on my part let's just go see here console um no i guess i'd have to do a hard refresh it's not a big deal um oh you know what once i sign up you gotta log in that's why i guess it doesn't auto log you in that's totally fine so if we go back to the admin ui we go to user management there's me i'm unconfirmed and that's totally fine um i could probably manually confirm myself if i really wanted to that's not going to prevent anything that's just like if you had an app and you wanted to make sure people confirmed their emails that's not an important step for me right now at the stage of my application so i'm not too worried about it but we'll go ahead and log in and so it's going to be andrew at exam pro.co and i think i made a testing123 user's not confirmed so i guess i do have to confirm it uh-oh i did not code it in my application to confirm so the only way i'm gonna get past this is i'm gonna actually have to go and manually confirm it um oh you know what it probably sent me an email that's probably what it did because i'm just trying to think like i don't remember having to like code anything additional my app for that so i'm just going to go by email i'm off screen here okay okay all right so yeah that's the case so i'm just going to show you quickly here so i got i got a forgot password code um sure what to do with that temporary password i also got this email here i kind of swore it would give you a link maybe it doesn't oh you know what maybe um hold on here what if we try logging i just can't remember what if we try logging in with the forgot password code will that work uh-oh well that's not a big deal if like if i have to add an extra video at the end and this to have a confirmation we'll do that but to confirm myself it's not that hard i'm just going to go over and they don't let you do it through here but i think we could do it through cognito so what we'll do and i've already have the user pool open so just go to cognito right i thought my app was 100 done we're going to go to staging we're going to go to user groups it says it's unconfirmed we're going to go here we'll just confirm the user okay and so now i can go back to my banana brigade app testing123 we'll go ahead and log in there we go and just ignore that error it's not important a bit of a bug here let's go give it a refresh and so i actually already placed my banana by accident maybe nope hold on there's my banana well it says undefined so to me that means the nickname is not being stored huh but yeah that's how the app works you just left click or if you want to remove any hit right click you can click again there i i'm cloud i think i just made a new one i'll probably have two bananas if i refresh now yeah i don't think i coded the delete function either so again that's another thing i'll just code in before the end of this uh when this video is published will just work properly uh but yeah that's as simple as it is um if i click it it should take me to my actual profile this one's undefined so that goes to that fellow there's something wrong with the name but let's go take a look at the data so we'll go back to our admin here go to content and here we see the cognito uuid and we have the vector and so that's being stored there so that's all good and these are two separate records one is for myself and the other person there and if we go i don't know why they don't show the id here i think that would be really smart if they showed the id but they don't um and so another thing we can take a look at here is back in the user pool because we're storing on the nickname our hash node username and that's how it's supposed to know uh what to show eh but now that we have a working app let's actually just talk about some of the api endpoints and just kind of browse through the code okay now that we have the app working so i'm just going to do a hard stop on the video here and we'll jump to the next part all right welcome back uh so let's go pull up our visual studio code let's just talk about some of the apis we're using here so this is a plain jane javascript application no modern web frameworks okay um it's just using webpack and modern js that's the only modern stuff so up here we're importing our assets we configure amplify to work here and so what i've done is i've abstracted some things out into subfolders to make our lives a bit easier views deal with anything that's visual utilities it's like authorization the actual banana data creating a banana element because that's a bit complex um we have models that's something i didn't show you before in the in the poll step but this actually got generated as well if you notice here these are the definitions for um they create models so you can easily reference these and start using them so here's like there's a schema here this is the actual schema that's generated out i don't think this is appsync and specific this is i think amplify specific but yeah it's just a way for us to interact with the object with datastore and pass it around that'll make sense here in a moment so um we have our views and the first thing our app does is it's going to need to check whether we're logged in or logged out and so what i have here is this auth current user and if there's an error it's going to run this error code but in most cases it's going to be successful and it's going to run this current user success and if we have a user this is if this is defined then we are logged in if we're not it's going to be logged out to handle state we're keeping it really simple we're just applying these to global variables logged in the cognitive user id and the hash node username see here it says user attributes nickname that's where it's supposed to grab the username i don't know why it's not grabbing it um but we'll just go and this is again this is not amplified this is my code so we understand what's going on but if i just go ahead and right click here um oh i can't right click on the page at least not there uh because this all this has right click disabled so i'll have to click up on this top white bar here we'll go to inspect we'll go to console and these should be logging out um we should have logs here for bows yeah so uh this might be called debug mode on your uh on your mac here you have to go to verbose and so here's all the information that's happening so if we just give this a a clear clear console and i'm just going to do i'm just going to refresh this here okay i lost my inspect go all the way the top here maybe at the bottom here we can see this current using success so this is what it's returning all right so we have the i am cloud nickname that's how it's displaying that up here we have the email we have the sub which is the cognito uuid that's what we just kind of rename that so it's a bit more human readable and so we have that there okay so what we're going to do is go back to our code and i just want to show you this auth class i made up here all right so if we go into utilities auth it's a simple javascript class and we have sign up login logout current user current session i'm not even using current session but um i'm just using current user to check the state and so this is where amplify comes in place so here we're doing aws amplify auth and so we have this is auth and when we did the sign up we're calling sign up and what's interesting about signup is that you actually you have to pass the username is the main one um uh for cognito or uh and in this and the way they wrote it so you actually have to pass if you have it set to email mode you have to pass it there so just to really reinforce that we'll go back to the amplifi or the aws console here and we'll go back to it here and if we go to user groups maybe general settings where did we see this uh oh here right so we have it set to email address but uh strangely enough the underlying thing is always a username right so that's just what it is so we are using email we're not using username but that's how it works and notice that's how we're passing attributes here we can pass as much metadata as we want so there's that for the login it's very simple we have a sign in we pass it the email password if it's successful we're going to call our success function which is passed in through here logo is very simple we just call sign out on it for the current user that's going to give us different information there's a good article on different things that you can get back for this so i'm just gonna see if i can find it quickly here and show you what i mean auth current user it's like current session amplify i'm just trying to find this article for you here it was this one here hopefully don't get the pay wall but they're just talking about the fact that there's current session we have current user and authenticate user and basically it's just what gets displayed back okay so this one is returning this kind of data so it's just session data does it also have the user no so oh yeah it has some cognito information in there and then you have current user so that's a very limited amount of information about the user and then you have current authenticated user which is a combination of both right so there's those three three types of options it really just depends on what kind of data you want to work with i don't i just choose current user info to make it a lot easier um and so that's what i did there okay we'll go back to our index page and so that is how the authentication works let's go up here and take a look at actually how data store works so that's i think a really cool one um so we have this banana board here and that is the actual board that we see over here if we go back to our board um here so this big area is the board okay and if we left or right click it it's going to put bananas but at the same time it has to go and save things and create things and delete things from amplify so what we'll do is go over onto the right hand side here go to views we'll go to banana board yes and notice that i'm importing banana element and banana data so banana elements just some dawn manipulation and the banana day is the one we really want to look at and so this one i'm importing datastore and then i'm also importing that model that was auto generated out when we did a poll so data store is really awesome because what it does is it actually stores uh the data locally in in the chrome um database or whatever database your browser may have so that way it basically allows you to be a progressive web application the data like you could have an offline version of it and it will also sync the data back and forth so if you do make a change it will go sync it back to through app sync back to dynamodb and so when we want to get all bananas like you need to just pass what it is that you want so i pass in the model and knows to bring me back all the bananas with all the fields if i want to find a banana i can do a database query and i'm going to query based on this limited set i believe this is a query so there's scans and queries but i think that this is actually doing a scan so in dynamodb you have scans and queries squand means return me all the fields and then just filter that out so it's kind of an expensive way of getting data and query is show me a subset of data um so i think that it just iterates through all data and then sifts it through there but uh notice that it's always going to return multiple so i have to always just say the first one there this one's returning on the id this one's returning the cognito user id what i want to create a new record in data store i have to create the banana record here and then i'm going to pass the values i want when you are updating you actually don't exactly make an update again i said earlier that datastore is immutable so it's always creating new records it's never uh updating an actual existing one so what you do is you actually just make a copy of the old one and uh with the new values all right and so we saw that before when we looked at dynamodb with the versioning and apparently i didn't write the remove one yet so i'm not sure how to do that yet but uh we'll worry about that later but yeah that's data store um and that's that's that there so those are really the only two really complex components in the application uh but the next question is how are we going to uh deploy this application right so if i was to go to back to um amplify admin ui and we were to go um back to our we need to go back to our console that's where we need to go so we'll type in amplify up here the console go back to our app here and if i was to click on our front end and here this app still doesn't work because it doesn't know it doesn't have that abus exports configuration file right it doesn't know how to talk to amplify so you might think well should we just push that abus exports file well you're not supposed to it's actually supposed to be ignored um so if i just go to stop my app here i'm just going to get status here and so notice i have those files but notice that it's not there right so i'm just going to go and open up our git ignore file just to show you what we're actually ignoring and see here it should be here right so if we're not supposed to commit it then how are we going to uh get this file actually in production and so the way we uh we do that is we actually need our amplify um gamble file we need to add that as a step that's how we're going to do it and i actually have like a a stack overflow i'm pretty sure it's just this here right so that's what we're going to have to do next okay so i'm just going to stop the video here and we'll start another one and uh get ready for deploy to production all right so what we're going to need to do is uh we're going to need to run or we're going to make a custom amplifi.yaml file uh so i'm just in the documentation here under configure build settings there's a lot of options and so that's all we really need to do is add this i believe that's something that's built into um it's like a shortcut here in the actual configuration file so the question is how do we get back that base file well luckily if you remember earlier i actually downloaded that file and i have it right here so what i'm going to do is just bring it on over into my amplify file if you didn't download it you'll just have to stop the stop the video and and figure that out like write it in manually so what i'm just going to do is drag that into i think i can drag right that there right yep into there and so we have all our default steps and so i'm going to go back over to our chrome here i'm just going to close some of my tabs here and this is all we need so i don't need all that i'm just gonna grab the whole thing to make my life a bit easier and i'm gonna go to the bottom here yeah still version one that's fine so we need this in our build phase for commands i think that we would want this before the build run because if we didn't have remember that's where it aired out last time when we didn't have it a so we'll go ahead and save that and we will just go to our terminal here get status get add all get commit hyphen m update uh build to run uh app spec or amplify cli or amplify yaml amplify poll now if you're following along and you like you'll probably get stuck earlier down the tutorial because it'll try to run that command right but i'm not sure but i think that would mess it up earlier on so yeah what we'll do is now we'll go back to amplify here we'll go back up to here that's going to start another deploy so we'll just wait for this to finish and i'll see you back in a bit all right so um it looks like we hit a failure step here on the build and so if i go into here it just says we don't have sufficient permission so i guess um our amplify console has to have um permission in order to access these resources so we can't just pull them right so if we click on fix this here and we're just in the app settings general settings here i'm not sure yeah it's just under here if we went to general we were to go to edit what it wants is a service role and so that's something we need to go ahead and create now to make that we're going to have to make our way over to iam so i'm just going to type in an iam here and we're going to create ourselves a new role i'm going to create this role this is for amplify so i think that's what we would choose allows amplify backend yep that's the one we want so we'll just click on this next we'll see what permissions it gives it eight of us if you're watching i do not like this okay like this is the most permissive you could be i don't know why they would do that i guess like it's hard because it's hard to say what you're going to use but i really hope that they figure something out here because you don't want to do that from a security perspective but that's all we have so that's what we're going to use and i'm just going to call this the amplify console service role okay we'll go ahead and create that role we're going to go back to here there's no refresh button a lot of times database will have a refresh button we don't get one this time around so what i'm going to do is go back just click off and click on hit edit drop down and now we have a roll and i'll hit save i'm going to go back to here and we need to trigger a deploy i'm not sure if there's a button for that click on this redeploy this version okay and so hopefully this time i think it should work um and i'll see you back here in a bit to make this a bit easier i'm just going to click on the logo here and i'll see you back here shortly all right so that service will fixed our issue for permissions and it made all the way to the end here um the only thing though is that we ran into a small problem grab the app open here and go inspect it's still saying doesn't have access so that's a little bit confusing it should definitely have access just make sure that we have the right link we do so if that's the case i'm going to brew force it it's not proper but i heard a lot of people having a hard time with amplify with this particular issue but i'm just curious to see if i can fix this myself because to me if that is showing up that means that there's no abyss export file for it to read and that is its problem right uh unless i did my build spec file wrong but let's go take a look there and we run this command before we do an npn run build so that file should be there so that i'm gonna cheat it's really dirty but i'm going to do it anyway so what i'm going to do is i'm going to go to adabus we're going to make an s3 bucket okay and we already have admin access our service rule has full access everything so we do whatever we want i'm going to make a new bucket i'm going to call this amplify config call it bb for banana brigade you'll have to name yours differently if you do that and i'm just going to put the file in this bucket so we'll go to source i'm going to [Music] open this in my explorer wherever that is i'm going to open up here and we are going to drag that on in here i'm going to go ahead and upload that and then yeah so that is it's going there so i'm just going to copy the destination url there i'm going to go back here i'm just going to write an s3 command to copy it in so that way if it has to be there you know what i'm saying like there's no way it won't work this way um so i'm just going to do a bb probably you could do this as a pre-build step but i'm just going to put it here it doesn't matter so it's going to be s3cp then the bucket file and then you want the file so it's about exports dot gs and then we want to say where we want to download it to um so we're going to place it in our i don't know what the route would be for this let's go look at the build settings file here i'm just pulling it up here because they might have like environment variables not seeing any like isaiah is branch the home um for example the following script uses system variable to execute one set of commands so what i'm trying to find is like normally they're like when you're using like build like build special stuff like that it'll tell you uh where the default home is so i don't even know where it is um so what i could do i really don't know so i'm just going to go ahead and echo this i'm going to take a guess but we're going to echo this and we're going to say or we don't have to echo we just got to do pwd so that will print out where we are but i'm just going to try this um i'm just going to make it relative and see if i can do it that way maybe there's something in the building there must be something in here for like local path a i don't see anything but we'll do that and we'll give that because this builds out as an artifact somewhere right so but i it says dist so i don't know if where we are hmm well anyway we'll give it a go and this should copy the file oh you know i could put a best in front of there and so if this works that's great if it doesn't at least we know um but i just want this to work so we'll give that a push there we go and i'll see you back in a bit all right so take a look at this it uh failed on the second step here we're gonna go take a look remember i forced it to download that file so here we can now see our path which was actually this so that's good to know or sorry um up here right but um we ran this so we downloaded the file manually then we ran this here i'm noticing now that we now have our stack info that's the information we actually want to have so that's useful to have but then when we get here goes importing amplify environment where you are not working inside a valid amplify project use an amplify init in the root of your app directory to initialize your project or amplify pool to pull down the existing project so it's still giving us a hard time not sure why but anyway i'll just come back here in the next video with a solution while we're waiting for a deploy and again this might be out of step but the point is is that my domain is ready i went over to route 53 and i think that we can go hook it up so i'm just going to go my over here and if we go over to registered domains that's how you know when a domain is ready so if if it was impending it wouldn't be done if it's registered it is ready for hookup brigade and i spelt it all right it's good for me and so over here i've never done this before so it'll be fun to try this out but the amplify console we have domain management and we can go ahead and add a domain and apparently i can just drop it down there and that's what i want it to be okay i can't hit save to have to configure it oh there we go okay and um we have main that's fine to me www dot sure that's fine set up or redirect from this to that i agree i don't like it when things go to naked domain they should go ww so that's perfect how they did that set up redirects for custom domains to point to the admin ui i don't care about that if you had users they would get to the admin i better be like admin dot banana brigade which would be in the admin ui we don't need that it's totally fine we'll go ahead and save that and wow that is super easy it's going to even set up the the certificate for us that is amazing i love that it's not that hard to set up a certificate but if you make a mistake it costs a lot of money in aws i learned that the hard way but they're very forgiving if you make the mistake they'll just refund you it's the first time because when you go here there's two options provision certificates private certificate this one costs like 500 starting just by pressing the button you're costing yourself 500 so you're supposed to go over here to provision and request a public certificate i'm just doing exactly what it's doing here i'm not going to complete it but i'm just saying you go banana brigade brigade.com and then you add another one and you add a wild card that's pretty much what it's doing and then you just add it and confirm it but um this one is still provisioning i don't know if we get to actually see yet when it's made i'm going to go over here it's all in row 53 so it should be pretty darn fast give that a refresh and yeah i don't know how long that takes but you know we'll let it go on its own and we'll come back and check it later so i'm just thinking here uh maybe we can check out this here in row 53 because all it's doing is checking the hosted zones for that configuration right so if i go down below here it should have a c name that it's adding here right here eh so that's what it's adding and that's what it's checking for um and it's acm so it shouldn't take too long but i don't see it in the certificate manager so it must be separately managed normally this is instantaneous with aws but like when you're not using amplify maybe it's a bit slower it shouldn't take that long it's all part of row 53 but i just wanted to show you that record there and eventually this probably will complete on its own all right so here's the moment of truth it went all the way to the end but does it actually work we're gonna give it a right click here oh look in our custom domain is hooked up as well that's even more exciting that's just like a bonus this works we're in really good shape good inspect still getting that error huh so that's kind of interesting because we we did the back end how they asked right we did it exactly as asked here separate um pre-build looks fine does npm install then does the build so it's like we're missing something i still think what it is is that aws exports file wherever it is going is not going to the place where we think it's supposed to go so maybe what we can do i mean it's nice we have the domain but we can go to our build here and we can take a look here now actually has a back end step we didn't have this before so that's kind of interesting um so we're just going to carefully read this and see if we get any kind of info information here found the console fetching updates just recommend you run this command from the root of your app i'm not controlling where it runs i just put it in the file um your project has been successfully initialized um so yeah it all says it completed successfully but uh give it a nice refresh here it doesn't work though so yeah i don't know i don't know what the issue is there um i'll have to do some debugging all right so um our deploy is done no errors this time and uh i'm going to open it up i'm just going to show you here if you inspect it no errors okay you know how i did it you're gonna you're gonna laugh or or cry depends on on the way you think about it but if if i go up to my commits here um and we go to our commits and take a look so please don't look at this i just committed it directly so what that tells me is that the file being generated out is not in the right location [Music] and so i think i really don't know the problem here i think i'd have to get on with aw support but i i'll probably make just an additional video on the end of this i don't have it right now um but i mean the app is working and uh i mean i haven't logged in it's probably something we should do not sure if my styling's messed up there but if that doesn't have an error that we should be able to log in right and look at that i'm logged in doesn't like my area there i have to give a nice hard refresh but pretty good for my first uh amplify application that's complete um like a real app we'll go ahead and just click there there's my banana so i encourage you to sign up i will still have to fix a prior step for the confirmation there but i think that shouldn't be too hard um and i might make an additional video but to me this app is done so there we go all right so that wasn't too long uh we only waited a few minutes and now what we'll do is we'll go ahead and clone this one we'll call it main and now this is going to set up basically all the infrastructure again because that's what's going to have to do if it clones it right so go ahead and hit a clone and we see that it's starting to make a main there i'm just hoping based on naming convention that it'll sync up and it'll say set up for continuous deploy and so if that gets all set up maybe we can try to remove the hard coding and put it back in and then just see if it just works because maybe it's not that that file did not compile out it compiled out to nothing right because there's no back end um so maybe that's just a a little um ux issue dx issue uh but that might uh resolve that problem for us all right so um i didn't talk database support but you know what i noticed that was really interesting when i went to my back end i now have two so um i originally remember when we were creating this we had a staging one not particularly what i wanted to be called don't remember having the option to choose the name of it but the thing is this one it's not saying here let me give it a nice refresh here but this says continuous deploy setup with main front end and this one has no thing enabled and this one does very unusual so my remedy here is maybe what i can do don't know if this will work but we'll give it a go i'm going to delete this one okay and then once that's deleted i'm going to go ahead and clone this one so this might take a bit of time because if it has another branch you'd have to provision a bunch of stuff but i mean this shouldn't have anything in it so it should be pretty darn fast but yeah it's um i'd say it's very interesting i've never done this before so i have no idea how long this is going to take so i'll see you back here in a moment all right so after a short wait we have provisioned our back end here i don't see any categories enabled which is kind of interesting here oh we just had to give it a refresh there and so i guess that's pretty much a clone of our environment i would think that we would have to do another appsync or we would have to do another poll here so i'm going to open up this one here and what we're going to do is go back to our app i'm going to delete out the hard coding again don't tell anybody that i did that and then we'll go here we'll go ahead and delete this one we will go back to wrap here and this should have all the same stuff and it does okay so then we're going to go here i'm going to go grab that that url there and just pull that we're going to go back we're going to pull that and now just wants to verify our app it's opened up in another tab here so i'm just going to hit yes and we can go back here and we're going to choose visual studio code javascript none source dist build start those are all okay because again we use all the default settings um do you plan on monitoring the back end no great and so we'll do a get status get add all get commit hyphen m i guess we didn't have to really pull it because it's not really part of the repo but revert to the normal revert to normal okay we'll do a good push and maybe that will just resolve that issue for us we're not really going to know until that deploy is done and um now we're just gonna have to wait and see here yeah maybe it's just that redundant one if that's the case we'll just go ahead and delete that and that means um everything it i mean any users that are creating that staging one will just we'll have to have to go but hopefully it's as easy as deleting that environment i don't know it has a bunch of dependencies here but i guess we'll find out see you soon all right so we waited a little bit there and the deploy finished so if that's the case let's go take a look at the production website let's see without hard coding if it works now give that a right click look at that okay so that was our problem we just had a redundant back end there and we just got to be careful when we first spin up that um back and that we either clone it make our main or you know what have you there so there you go now we actually have it properly

Channel: ExamPro

Views: 1,448

Keywords: aws

Id: Zj0UJA4vhNU

Length: 92min 26sec (5546 seconds)

Published: Sun Feb 28 2021