AWS Amplify | Week of Extensibility

[Music] all right it looks like we are live welcome everybody to another episode of well i guess the first episode this is an amplified with friends this is week of extensibility thanks i'm here with uh renee uh and and christian i let them to introduce themselves a lot of you already know me my name is michael leondo developer advocate on the amplified team it's great to be here uh renee well cool hi everyone i'm renee and i'm the product manager on the aws amplify team i particularly work on the empire cli and a few other things here definitely hi i'm christian and i'm i'm an advocate for amplify i'm very new to the team and that's kind of makes me uh the person i'll be asking other questions or the like really very very sick questions on behalf of everyone everyone who's in the chat and i'll be more money in the comments as well to make sure like it gets everyone's questions awesome definitely and on that note if you have any questions we are streaming on youtube twitter aws twitch let us know in the chat we'll definitely like to uh to showcase that make sure everybody's involved but we have a lot of good stuff to cover this week and today in particular we're going to be talking about the one of the new features of aws amplify which is going to be this whole set of extensibility features starting things off with amplify override uh renee as pm uh your team has had a lot of influence and engagement in this feature i would say uh did you want to give us a little bit of background on uh what's happening here with amplify override yeah so amplify cli really helps you build out front-end web mobile apps fast right so we help front developers develop their app back-ends and we give them uh capabilities like a graphql api or off and so on and so forth very using a simple cli command like you can just run amp-fi add-off or amplify add api and get those capabilities you don't have to think about the underlying infrastructure details if that makes sense right but as an organization grows and as you go into production you might want to find specific settings you want to tweak on that infrastructure level um just because it is better according to your devops guidelines or it is really required out of um out of your organization's requirements as a fundamental requirement so amphi overrides basically helps you get there quicker so with amphi overrides you can actually override amplify generated resources and today we're announcing the ability to override amplify generator resources for off meaning cognito uh storage meaning s3 and dynamodb and also project level im roles for authenticated and unauthenticated user access awesome and this seems super important for organizations uh in the startup in the enterprise community who have some kind of compliance or auditing settings that maybe presented them arranged from adapting yeah yeah exactly a bunch of customers who previously just didn't have the ability to add an amplifier to their org now we're here to say hey we listen to you we're here to support you and uh maybe take a deep uh deeper look into how this can all be accomplished so kicking off the demo is um well i guess all week we're gonna be having demos to showcase these features which i'm super excited about uh kicking things off today i'm going to be showcasing how you can add in the override capabilities to authentication and to storage and as renee mentioned storage is going to be for both s3 and dynamodb and i'm going to be tackling the downward db aspect today let me go ahead and share my screen and just take a little brief overview into what we have going on today perfect now it's monday uh early in the morning for a us based in the united states uh in particular i'm central time so i'm still thinking about breakfast even though it's 11 o'clock here so i said you guys you all might as well sit in that in that realm with me yeah it can't go wrong with donuts so we're going to be showcasing is this example here uh we have a bunch of donuts and this isn't wired up to amplify at the moment but you can imagine as we start adding these to the cart uh so we'll do all three and i click on view cart nothing too crazy we have the donuts um sliding up over here behind the aws logo but what i would want to do in a in sort of a real world application is to say well what about when you add these donuts to your cart they automatically expire after a certain amount of time you might be thinking like why would i want that well for a lot of shopping cart examples you store that information inside of a database and if the user doesn't come back to your application within 5 10 15 days that item might not be available anymore so having a way to automate the removal of shopping cart items is actually super common in a lot of applications i have a feeling michael this is a common problem you run into where you add a lot of donuts your shopping cart you forget about in the next day you have twice as many donuts as you ordered seems very specific it sounds like you ran into this before as as you know the beauty of working with aws is that uh working with amplify is that i get to scratch my own itch a lot of the time so yeah this is this is purely for me but you all get to sit back and enjoy um as i talk about donuts for an hour so uh and with that you know we'll also imagine a sort of compliance scenario where once we have users sign up for application and give them the ability to add these items to a shopping cart oh we'll say maybe the auditing team of this organization is saying well you know we really want users to just have a day to sign up with a temporary password uh and anything longer than that we just have to resend them out the link so we'll explore how that can get taken care of with amplify override today so let's kick things off here this is pretty much the application let's take a look at what the code looks like now if you don't know already i'm a pretty big fan of chakra ui so i have a bunch of components that made the application just easier to scaffold and this is all open source i'll send a link out on github so that folks can can start doing this today we're pretty straightforward uh when the application first starts we are going to get those car items we're not implementing this yet but then also as we start adding items to our cart sure we're updating them locally but how do we update them inside of a database and even better yet how do we automatically set that that ttl that time to live so that way they automatically are set to expire we'll explore that as well and then the rest is just your regular sort of react code with chakra ui all right so let's kick things off over here is my font large enough can i get uh maybe one more cool oh good i think this works yeah i have the latest version of the cli and the cool thing is that everything we're going to be talking about this week is actually released in production today so you can run npm i sg and then just do amplify uh aws amplify slash cli to get the latest version here as i mentioned i have that installed already so let's go ahead and kick things off i know i'm going to need authentication so i'm going to do amplify add auth lot of us have already used this before it's one of the easiest features to get started into an application and that doesn't work because it knows nothing about my amplified project so amplifying it yeah so let's tell my front end um hey i'm going to go ahead and scaffold out an amplified project by running amplify init now i'm in xjs so i'm going to go ahead and say no to the default configuration here and that's the beauty here is that i can tweak this to whatever project or framework that i'm working in so dev environment works well it knows that i'm in vs code and then this is a javascript react project but resource directory for next.js apps is going to be dot and then the distribution path is going to be that next everything else can stay pretty much the same this is going to initialize my project awesome now i have a sandbox account that i always use for my demos there we go oh you're very creatively named the default i i do that so that way when i do amplify init i can just patch dash y and uh oh yeah and it just knows that's a shortcut for those people who don't know yet like if you're tired of clicking yes all all the way through you can just run amp and it dash y and it's basically headless it just does goes scaffolds it out yeah yeah i didn't know that well um there's a couple tips and tricks that i can throw along the way i'll try to call those out and uh if you are in the chat and if you know of any other tips and tricks let us know i'm always curious to see what folks are doing to scaffold out their projects and get started yeah we used to have a um are used to we have a community builder who has built out a um cheat sheet of like all the different amplify commands so that you can print it out almost as like a poster if you hang up on your wall i feel like we should send that out as flag sometimes yeah an amplified poster yeah an amplified poster of all the emphasia like commands so you know exactly what to type but then like i'd be like hey i made that cheat sheet where are my royalties [Laughter] you can sell it as an nft maybe i don't know right maybe it says uh so i have authentication set up and really this is just my back end that was initialized i haven't added it to my front end just yet but i'm going to continue down this path i'm going to go ahead and add in uh storage and again this is all going to be in the context of an api so this api is going to take care of routing through api gateway the data itself with the lambda function and then of course the database so we're going to do the full shipping today uh whoops not amplify ad storage amplify add api and that'll take care of all three oh rossio what's up i haven't talked to you in forever i hope you hope you're doing well so uh we're going to have a rest api and then it's going to ask you for a couple of things about my project we're going to call this our override uh demo api uh and then we'll say slash cart items so anytime you hit up slash car items it's going to call this lambda function uh we'll just call this our cart item funk then as mentioned we're going to be using full crud functionality here with dyno db integrated and for that we need to create ourselves a dynamodb table now a couple of things i'm going to call this our our products table just like that uh and this will be our uh demo db database and the first column that i want to add in here is going to be a user id that way when someone logs in they're only getting the items that pertain to themselves so do it just like that it's going to be a string do you want to add another column yes we do this is going to be that ttl now as mentioned ttl let's maybe give a little bit of background around that it stands for time to live and what that means is if you give daniel db a number in seconds then it will once it's enabled it will automatically mark those items to be deleted and when i say mark them for delete a lot of folks might be confused and think that it's going to delete them right away at that time but in fact it's guaranteed to be taken care of within the next within 48 hours now that obviously depends on the size of your database or a very small one like today it'll be a lot shorter we don't have to wait two days for it but it's very useful because items get deleted without you having to pay for them now which is the huge benefit of doing this instead of like scanning your table now we do want to add one last column and this is going to be all of our products simple enough this will just be a list of items here that's pretty much it now as i mentioned the user id is going to be that unique item inside of here so i will say this is my partition key but i'm not going to do any sorting adding any gsis triggers or really any advanced settings at all so maybe you can kind of talk about what a partition key is because i know when i talk to customers especially if they come from like a rds world they they you know are not as familiar on how to structure in those sql databases so maybe you can kind of just briefly click on that yeah for um and then correct me here because i stick in like the nosql world but i hope as as i understand it uh partition keys are a way to segment your data uh so you get a part of it it's that partition aspect to it now with the nosql database everything gets dumped into this this object store and i'm i'm definitely oversimplifying by calling it an object store but you can think of all of your data going into it and we need a way to quickly access it instead of having to scan through the entire table so the partition key says uh give me sort of a way to quickly look up items instead of going row by row give me some kind of key so that i only need to care about accessing those individual pieces and in our case it's going to be that user id all right how'd i do how did you do on this i think you did pretty well i think for those folks who who want to oversimplify it even more think of it as a giant hash map and you want to place in that hash key and that's how you find the values yeah for sure but that's even more over simplifying more i know it's like dino with db is so powerful uh you can say one thing and it's like that's an over simplification yeah so um we're gonna go through this i've gone through this overview a couple of times but this is the first time i think i've done it on stream where i was talking about storage and authentication in the context of this lambda function so i'm going to step through this just for a little bit we're going to be using express to do a lot of the scaffolding but for those of you that aren't familiar with express it's a node.js framework for running server-side code and when i say server-side code i mean like actually like in a server environment but for us we're in a lambda so we're going to be using uh this package here which gives us the ability to do just that you know runexpress inside of a lambda now we have typical things here you know we need express we're going to be parsing the incoming uh body information as json so we don't have to worry about stringifying or anything like that it of course knows what product uh table name we're working with and that's because i told it in the cli now a couple of things here i am going to segment my data use that partition key uh inside of this application so i'm going to set this to true then everything else it brought in from the cli i don't have to write any of this code but the cool thing is that i'm in full control over it so i'm going to enable cores for these routes and i'm not going to be listing all of the items inside of here so when it comes to listing just the the get method for everybody i'm actually going to delete this part and again it's my code i can do that if i want to but when a cart item comes in i do want the user to be able to get their individual cart so i'll keep this one around next up is the put now the cool thing about i just noticed this the other day the cool thing about putting objects versus posting them uh it's actually the exact same code it's just a matter of what your route is going to be using so we have app.put and then we have app.posts and they're doing the same thing they're both calling dynamodb.put and that's just because the put operation will say add it if it doesn't exist so it's already doing that check for us so for simplicity i'll get rid of this section here now i could just ignore it but again i'm just proving that we have full control over this code being generated so let's maybe focus in on this area because this is where a lot of the ttls and and user storage is going to be taking place we're saying hey is that user id present it is i added that as a column on my database and in addition uh this code is going to automatically grab the user id from cognito that's one of the awesome things about having this all tightly integrated is i don't have to actually pass any information from the front end to the um to the back end regarding a specific user id because that'd be like super bad if somebody got a hold of that and manipulated it let's just trust cognito to do it all for us so the user id is going to be added here's the body that's going to contain eventually all of my products let's just go ahead and spread all of those things and add in a ttl so we'll say for this field it's going to be a ttl and i'm doing this because even though i can pass it in on the front end i want it to be like what the time was when it actually got to the back end so i can say something like math.floor keeping in mind that it has to be in seconds and give me the date that now which for those of you not familiar with javascript this is going to give you the time in milliseconds let's divide that by a thousand to get the actual seconds from here you would probably want to say something like plus you know five days but for the sake of example we'll say you know we're going to expire your cart in a minute so hurry up and buy those donuts well i have a feeling you you copy this snippet of code from stack overflow somewhere like every time i have to deal with time and dates and all that stuff there's no no better friend death stack overflow or not i actually pulled uh this code from the aws documentation on dynamodb ttls in uh in python c plus plus and javascript so i did copy and paste it but [Laughter] well i'm going to wager money that the the dock writer from dynamodb copied it from stack overflow all right well like when it comes to dates i'm like is it like new day everything seems quite yeah like give me like date fns and i'm just going to call it a day like i'll install a whole library i don't have to deal with it um i'm taking a look over here everything looks good to me uh we have a way to if i scroll up uh we're gonna hit up this path so slash cart items slash object slash you know some arbitrary username it could literally be slash user because we're going to be using cognito to actually pull in the user information from here so that's looking good and then when it comes time to uh to post it we're going to be having the user id automatically attached to the body from here again via cognito we're adding in our ttl and then our body request is going to contain our products so we'll do that in just a moment great code formatted so i know don't have any syntax errors let's go ahead and continue along here i'm going to hit enter and it's saying hey do you want to restrict api access yes i do and i want authenticated users uh to be the only ones to do anything here i mean and you want to add another path i don't in this example but it would walk you through the similar flow if you wanted to at this point before today you would want to push up your changes and and call it a day like what you could do is is what we just went through but now we get to explore the fun side of things which is how do we actually override these for compliance so i'm going to kick things off by saying amplify uh override we'll say off so this is going to be our devops team our auditing and compliance team saying hey this is a great application but we really want to enforce the ability for users uh to only have a day to sign up for the application outside of that uh they need to just get a link reset to them so you can see small subtle updates to the to the cli here it automatically knew that i only have one auth resource i didn't have to confirm which one i was i was specifying here it automatically pulled that in i do want to override this now and let's take a peek at what's happening here we are bringing in the power of the cdk to stub out a particular section a particular stack of our application and in doing so we're going to bring in a helper here so this is the amplify auth cognito stack template and when we talk about this resources parameter here that's all it's referring to so whatever i want to do with this resource on resources dot everything that gets pulled up via the beauty of typescript pertains to my cognito user pool so i can say something like hey resources meaning you know cognito i want to go ahead and maybe talk about a user pool and with regards to that user pool i really want to jump into the policies and then you can sort of if it had the ability you can just keep doing you know dot dot dot and again that's just the beauty of typescript at work here but what i want to showcase is that even our documentation uh from these autocomplete examples will give you relevant links in case you're you know you're relying on typescript but you're just not sure about what resources you're going to be tying into so here's a link i'm going to click on this awesome it takes me through all of the aspects or all of the the types that we just had in our application so here's type policies great it's an object from there i can dive into password policy sure enough temporary password validity days which is going to be an integer so knowing that i can dive back into our application i'm going to set this equal to that object and we want to um say i already forgot the password policy thank you look up um there we go password policy i just typed in p and it brought it up for me which is pretty cool and then from here uh we're going to have our i just type in t temporary password validity days set to one now i also want to make sure that i'm bringing in all of the um other password policies that are tied to this right i don't want to just set this to one so i can say give me the resources um oh you probably want to spread it right you want to use the spread operator yeah i think thank you that was like why didn't that yeah that's that's why i didn't give you the code completion yeah there we go um and then the password policy uh i think because it's an object you need to put into angular brackets right the password policy needs to be like a key thing here yeah as a string now we're just now we're just you know going into all the fun of typescript javascript and all that stuff yeah yeah ruby for for a while i appreciate it yeah i think maybe something you can kind of just um talk a little bit more about is what is cdk right because it you know for many i think amplify customers they're not familiar with cdk because this is this whole other thing inside aws right and why is this integration so cool maybe you can talk a little bit about that yeah absolutely so full context here cdk cloud development kit it's going to be another way that you can scaffold out your infrastructure as code now the beauty of the cdk is that your infrastructure is code so as you are um using something like sam right you're writing um or cloud formation you're writing yaml or json to represent your infrastructure cdk works with whatever language you are currently using at least the majority of them in our case we can write our code in javascript or typescript but in the context of amplify and what we're releasing typescript is going to be our best friend here and uh from here you have the full power of sort of taking any cloud formation template and translating it into another type of infrastructure that that offers what are called constructs constructs say hey you always have these baked in examples let's just go ahead and create a module so that way you can work with them so in our case we're using a um a helper here and you can imagine that this is just accessing that dynamodb construct a set of tools that simplify us that simplify having the ability to access things like policies user pools um all those resources that we would need in any kind of infrastructure application i feel like that was really long-winded but um if uh if renee you have a different example let me know jesus there is a question in the chat um yeah okay i think it's on the screen now yeah oh so what do we got here can you use the override to connect different resources for example an authorizer to a lambda that is also connected to api gateway you absolutely can't in fact this is going to touch on a couple of things that we are discussing later on this week i think it might even be tomorrow but um but yes you can absolutely do that the power cdk gives you the full flexibility of accessing every aws service connecting them however you want because at the end of the day it all boils down to cloud formation which is tried and true when it comes to scaffolding applications super good question yeah and i think to you to answer um this question is tomorrow we have a stream that teaches you how to add custom aws resources to amplify project so you can really take advantage of the full depth and breadth of aws um if you need to yeah awesome uh one more question coming in here can you define a new resource using override for example again another another authorizer and this goes back to what renee was saying uh you absolutely can it's just not going to be with the override key it's gonna be with a um uh the ability to add a custom resource we'll be touching on this tomorrow so tune in sorry to leave you on a cliffhanger but um [Laughter] yeah um renee is asking how about cicd with amplify and aws cdk this is the other rene by the way it's not me asking this question common misconception i even hear that internally uh so so yeah so all of this work all of this will work with amplify hosting ci cd system um all these overwrites will also work with admin ui as well so you have that capability um and you're free to do all the uh you know everything that really cdk provides here definitely especially when it comes to ci cd it's uh we have some really fun stuff in the works great and i mean when it comes to overriding this that was it i mean we're looking at like five lines of code here uh to do what previously meant um having to happen to the console and adjust things there but then of course now it's not in version control so super super cool we do have no i mean now it is sorry just now it is in version control oh did i say is it yeah yeah good catch yeah yeah so uh we do have another category that we want to explore right and this is going to be uh updating our dynamodb database that was scaffolded out by amplify add api and we want to make sure that we enabled ttl because by default it's off so i'm going to say something very similar amplify override and then we'll say storage it's going to automatically pull in the dynamodb database that we created earlier and very similar to our auth category give us the ability to override those resources so do i want to edit it now yes i do and it'll take me to that file automatically so from here i can say uh check out resources let's just do that and then dot and you notice that we have our dynamodb table and i'm really like i'm just kind of like guessing through here even when i went out and scaffolded this application like ahead of time as a demo i was pinging renee in slack and i was like yeah i really don't know like where to get here but i know it's like a ttl and sure enough like time to live specification is right there and i have another doc link and if i click on that there it is right here looks like it's an object that has two fields on it what attribute are you going to assign as your ttl because it could be anything right i named mine ttl but it could have been like expired at time and do you want to enable it so back in my code i'm just going to say equals attribute name yell enabled and we're good it's that easy like and shout out to typescript because like autocomplete just makes it super super easy to work with yeah the typescript really makes it uh an experience where you actually don't really need to know cdk right like you're just like letting the code complete for you as you're figuring things along the way um which is how i feel programming half of the time but um but this is really really helping you just get there so much faster without needing to understand the implementation details of cdk or really what cdk is like most of this is just code completion so it just it's just i just love typescript i love cdk and i love how everything's typed and back up by documentation links it's just amazing it's a shout out to again to the team it's been an awesome experience working through this so with that i have my compliance needs met i have my back end created i'm just going to go ahead and push this up so amplify push is going to give us a table and validate everything that we have so far and just say hey is this what you wanted to have because here's everything that we have created and there we go auth category yep api lambda function and then our database looks good to me i'm going to say yes well this is being pushed up and doing its thing we actually have time to work on our front end so looks like we had some folks join us since we first started so quick recap of what we have going on so far this entire week we're going to be giving the ability to extend amplify beyond what was previously capable and in doing so we'll be discussing different cli commands that you can use to kick off that journey the one that we're talking about today is going to be amplify add or amplify override and then a specific category uh i believe what we're supporting right now renee is going to be authentication storage whether that is an s3 or a dynamodb table as well as a project yes the project cool and in this scenario we're going to be overriding as we just did both the uh authentication piece by updating the temporary password validity days so when a user signs up they only have one day now to sign up to our application until they need to get another link sent out to them and then as you saw in our database example we are enabling ttl which gives us the ability to have items marked for expiration after a certain amount of time and dynamodb will automatically clean up those items within 48 hours so we don't have to manage any of that cool cool um there's a question so i think i'm butchering the name but b v irony bvr i i will not even try to pronounce this i will definitely portray so um is there an easy way to see what the default values are of the categories and amplify like what is the temporary password base length okay so super secret tip run amplify status dash v and the verbose flag what we'll actually do so it's going to print out the the resource level information about your app so you'll know the im policy the iem policies and all the other configurations to your particular resource so amplify status dash v so the v adds all of that information in there and quickly from wrong that would have to be you added the resources but you haven't pushed them up yet so there's there's a diff is that right correct correct so it's a diff basically the um the the key piece here is it will also work without overrides i know where this talk is specifically about overrides or the stream but it will also work without override so if i just want to add a resource and you're curious what does i amplify doing you know under the hood oh well that is awesome great well our back-end is being pushed up and as it's doing so i'm going to go ahead and add in some amplified resources here i do want to double check and make sure that i have them installed so i have our ui components and then i also have in amplify aws amplifi the javascript package itself so from here let's go ahead and kick things off i'm going to go ahead and configure amplify whoops from that package bring in my config i believe it is that backslash that's just this uh file right here it has all of my project secrets in there you notice it's slightly grayed out we don't want that in version control yeah and that file is generated when you run amplify push by the way so it populates it with all the information around your back end [Music] awesome and these three lines right here connect our front end to our back end so now i can go ahead and make api calls and do whatever it is that i i want to do here let me hop into uh what is it our index page and the first thing i want to do is what a lot of us have experience with already it's going to be bringing in that width authenticator module it's one of the most awesome pieces of tech that we have and it just gives us a really simple way of adding full-blown authentication into our project and all we have to do is import it and then wrap our main component around it or within it so setting up authentication with amplify fits into a tweet like it's it's very very quick next up i do want to work with our api so i'm going to bring in that api category api whoops and that's just coming from aws amplify itself and you notice i already have the handle add to cart and this is going to be where i add items to my cart but in addition to the database as well and then on the initial call of my application i want to go ahead and grab those items so first and foremost let's fetch these items i'll say await since i'm in this async method here api dot get and we're going to pass in first the name of the api that we're working with and what did i call it a quick way to check is if i expand this and go to our amplify folder under api i have the name of my api here so override mo api i got really confused just now because i read that as overrided emo api uh slash cart items and then recall that we're gonna hop into object slash and then particularly it would be like some kind of user identification piece but as you saw in our code like we actually didn't need that part we could have deleted it but um since we didn't i'm going to put in slash user here this will give us the card details for a particular user these will be our we'll call them products i can use that to update my state let's say set cart items to be uh the products here uh next up we want to go ahead and um when we add an item to the cart throw it inside of our database with that ttl now we actually don't have to add that on the front end because we're doing it on the back end it's gonna be api.post we're still working with all of this actually right here then i'll just clean up the uh the path name in terms of the payload i'm going to put in an object and we want to specify the body here the body for the products well it's going to be pretty much just this right here right like give me whatever is in my shopping cart plus this additional product i can do just like that and i believe this is always the scary part like before we test it did i cover everything i think we're good i think we're good um i have authentication set up i have all of like 10 lines to interact with our our full back end let's test this out we are all deployed here so let's see here are we running yeah that was like probably the the hardest job of the world where you live stream as you're coding and have three have two people on stream watching you and then you know a whole whole set of folks who are you know just tuning in you know i didn't feel the pressure until you put it into perspective like that but um thanks yeah no pressure i'm certain it's gonna work first right like all demos ever oh yeah for sure uh let's not put my real number on i was looking forward to the area number yeah you know what it really what really screws up the most is usually when chrome is like telling you hey don't you want to use this number in here because i've seen and um so i have tight control over that stuff yeah yeah all right we're good oh no it's um it's the one thing i need to find these functions i know exactly what i did here um so refreshing items for from our database right and um our products are an array but we don't have any products in our database yet so we just got back an empty object uh you know what you should have said you should have said that you're testing us if we're actually paying attention um so what do we got here i'm gonna make some some ugly code real quick um products uh let's see here are you there um what can we say products dot let's see here let me be oh i know why i was like why am i being thrown off here uh let's call this product data that makes more sense cool then set the cart items to be that product data that products keep in mind it's gonna have all like our ttl and in the user id so just store the products inside of here otherwise just go back to being an empty array don't do anything well not the cleanest stuff to write inside of a set cart items function but um with any luck we should be good and oh no this part actually isn't part of the demo um let's so yeah what is error undefined is an object uh for cart items dot map where are we at here i should probably log out lgbt that sounds like more in a different location right yeah it's talking about down here um our product details is undefined so it's like why is it being set to undefined do you have products in here and then the downside of working in safari is that when it does come time to debug i mean like the worst possible browser to do so okay so quick little refresh let it break but also let it um throw something out inside of the console and [Music] shopping cart line 63. uh cart items so it is weird that that didn't log out to the um but i didn't catch that let's see is it possible something in the initial render and did you initialize the state um properly yeah states an empty array um yeah so let's let's follow that trail here we have an empty array here uh we know it was working before in fact if i i wager if i were to log console.log or comment that out and we just bypass the whole initial aspect of it we should be good you did say wager right okay so we're good there let's throw some items in the cart and not worry about michael's um horrible react skills so we're here we have no items in the cart let's add some uh add to cart let's check the network tab so cart items uh we're gonna add another one so we have two here and then now let's uncomment and see what i am messing up right i've seen like people like yeah i'll wager you i feel like this demo is much more interesting now now we all learn how to debug react code and i think there's something fun to it so i refresh we have some user information here let's view the cart sure enough we have two items inside of here but what does this contain again apologize i use safari so like pretty this up is uh is an end game okay um so ttl eight five six one let's kind of like keep that in our in our mental here uh we have our products the two that i just added one glazed donut for a dollar and assorted donuts uh for ten dollars now the test is if i were to add another item is this ttl going to update well let's add in our cherry doughnuts here we go we were at eight five six one uh let me refresh to bring in all of our products again and then eight six four zero so we're like in the future you can imagine so every time we add another item to our cart we're updating the ttl because it would suck if you added like an item to your cart and then you kept adding more items over time but it only picked up the first time your cart disappeared so this is a good way to verify we have 10 minutes left let me hop through the comments real quick and make sure that we're addressing everybody uh looks like everyone has probably like the solution to what was throwing me off earlier but essentially what was going on there is um i was fetching the products and something got set to undefined somewhere uh i think there's a quest is there's a comment by beef irony yeah exactly that one really cool features thank you uh seems like i can remove all the changes in the auth yaml uh right now i need to keep changing the file after each amplify off update call like all the custom cognito user attributes i want to add yeah if you were like previously if you were doing some diving deep and modifying yaml files within amplify things that the cli didn't generate for you this workflow is going to be perfect for you like now you have the ability to actually do all of this stuff have it staged within a particular environment and and have it properly saved in version control so that subsequent amplified releases don't break because going so sort of diving behind the covers to modify those things as you probably noticed they did work uh but then next time you added it off change it would wipe it out and no longer is that the case yeah so something that customers have done actually in the past is probably what what he's doing with where you've written a command hook or custom script that would you know keep keep updating the off um off yaml file before deployment um but yeah now you can just update all of these things i guess a special caveat here for for cognito is that many cognito settings need to be available on the initial deployment right so there's stuff like username attributes that you just cannot change after the initial deployment so whenever you do any sort of overrides i would recommend you to kind of just go through the cognitive documentation make sure that all the things that are kind of set in stone um to to apply them first um but uh so that you can deploy them and with no problem but then everything else that can be changed at any time you can just always run alpha override and apply those updates and then m5 push to deploy yeah i think it's impressive the same person also asked uh if we can access the emv in the cd cdk override scripts as well so i assume i assume the question is for the amplify environment so i can tell you it's coming very very soon uh it is not available today but it's coming very very soon um and and you know keep keep an eye out on that we'll be able to pass you that information as a as a parameter the overrides function so that will that will give you the mechanism to do so um in other areas if you tune in tomorrow for adding custom resources we already provide you that capability so um if you want to see a glimpse of how that works tune in tomorrow look at uh okay to watch the the other stream for extensibility on adding custom aws resources yeah definitely i i just needed youtube to talk for a little bit so i could figure out like what was that issue we were having earlier um it's okay it's not a coding interview i get i get upset like i won't um i mean i think i listen to the call but like i won't work for the rest of the day until i fix this i'm sorry i have a feeling we can find the answer on lead code oh i did i i think that i was sending it to undefined um but we're good now so i just had i was missing a dot products oh i see i see yeah it wasn't it was an object so i was like hey you exist um do product data depth products but if there are no dot products it's undefined now um how certain are you of that i'm i'm very certain i would i would i would i would wager your job on it oh no no now you're really pushing it um right oh let's let's do something simple there like 10 glazed doughnuts 10 glazed doughnuts i can do that i can do that i guess it depends on is glazed on this really your choice like if you put could wager anything would you really choose glazed donuts as the mechanism like what aren't there better donuts like a berliner do you know what a berliner is somebody said that i thought they were talking about berlin and i'm like no it is it is a donut um so um it's really good but all the german folks in a chat too you know renee's from germany he knows anna who who posted originally she knows yeah it's uh it's a it's a it's a donut where there's i guess jam inside um and it's not like a cakey doughnut it's more like a yeasty down i know i'm not a donut expert but it tastes really really delicious this is looks like the cherry oh it's cake oh what pure gelatinous goop okay yeah yeah gotcha got you oh the stream has really taken a turn i know retweeter five minutes left um last question here or keep the questions coming actually uh can you also edit connected resources like the canido trigger uh in incognito you um so so can you you can yeah you can you can add a lambda function assign it as a trigger and and do all of that but also uh we already support that today within the cli if you do um amplify add function uh you or or walk through the off steps uh it'll ask you if you want to assign a function as a trigger so you wouldn't need to necessarily override in that but the potential is there and that's the great piece of this is we're really just letting customers do what best supports their team if you're more comfortable through the cli and you like sticking on that front end experience we do support that and then if you are maybe split and you have your front-end team just working on the front end and your back-end team just working on the back end uh then your backing folks can integrate with the cdk and and do it that way yeah actually um michael if you want to pull up the documentation that i just put in the chat sure how do i every time i click on it it is it's like popping it up we're gonna manually navigate there it's rough all right that's docks you miss ass now everybody's going to scrutinize every single yeah that's the coding interview yeah all right yeah yeah so it's actually if you scroll down here onto the um the table with the resources yeah you can see um number one i think for me it's it's always like a reminder of how much amplify is doing for you like we're literally generating all of these resources for you but you can also see that there's a bunch of lambda triggers that we create for mfa for open id for for various different scenarios right and you can actually access all of them here so for instance if your compliance team has a problem with your logging policy you can modify that from here as well so it really really goes very very deep right lambda triggers one one of areas but mfa open id and stuff like that hosted ui so there's a lot of things that's happening under the hood and all of that off related stuff is now available for youtube to override modify however you like that is super cool i never thought about that like updating the permissions for a trigger super cool awesome um two minutes left any closing thoughts from the audience um or any other folks we got another question coming in so i've imported auth from an external cdk project uh as i found cdk just easier to work with since i am still in development would it be worth deleting the external cdk project and creating auth again and amplify oh that's uh that's a tricky one right because i don't want to be the person that says uh michael said delete my entire project so i mean there's a there's a very um very standard answer to that it's really it depends and i i know it's like a kind of like a non-answer answer but it really is right um so if so let me just give you a couple of scenarios right oh my my microphone seems to having issues so a couple of scenarios right so for instance if you want everything to be deployed as part of a a single pipeline single project having a part of your amplify app just makes the most sense right you get ci cd capabilities out of the gate you do multi environments and so forth but then there's also use cases where importing an existing off resource really makes sense it's like if you already have users on it you don't want to deal with migration stuff like that or if you have a dedicated team that's like solely there to manage that that is also the case that is also another reason where you might just want to do an import so it really depends on your particular use case and the good news is we support either way we want to make sure we're super extensible so there you go and you have that capability to kind of customize based on what you need speaking of customizing based on needs i just added the side out ability so one line of code sign up also well let's go ahead and wrap things up from here again i want to thank everybody for joining we have an entire week showcasing just features and cli updates that are going to drastically improve the way that you both work with amplify on a personal level but also within an organization so thanks again for joining i hope to see you at the rest of the sessions next week we'll be posting uh tweet updates so feel free to keep your eyes updated and peeled to to that uh renee we should probably send out another calendar um invite link for folks that that need it we'll get that sent out too yeah we should get that sent out that's good idea cool awesome thank you have a good one bye

Channel: Focus Otter

Views: 143

Keywords:

Id: 2ATGRL4tei4

Length: 60min 19sec (3619 seconds)

Published: Tue Nov 16 2021