AWS Nordics Office Hours - Build mobile and web apps fast with AWS Amplify

hi everyone and welcome to the aws nordic's office hours my name is seguin agros i am a developer advocate here at aws and in this show every week we have a guest on to talk about a specific topic to let you ask questions around that topic and hopefully we'll all learn something new and this week is no exception this week i am joined by senior team to talk about building mobile and web apps and we'll do it fast with aws amplifier so welcome to the show cine hey thanks gunnar thanks for having me again uh really excited to be here that's right again this is the second time you're on the show skinny last time what what did we talk about last time yeah so last time we actually uh talked about how um streaming uh streaming analytics and especially with lambda and what you can do with um lambda nowadays with streaming data that's right but this time it's all about aws amplify and tell people just short about who you are and what you do at aws yeah sure so uh i'm the senior team force i myself my background is more actually a back-end developer that's what i spent most of my year my career before actually joining database now i just had my two-year anniversary here at aws and i'm a solutions architect and i work in the startup segment in the nordics where i cover mainly customers in sweden and finland but actually i uh have the privilege to get to meet startup customers across the nordics on a day-to-day basis that's great and so if you are watching this show and you have any questions throughout just post your messages in the chat and we'll try to answer them as soon as we can but if we don't get your questions straight away don't worry we'll try to cover all questions when it's relevant throughout the stream so the topic for today is aws amplifying how to build mobile and web applications so to start things off cine what is aws amplify right so um that's uh actually the i just have to tell you like but i mentioned i was a back-end developer back in the day uh way before i joined database and i heard of adobe's amplifier i'm like oh that's interesting let me have a check out i'll i'll have a look in general kind of an aws fan uh went to check it out and um got a bit confused about what this really was because it's both a um it's marketed we're like wait it is really a way to build mobile and web applications really fast uh and then okay that sounds cool uh let's uh have a look at what that is and it's both a um typically call it like about the framework uh consists of both um libraries uh cli and ui components and uh but and might seem confusing but not to worry we'll uh go through all those uh different components uh in just a moment so uh yeah yeah go ahead cine so um i so just my personal experience i'm a back-end developer and i've always been a bit jealous of front-end developers uh who get can build things that look really cool you know front-end developers have way better demos than back-end developers right uh so uh that's why uh i sort of got um that's where like i got interested in amplify myself and started sort of playing around with it and building demos however i should say though that it was amplify was actually built with front-end developers in mind because um today's in today's web and mobile uh landscape uh our end users are quite they have quite high demands for what they expect from a mobile or web app they want uh great performance they should look really good um they should be feature rich it should be responsive if we don't want to have a bad experience when we go offline uh and a lot of this typically falls on the responsibility of the front-end developer and that's uh that's a lot of and at the same time often stakeholders are asked to like deliver fast so like keep delivering um um preferably yesterday so amplify is built with the attention to uh sort of put all these tools in the hands of the front developers to build the whole end-to-end app fast is it fair to say that aws amplify is for full stack development yes yeah you absolutely you can say that um however there's a bit of a uh that amplifies that given a nice twist so for example when you think when you think of when you go into the aws console the abs portfolio is not really broad so you have what you see there is like you see a number of different services that you can use and amplify is actually sort of turn that around so instead of it's instead focused on the sort of the use case that the uh developer would like to achieve so that's it's kind of like it still uses the same uh um powerful services uh that you like it uses the uh database services that we're used to but it's kind of like putting a layer of distraction higher uh meaning that um for instead of seeing cognito we see authentication and authenticator and cognito is the service that's used to power the authentication features in aws amplifier all right so i think a lot of this will make sense when we start looking at an example cnn so is it time to jump into to demo already yes absolutely let's do that let's do that so i have your screen share up now so tell us uh what we're gonna do all right so i think i have uh three different demos and we'll um we start by looking at uh amplify the amplify admin ui and how to get started on building your frontend backend and uh one of the features i'm gonna dive into a bit more is the data store feature so i'll actually spin up a a web application of demonstrating that feature we'll also have a look at another feature that's pretty much every single app developer used to say and that's authentication and how we can actually without any code of code development at all enable these uh end-to-end authentication signup sign-in flows uh and we'll also look at how you can actually take your uh web app and and enable a full cicd workflow all right so yeah you mentioned a lot of different parts of amplify there and uh we'll go through them all so don't worry but first off you mentioned admin ui and that was something it was released during reinvent 2020 and tell us just short what is admin ui right so uh the admin ui is a um is um intended to be a sort of this visual interface where you can interact with your app both for develop you can actually add features to your backend through the um the admin ui and you can also actually let a non-developers and let's see uh you can actually also like invite non-developers uh to manage both your uh app users and your app content so it's it but i think it makes way more sense to actually get started with it so um so now i'm i'm in the aws console and i've uh navigated to amplify and uh i'm first asked for this get started and what i've first demoed here is just going to be to create an app backend so i'll hit get started so we're in there ask me anything so let's do an ask me anything demo so right now um uh the um amplify is now actually like creating this um uh i guess it's creating like this uh container for our application and it says it's also like setting up the admin ui for us the amplify console that's where you are able to then control both the front end and the back end part of your amplify application and in this case you're setting up and the back end part right now so that will then spin up the admin ui for us but this isn't the only way of setting up a back end using amplify right you can also do it using the the amplify cli exactly exactly so it started out the first uh and the beginning of the cli was your option to spin up new environments but since then um now we can also do it in the console just by clicking a button which is super handy especially if you want to sort of quickly just put together a demo all right so now um our we can see that we have our uh we've initialized our amplify application it shows so if i click around on the front end currently i don't have a front end associated to this back end that i do have and then um so now i can uh in in adjustment it says local setup instructions here and and this is where you can actually connect um connect our backend to if for example if you go now if you wanted to also contribute and do so from your machine you can actually uh in your terminal actually around this amplifi pull command but let's start by opening up the admin ui right so just like i mentioned here um um the here's the visual representation of our the app the app that we're going to build so we both have the content and we can um currently we don't have any content of course and also user management and then amplify has these different feature categories which are uh centered around the use case so for example data authentication we can set up functions apis analytics predictions interactions and notifications and all of these will actually provision different aws services for us but we don't necessarily need to um i guess be experts on those or like this is like sort of like a quick start for us to get started with uh for example uh graphql apis so the and one thing that that i often hear with people using amplify is just that that they like that they don't really have to know all of the aws services in detail because they just want to set up authentication it doesn't really matter for them which services are are being used in the backend they just want authentication for instance so i think that's really something that that people like about amplify exactly cool okay so uh i promised to talk about the amplified data store a bit and actually i don't even see it doesn't say date store but it does that wizard here actually does suggest to get start create a data model and this is also something that we'll be able to do in visually in the ui and again i didn't tell you about the app we're building today but i'll do that it's going to be a fika app cause i'm based in sweden and the best thing we here have here in sweden is of course fika and this is where we take a break from work grab a canil bullet which is cinnamon bun definitely coffee but the the most important thing really is to have a colleague or friend to fika with and so this app is gonna just it's it's an app for fun just for finding someone to figure with so and yeah fee guy i'm also based in sweden so vk is one of the most most important parts of of work life in in sweden for sure um so so i think we um pretty much for any app uh would have some sort of data to it and with so all so at this point all i really need to know is that i want to create an app that enables a person with a name to figure with someone and if you want to optionally we can also specify a topic i can set properties for example i definitely want people to add their name um also not here that this app is quite simple but it's absolutely possible to to have models to have several data models and to connect them with relationships um etc so um for now uh this is actually uh what i'll start with for the app so i will hit our fika and name topic hit save and deploy so what's happening when when you've now modeled that data and you're deploying it so now the data bar has been deployed and a lot of things are actually happening in the background now so um if we maybe we can peek here to see what we're set no you can't see that yet but uh and so amplify is now actually spinning up uh a uh both a graphql api so graphql is an api that's for um it's a quite a flexible ipad that lets you sort of uh subscribe to changes in uh where from from your data source and you can also it's flexible in the way that it lets you subscribe to only the changes you're interested in seeing so that's why it's quite lightweight and it's quite responsive so it's nice to use for web apps um the data will actually be stored in a dynamodb table and all of this is powered by success here it's powered by database cloud formation which is our infrastructure as code sort of template language um um and the service used for for graphql apis is aws appsync exactly exactly once again we don't really have to know that it's appsync right so while this is being deployed then um data modeling using admin ui i think it's great because it's visual a lot of people are perhaps not used to data modeling in in a non-visual way doing it using cloud formation for instance yourself things like that but doing it using a visual ui as with the admin ui that's i think that's really great all right so what we can actually do now let's leave it here for a moment so it's actually provisioning lots of resources for us so uh i will actually now um and as you know this will be our that's our back end but we also of course need a front end otherwise uh we wouldn't be front-end developers right so uh all of uh all i've done here but now just like created a new directory that's called the ask me anything frontend demo and now i'm going to run this create react app script which will actually um this is now setting up a react skeleton for us so that's sort of the default uh react app that i will be able to uh run locally and i will do that in just a moment all right and you're using react for this there was a question in the chat about um any specific gis libraries to use as a best practice or i think we can ask it as a broader question what type of frameworks can we use with amplify right so uh amplify support both the android ios uh so react obviously i believe vue and also flutter is the latest and this list kind of keeps on being updated so it's best to sort of check which uh whether the framework your urge did is uh is supported most likely so the most most popular ones are supported right so i also see there's a lot of uh chatter in the the comment section about authentication and cognito but looks like people are helping each other finding the answers there so we can leave that for now but thanks everyone for joining we're 17 17 minutes into the show we're talking about amplify aws amplify and building mobile and web applications using that cna is here with us today to show us some demos around that and talk about the amplify so if you have questions keep posting them in the chat we'll try to get through them throughout the show all right so i'll remove them so now hey it looks like our data model is actually now finally deployed so now back to the to the back end exactly so why are we working a bit in parallel right so full stack euroful stack developer now exactly exactly yes dream finally come true so uh so while uh our react app is spinning up i'll show you the um uh here so i now clicked on deployment status click here for next steps uh and uh some a really nifty thing uh is that um amplify will actually also provide us with code snippets that we can use so here oh yeah so here is the different uh options so if i were to i mean i'm gonna be using javascript and i will most like definitely be creating uh new uh fika opportunities and so so looking at the code snippets here i'll be able to just be able to copy these and and put them into my code and here i can also like that i can pick the the language i want to use and um i want to query or create or update that's great no more googling to find find those code snippets you have them street in the admin ui so and i mentioned before that we need to so while i'm working on setting up the front then but i will also need to um connect my front end with my back end so that's why i'm copying this command here amplify pull and let's see uh there we go yay now uh you've set up uh react just the the basic skeleton of a react application exactly so i'll open up my um let's open up that um so i have my workspace and i have my ask me anything demo front then so i'll just open that in my ide so that this is what the create direct app provided for me so i will be um opening i'm in the store folder i'll open up the app and i'll also be modifying the index so these are the only two files i'm really going to be changing to create this from them so i'll leave this open i'm going back to my terminal i'm going to actually execute that command now to pull the uh back into my front end and yeah explain what happens there now so is that so this you said that this is for connecting your back end to the front end to the react app yes so uh so what this will do is that so of course we need our uh front end to find the backend resources so uh yes to that question there and um um and now um so so i guess i'm so now i'm like really configuring the amplified project locally on my machine so i can keep working on the front end and actually actually also work on the backend so it's just asking me a couple of um what i'm using so i'm using visual studio code javascript it's gonna be a react app and i'm leaving everything as default actually um so this is uh so what it's doing now is like fetching the sort of the backend configuration and now i'll just to make that really clear for you now so if you for those of you really paid attention we'll see that now a couple of changes took effect here for example i have a folder now called amplify uh and it has another directory called backend i have an api i have a actually i have a graphql schema that was generated for me from the data model that i visually created in the admin ui and um and i have the um cloudformation template here too which uh typically tends to be a couple of hundred lines of code uh but thanks to amplify we don't actually have to uh worry about that so much okay so uh and also one more really important thing for you guys to see is that i have my aws exports file as well and this is like pointing out to my backend resources so but no so so far i haven't actually made any changes to it's still that react skeleton and i want to of course modify it a bit so that i will be able to find friends that i can figure with so i need to install a few more dependencies and these dependencies are the amplify core library amplified data stored library and also for the front end i'm using a front-end framework called material ui so i'll just using npm install to install those dependencies and the amplifier dependencies of course are to be able to interact with amplify or with the backend resources exactly right so uh if you just joined us i am here with cine team force today we are building a react application using aws amplifies so both front and back end parts of our application and yes this will be available as on demand i see there's a question in the chat so you can really watch everything cool okay so now uh so now i'm in uh my dependencies are installed now i'm actually gonna modify the index.js and i've cheated a bit i've had this copy this from a file on my laptop so i have i do import of the amplify core library and i also import configuration from this abs export file that was generated for us and i point amplify to the configuration file just so now uh amplifier will know which these back-end resources go with this front-end up and then this is the so this uh the entire app.js i'm actually gonna uh copy my own version of and i've prepared this a bit before um so what so so i as i admitted to gunner before i'm actually not a front-end developer but i'll i'll i managed to put this together and it is um uh it is a uh react app it has a container with a grid and then it has a button um where let's see if i can make this bit wider um it has a button where you can you can say that you're ready to figa and then we'll up open up a pop-ups that's where you can type your name and what you're interested in what interests you in your name um and then it's uses num uh it uses the data store i'm using the reactor use effects so it uses data sort to observe changes in our data store and when as soon as there's a change that's going to be reflected in our front end and i'm also using the create message to datastore.save all right so i think actually i have um all of the first pieces for the first version of the app so let's go now let's see if we can spin this up locally in the meantime there was a question about you ran the amplify pull command and by doing that you're you're using the amplify command meaning that you have the amplify cli installed already on your machine so yes hey that's absolutely that's absolutely correct um so you need to have the amplify cli installed but i think those instructions are also shown in the in the amplify console or in the admin ui how to install the the cli as well absolutely correct um yeah this is ah that's great you guys noticed that okay so it's combined successfully and i need to go to my browser and see if i can hey there it is find a fikka but the app is up and running so as i said it's just a title and a button saying i'm ready so when i hit that so i'm instead interested in all sorts of things but camping is probably one of the things hit zika and that will show up there so uh and one of the nifty things with data store is that uh me as a developer full stack developer don't actually have to worry about writing code for different online or offline scenarios um but instead i can actually um let me see if i can show you how datastore would react in an offline mode so i'll open up a new browser window and um sorry i need to make this one a bit smaller so what i'm going to do now is i'm going to turn on the developer tool so i'm going to set one tab to be offline so hit on network and then i will set this one to offline and like pretend that you're going on the subway and you hit it going into tunnel and so maybe i'm still also interested in i don't know yoga totally could have sheek about yoga by you so i'll hit fika and as you can see this is uh there's no difference in experience for me it's just updates uh for the other tab power that was offline don't see it yet but what will happen when i will um set it back to online then that immediately shows up there so this is one of the benefits with the amplified data store that uh it actually has a sync engine uh that will take care of syncing from distributed data sources and it can also um in case there's a conflict you can also resolve the conflict so do conflict resolution for you and that's a really good point uh and a really great feature if you've ever tried to build offline capabilities yourself i have it can be quite hard especially with those kind of things resolving conflicts for multiple users that are offline changing data and then go online and you need to merge that data trying to to well find ways of how to to resolve those kind of conflicts but that is a built-in feature with datastore um and just now um now i want to kind of come back to the while we're speaking of content and data source and now i'm actually going to open up the amplify admin ui again and uh on the manage tab of managing content here i will actually be able to see all the content and i can also uh update content and of course this so let's see just just to demonstrate if you have updates from other sites that immediately also shows up in my app uh and that's it's pretty cool uh that is so um snappy and uh quick and we've so far we haven't really written any significant amount of code to all to get this in place oh that's really cool and this um it was quite well it was quite simple um data the data model was um quite easy to to work with but you can do pretty complex things with this and use this content management system as a way to then update your content for instance you if you're building i don't know uh publishing website things like that you you can then invite users to update articles update posts and things like that through the admin ui cool okay so the other thing uh i wanted to also show you and something that's pretty much every app developer would need to add to their application is authentication uh so just have to watch this really closely goodnight i know you told me to take it really slow so i'll i'll just pause here for a moment and so now i've uh selected the authentication category and um all i uh so it asked me to configure login make it so this is the search sign up sign in forgot password um reset password that type of load that you can also in a few clicks in the amplify admin ui setup so and i'm what i'm going to do is i'm actually going to leave everything as default i'm going to let users sign up with email uh and for now i'm just gonna hit save and deploy confirm deployment so this this also takes so what is this doing now is actually setting up a cognito user pool and an identity pool meaning that this is where our users will be user info will be stored and allowing them to sign up sign in and uh speaking of how our data model was quite simple now after authentication has been enabled this would actually allow us now going back to the our data model here uh so for those of you who notice what i'm used actually api key as uh to uh as means of authentication but you can actually use cognito user pool as well and you will be able to put uh users in the groups and this allows you to also have this more fine-grained access control and off control it's meaning that for example i could make sure that only i who have created this speak i'm the only one who can delete it or you can all do all sorts of more advanced scenarios there when it comes to fine grained authorization control um all right so while this is deploying now i'm gonna go back to the terminal again and show you another part of the amplify framework and those are the uh maybe the best part for people like me back in developers those are the ui components because it's every time i'm trying to build front then it's a bit of a struggle therefore i really appreciate any help i can get and the amplifier also provides help with uh build the actual visuals of the front down and to do this we actually need to uh install a few more dependencies so let me grab my here so i am gonna add to my i'm um installing the dependency of the uh react ui component and there are different components based on on the framework you're using yes exactly and there's uh and also the so exactly both there are different ur components for uh both the framework you're using but also for the different the categories that we have for example i know that the storage have a ui component too so this is installing so i need to make a change to while we're waiting for my uh authentication to be i can actually i'm going back into my visual studio code so i in my app here i need i'm going to wrap my app in the wrist authenticator higher order component [Music] so i'll show you so i'm gonna import the with authenticator and then i scroll down so i'll i'll just paste it above here so you can see the difference all i'm doing is i'm just we'll adding the width authenticator in front of the function then i can't forget to also add that last parenthesis okay there we go and i hit save so coming back up to it so this is everything i need to do so i need to enable authentication in the admin ui and i need to add the with authenticator of my code of course to stroll the dependencies that's all i need to do to enable um well i i would say quite advanced uh sign in flows for my end users so let's uh see how whether this is oh yeah deployment successful so note here uh i did amplify pull to to cop to grab those configuration uh resources for my front end so still my front end does not know about the new backend resources so the community user pool that we've set up with mp5 so i'll copy the poll command again and i'm going to run it from here right so now it's telling me that before i pulled my environment staging only had the api category which was the data store which was the graphql api and now uh let's see we have a new category here it's the auth category cool so now and i'll go and i'll back to my base code show you the actual difference here that was there now i think if i open up airbus exports we now have the cognitive identity pool uh and the uh community region and the user pool id and so with the pull command you're basically getting the difference that you've made through the admin ui and are then able to well it automatically updates the exports file and i suppose depending on the service you've added it might add additional things as well yes exactly so let's see did i still have my yeah so this is still up and running so i should somewhere here oh no maybe i posted but let's see see what it looks like now oh hey there we go uh so now instead of accessing my fee gap i now get to this please sign into your account and here i want to take a moment to also demonstrate the admin ui user management i'll just from i could of course sign up there but i can also uh as an administrator go ahead and create the user from the from the um right so there we go users created so so i have that if i forgot my password i can of course uh uh there's the ui component for both for re setting password back to sign in create account don't have to already have an account so i will try to login right so since not secure enough to have someone else pick your password for you so asking me to create a new password change to verify my account or email now i should be getting a access code to my email see if i get that this can typically take a moment and if it takes more than a moment then might be in your spam but [Music] yes oh this injury actually got an invitation email from me creating the user all right that i got so while you are going through the authentication uh well the steps of the authentication process uh let's cover some questions in the meantime there is one question about data modeling and that it will create its own well multiple dynamo db tables and well yes that is true it will create multiple dynamodb tables um we had the samantha on a couple of weeks ago to talk about dynamodb data modeling and she talked about single table design and how to to model your data based on that it is not an empty pattern to have multiple dynamodb tables but it is preferred to have a single table design and because there are benefits of using that so if you prefer to have single table design you can of course go the other way around you can create your data model yourself you can create the access or map the access patterns and so on and then you're you're able to to map that data to appsync and use that through amplify but using the admin ui you will end up with multiple dynamodb tables the other question was around cognito and authentication and having guest access are you can you answer that yeah yeah absolutely so i think what you're um what i didn't show you but what you can actually now set up uh when you have cognito and uh querying data so creating the data here and that's uh we have as part of their mall so you can absolutely uh enable authorization mode as cognito user pool and i'll just um it will might break a few things but i'll and then like if i select them all then i can set up now i have now i have the using quinine use pool i have the ability to set up more advanced authorization rules so uh i can here from the uis i can allow any now it does say any signed in users and i can also have a uh a rule that's only for you owner so like a set owner could do all these and sign in usually shall read but yes it's also possible to but you you through i actually don't think you can set uh using conditions but you would need to go and change your uh resolver template in abs app sync but you can actually also do that to set uh those for example if you wanted the uh read to be public then you could you would need to change that but you i don't think you can actually do it from here um follow-up question it says yeah i'm sorry no and i think this is kind of it's like kind of like a good thing to point out too it's like i think we're doing lots of things like i mean clicking a few buttons and it's like working but it is a good point that it's uh uh it's uh having this sort of like easy one-click user interface can get you really far but it's not as flexible as just using putting services together your own but then the nice thing is that it's all backed by uh confirmation and you can't actually uh make those uh changes on your own you're like you're not stuck with only the options you have here in the admin ui right so it is a way of doing things that are um well the way that that we from aws things that you can do use these services set it up in an easy way using the ui or with the amplify cli but if you want to do things different differently well then perhaps you need to go outside of amplify to be able to tweak it the way you want or use specific services in a certain way right so where are we with your authentication oh yes so i yeah i guess you can see it but i did i completed authentication i actually haven't added a button for log out so that's definitely the next step in the demo but as you can see now that um if um now it would allow now our website is protected by only signed in users so preferably there's no way of seeing that i'm signed in but i am all right um and then of course you would be able to add external identity providers and things like that if you wish as well to be able to log in through different kind of of identity providers not manage the users yourself as well yes absolutely all right cool so what's next stanzini right so next uh the next thing i wanted to show you guys is actually how would you um now this is all like running on my local machine and that's of course nice for development but i want to publish and host this for to reach users and also want to be able to do ci cd so i'll just first show you a the simplest way of sort of making your demo public so let's um and i'll just let's see this is something i prepared a while back so this is another project i have and um this is like i said there's several options so the first uh option that i've demonstrated here is um it's actually the it's a similar demo but here i've added the hosting option of s3 and cloudfront and by adding that uh when i when i did the amplify ad hosting i did this from the cli and then i did amplify publish that actually uh built my application and put all the static content in an s3 bucket and enabled web hosting and it put a cloudfront distribution in front of that meaning that it's only the cloudfront distribution that can access the extra bucket so this is a uh so if you wanted to sort of share your app with others this is like a if it's a demo that's a really simple way of doing that uh so the other um last demo i wanted to show you was related to ci cd and how you as multiple people people in your team can actually work on an amplify app together so um let me just let's see how do we how should we explain this gonna yeah and and amplify can help you with that so that's part of the amplify and or part of the the features within amplify so once again you can quite easily set this up without having to to manage multiple different services to get that working yeah so i think maybe this is a good place to start explaining so so you saw me create the ask me anything demo and there we have the back-end environment i said i haven't connected my front-end yet and but i'll show you an environment where i actually have done this so and the backend by default it was named staging and so what i can do is i can clone this so typically back in the day when i was a developer we would have a development we would have feature branches maybe staging and production so an amplifier also supports it so if i do clone i can actually create a development environment and a production environment so i'll i'll show you a project where i've done that and where i've also connected uh let's see maybe it was this one right so here i was playing around with the fine grain authentication and let's see back in environment staging nope this was not it sorry for that oh no of course sorry here it is for the app i can too all right so here i uh for developer i did exactly this i had my startup staging and then i created a dev back-end pro back-end and also staging back-end so uh how does that work with cid and ccd and connected to front-them and i'll show you visually how it works but this i didn't set up this set this up through the uh the console i did set up this through my terminal i think that will make sense to you all you developers are used to working with kit um so i have the um maybe you can see right so for the front then uh i'm using git flow so i have the master branch and i have the development branch and uh now and here i've actually connected the um develop branch is set up with the dev backend right so as soon as i make a commit to my uh to the uh the develop branch that's actually going to provision build and deploy and if i have tests i can run them uh and if i want to see and this is where i can then access that version of the app so this allows you to have that kind of the csd workflow that you're used to that you like publish something on each commit two different branches and apply actually also supports feature branches and pull requests as well so you can get have that sort of seamless workflow that you're used to having it's cool so yeah can you show us a bit about how to set that up yeah absolutely so here so what i did here was actually let me and this is um so i used um a i i just used code commit so i have so i started out with a uh what i pretty much what i did in demo day i created a react app and i made all the changes and then i set up my uh i published this to a github poster i'm using code commit but you can also use github if you're um more most likely more people using that so here i have um my fig app and let's see and oh so i'm all right so i'm on the developer so let's just uh for fun make a change and we can see that how the whole um ccd workflow can work so i'll just make a small change to my app i'm going back to this one was it that i had connected to my github repository and let's see what is a good thing to change yeah right so let's let's be a bit more aggressive on what users are interested in i'll just make a small change just so that um i'll go ahead and i'll do it and actually wait so before i do that um i mentioned that the um amplified back-end so you can actually check if i do amplify take this so now in this project i have multiple amplified backends as well so by running amplify status uh this should tell me that right so the current environment is dead so it's good to sort of make sure that so i'll um [Music] and the orange just checking right move go ahead and i'll make the change and then when i do get push that should be hopefully we should see right so that kicks off the csd pipeline that's set up with amplify so now it's provisioning it will build and deploy and the change will be reflected in my develop frontend which i can check on this url right so and what it does is basically it creates a pipeline for you where you're then able to set up you're able to configure these different steps so the build step you can control how that works as well by by using the build commands or setting up files for build spec things like that and the deployment part in this case was this the one with s3 and cloudfront no this so this was actually no this was uh not the that was a separate separate project so without ccd cool but it will deploy everything and it will then verify that it actually works so these four quite simple steps but it will take care of that for you um and one of the great features i see you mentioned that before as well was to have feature branches so it can automatically add branches for you while you're developing new features within your application as well yeah exactly so uh though but i have to admit i haven't actually tried that one out myself but it uh it does say that you can just you you should just spin up feature branch and then you can um uh or even pull requests to sort of check and if you like them and then you can merge and then so this will you will have amplifier will spin up it back in for you so you can test it and see how it works and then merge back and they will be deployed i've used it quite a lot and i think it's great it doesn't work with code commit but it works with github so but if you for instance create a new feature branch you're developing something or a pull request you can then have it as you said spin up a new environment so you're able to test how that actually works with the same type of of both front and the back end as you have with your production environments and that's the way you want to test features make sure that it's it works in the same way and then you're able to as you said merge have it to develop or staging or whatever the next step in your git flow is if you're using that all right so it has provisioned built deployed and now it's verifying your develops yeah here we go that's very cool hey so uh now that you're admitted you've also used this a bit yourself so i'm curious on though on the let's go back to the uh admin ui uh and and have you tried out any of the other feature categories yet sorry if i've tried i'm just curious on the on the on whether you've gotten a chance to try out the different feature gap categories yet and any any sort of reflections on your side i've tried some of them but not all um i've used analytics and predictions i've used notifications as well and functions of course functions is perhaps the first one to try out yeah and i like it it's in the same way as with the other features you talked about it's it's a very easy way to getting started using these different categories and once again it takes care of setting up these different aws services for you for predictions for instance i i think that's an a great one to get started with in the trying things out so it can use for instance um well i guess it uses recognition in the background to to then have you recognize text or or objects in images for instance so using ai services in a very easy way well there it says predictions powered by translate poly transcribe recognition a lot of different services and you don't have to know all of these different services to get started using it all right we're on the final stretch just four minutes to go cnn i know there was some questions around next js and when amplify will fully support next yes we usually don't comment on on on feature releases or future releases but and there is partial support for an xjs today and if it's something that people want us to to support it is definitely something that we are looking into let's see are there any other final questions before we wrap up um other backend components i think this is one we can answer in just a minute or two sqs sns event bridge if we're able to define them in the same amplify app or if we should use separate back-end stacks um i would a good one i would off the top of my head would probably go for separate stack for that and just point but and of course point to those resources from the front then um what do you think i think yeah we need to put up the it depends banner first because it depends it depends on the use case but um i'd say that [Music] most likely you would build that using a separate stack and then connect those different parts i'm not sure if it's more of a micro services based architecture that then have these different different components then you could definitely use them as different stacks all right so cnn a minute and a half ago thank you very much for joining us today one final sentence about aws amplify no i mean i'll start with that just the same one that you started with it's a great tool to get up and running fast which is often what you want to do when you want to try new things you want to you want to learn i think especially maybe for the learning part it's a it's really uh removes the hurdle for learning new services uh and uh oh yeah i guess we didn't even go in to look at that we can as a next time next step like if you try this yourself go into the aws console and look at the different resources that uh amplify has created for you and then you realize that hey i'm actually up and running with all of these services already so that's kind of a nice way to get a head start for sure and i think one important thing to note as well is that it's not only for for building an mvp or for building some simple applications you can and there are a lot of companies using it for very advanced use cases as well so you can easily get started but you can build very complex or advanced applications using amplify as well all right so thanks to cna once again thanks to everyone watching and this was another edition of the aws nordic's office hours so next time scene is on perhaps we can dive even deeper into amplify or some other serverless use case thank you all and have a great day ahead you

Channel: Gunnar Grosch

Views: 49

Keywords:

Id: SObWYre3wS4

Length: 60min 4sec (3604 seconds)

Published: Mon May 17 2021