Launching the Serverless Web Application - AWS Virtual Workshop

Key Takeaways

[Music] hi everybody and thanks for joining us to innovator island day one building a serverless web app for a theme park my name is james beswick i'm a senior developer advocate here at aws solos i'm a self-confessed serverless geek so i've been building serverless applications for a couple of years now before this i was a software developer for a long time and then the product manager for many years as well so i previously worked for multiple different startups as well as bigger companies like usaa and rackspace i enjoy travel coffee and comedy but most importantly theme parks which is why we're all here today now in this page you'll see my email my twitter account as well so during today and during the workshops or even after if you have questions about the workshop or serverless don't hesitate to reach out and send me a message i'll be happy to help so the goal of these five days is for you to learn how to use a range of different aws services to build a real-time web application all of the code that is provided for you so you don't need to actually write any code at all to complete the challenges you just need to follow the instructions in the github repo this is a five hour virtual workshop that happens over five days so we're doing one hour per day and this is a live event this is not pre-recorded so everything you're hearing is happening right now so if you have any questions at all we have a range of different da's on staff ready to answer your questions there's a great opportunity to answer any of your questions about serverless or the workshop in general now each of one of the workshops is consecutive and builds on the last so if you miss an episode don't worry the episodes correspond to modules in the github repo so you can catch up if needed but hopefully you can make every episode now all the slides and replays and resources related to this will be sent to everybody who's registered here today now on the left side of the screen you'll see a q a pod so please please submit any of your questions for our presenters and moderators at this time and we'll address them as they come in at the conclusion of today's presentation there'll be several poll questions during the q a so please provide us with your feedback when you see these poll questions to help us make the workshop better for next time so the workshop is designed to cover a wide range of different serverless services and our goal is to help you see how these work in the real app so you can see how they might work in your own apps and your own businesses i'm going to walk through the workshop steps step by step and do the exercises along with you so the idea is that you'll be following along with the instructions at the same time as i'm doing them as well now as we progress through the workshop there'll be various points where i pause for deployments to happen and other things to go on and i'll stop regularly to dive deeper into each topic and also to answer questions that you raise periodically now the full agenda for the whole five days is in the bitly link posted on the screen here bitly forward slash island workshop we'll post that link also in the q a so you can click it from there so there are a few prerequisites for today you firstly need an aws account if you don't have one go to aws.amazon.com to sign up you can do that fairly quickly if you don't have one preferably you really want to use your personal account with full admin access because the workshop uses lots of different services and it's easier than using your corporate account from a cost point of view this workshop is completely free but the running the steps may incur charges in your account now for most people it should be doable within the free tier most of the services we're using shouldn't incur you any cost but just be aware that it's possible to get charged if you leave services running or you use them beyond the dev and the test this week so to take part in today's activities you will need a laptop or a desktop computer not a tablet if you have a tablet this this won't really work for you so be better to watch along in a recorded session once you have a desktop or a laptop available please use the chrome or firefox browser for optimal compatibility we found that using cloud9 you get best compatibility with those both of those browsers now we will be building a range of different um integrations with services like lambda api gateway dynamodb to name but a few so existing familiarity with the aws management console is helpful but it's not essential remember our goal this week is to help you complete the workshop so anytime you get stuck or you have questions please please please give us your questions in the q a so each of the services will be used in the workshop this week we split into developer tools and back-end services so there's three key developer tools we'll be using first is aws amplify console this helps us eliminate any manual steps in publishing front ends helps us automate the publishing pipeline and create a ci cd pipeline it's also very easy to use you'll get to see that in action code commit is a git compatible recall that we'll be using to store our code you don't have to use it for aws amplifier we're using this in this workshop to keep things simple and we'll also be coding using the cloud9 ide which i'll talk about more in the moment but it allows us to do everything in the browser and keeps things very easy for our q a and moderators to follow along with where you are in the workshop now on the back end there'll be several other services there's nine different services that we're using in this workshop the first is lambda this is the compute on demand service that many people think of as being the whole of serverless but really it's just one of the services in the whole range of different serverless services that are available so serverless includes other things such as api gateway so api innovate island is a front-end application and a back-end application an api gateway is the front door to the back end we also use s3 this is a highly durable object storage available in this app we use it for storing binaries such as user photos and then this quick site this is a business intelligence tool and you'll see later in the week how you can use it to see how the park is performing we start to collect information from visitors to the park and we analyze what their behavior is like using quicksite now eventbridge is a newer serverless service that you may have heard of it's a serverless event bus this allows us to easily decouple parts of the back end to keep our services simple and it makes it really easy for us to add new functionality down the road as the application grows then there's dynamodb this is a low latency high throughput nosql database it's the database behind the innovator island application then there's sqs this is a flexible low latency messaging service it makes it very easy to pass messages between different services but also send emails or sms text messages so you'll be able to get your hands on with that service too now many modern web applications need real-time integration this is the ability to update automatically when the data or state changes you see this in applications like email clients that when email arrives you don't refresh the page the front end automatically knows about this in this workshop we use iot core to achieve this we'll be discussing how this works in detail tomorrow and then finally in the list we have kinesis data fire hose so in the theme park our park guests wear wristbands that tell us which rides they're visiting so kinesis lets us ingest this large amount of data and process it for tools like quicksite so although this is quite a few services we'll cover each of these in more detail as they come out throughout the workshop so let's talk about aws cloud9 this is a fully featured cloud-based ide that runs inside of a browser now the workshop has been tested with cloud9 and it helps us avoid any issues with local laptop builds or local configurations so please use this instead of your local ide as you go through the instructions it also has a built-in terminal and temp space as well and it has provision bandwidth within the aws network see so you don't need to use your own wi-fi when you're pulling down these packages you can simply use the bandwidth within cloud9 so that all being said welcome to innovator island i'll give you a little bit of background on how this was started so this was originally built for the aws re invent in 2019 we had three workshops in total with about 500 people now since then the workshop has expanded to good other modules for other events like serverless days nashville now since re invent we've had about a thousand people who've gone through the workshop in total and it's also used internally too we have systems architects and account managers who also get training internally in with aws using exactly this workshop that you're taking part in today and this workshop is designed to showcase how to build a single page application style app with a serverless back end for large numbers of users so in this scenario the theme park is opening at the end of this week the park provides is will expect to have 50 000 visitors the app provides navigation to these fifty thousand visitors so there's no printed maps or anything like that they'll be using this app to find their way around the park learn about rides that have wait times and also take photos on the rides during their study so this is this week's adventure we have over the next five days so today we will be building and deploying the front end and back end applications now the code and the application has already been built so all we'll be doing is deploying those services and once you get to the end of the day you'll be able to access your deployed application from your desktop browser or your smartphone so to do this we're going to use aws amplify console to connect the front end recode repo this implements ci cd processors automatically which means anytime that we commit a change to the repo it automatically republishes the front end you'll also deploy many of the back-end services that you'll need for the following modules as well we're using the serverless application model that's sam to deploy these resources sam the squirrel is also the park's mascot so you may see him around the park some templates make very light work of deploying serverless infrastructure and you'll find out more about this in module one all of this will be done using the cloud9 ide okay so let's get started so the first thing to do is to go to this url in your browser go to bitly forward slash innovator island we'll post this link in the q a so i'm going to move off this deck now and open up my browser and start stepping up stepping through the instructions so if you go to bitly innovator island it takes you to this github repo where today we'll be just finishing step zero the setup and step one the app deploy so let's start at step one let's step zero set the initial setup so the first part of this is to make sure that you have an aws account and so you can sign up from this link if you don't currently have one i hope you have one if you do have one please log in now we'll be starting to use the services within your account so my second tab up here i'm logged into my aws account now you also need to make sure that you select a region where the workshop is supported so currently this is supported in five different regions i'm selecting the us east one region because that's the one closest to me but you should pick the one that is closer to closest to where you're located so just make sure it's one of these five locations to change the location just go to the aws management console and in the top right you'll see a region drop down showing the list of regions so i'm in north virginia that's us east one so the first part of this is to get the cloud9 ide up and running so if we go to the step-by-step instructions in this section first we want to go to the services drop down and find cloud9 ide in the developer tools so i go to services and i'll search for cloud9 and that's we found the console for cloud9 there so the next steps we're going to click create environment and then enter the name of feedback theme park development so i'll take a copy of that there so i click create environment and paste the name in there great now we're going to click next step and go through and leave the defaults that have been set up and finally hit create environment in step 6. so back here i hit next step these defaults will stay the same now if you are doing development on large scale applications you can choose choose larger instances for cloud nine right now in this workshop we don't need anything beyond the t2 micro and that's included in the three tier allowance but we leave those defaults as set and note down here that if you close the window at all this this instance will go into standby after 30 minutes so leave that checked as well and then click on next step okay then we can review those those settings we put in and just click on create environment now back in the instructions that takes us to the end of step six here and once your id is ready it will open to a welcome screen currently it takes a couple of minutes to deploy so i'll wait for this to deploy before continuing and see if anybody has any questions so while this is starting i'll just review where we've gotten to because i know some people were starting up the aws account so once you've logged into aws account go to the cloud9 services list and click and select create create cloudline environment let me just bring this up so you can see this under environments just click on create environment we're currently following the steps in the setup section the initial setup of the github repo and we're currently at the starting step 7. okay so my cloud9 environment has now been created so i'm going to close down this readme file that starts up what i'll also do is i'll make the font slightly bigger so you can see the fonts that i'm using okay so now hopefully that's now readable to everybody okay so once your cloud9 ide has started you'll see a similar sort of screen where this is ready depending on the environment you're in you might have a dark or a light background you can change that in the themes list in the drop down just here okay so we're in step seven so let's run a few commands in the cloud9 ide so you get a sense of how this works firstly let's run this first command get caller identity i'll copy this and go into the terminal just here that tells me the identity of the person who is running this cloud9 instance this is similar to the who am i command in linux what we're going to do first of all is start downloading the code that we need to use to be able to build out the workshop so first of all let's cd into the environment directory you should already be there but let's just make sure that we're all starting in the same place next we're going to get clone the innovate island workshop this is the same repo that you're looking at these instructions in and we're putting it in a theme park back end directory okay so that's now get cloned all of those different files if you open up the theme part backend area you'll see a directory tree with all of these different directory different files that are now downloaded to the cloud9 ide so at this point your screen should look very similar to this point in the instructions okay so i'll go back now to the instructions this showed the file navigation on the left hand side after cloning the directory and you can see that here on the left hand side in our list of files available and the last thing to do in the setup here is to install jq this just helps formatting json in the terminals make it easier to read so we'll just run this command here i'll paste that in and that just takes a couple of seconds to download and deploy now cloud9 itself is running on top of an ec2 instance so anything you can do with ec2 you can more or less do with cloud9 so if you need certain software packages installed it's very easy to run sudo yum update to pull them into your cloud9 instance okay so that is the end of this setup i'm going to wait for a few minutes just to make sure that everybody is in roughly the same place as it says on the tips it's a good idea to make sure that you have a notepad type application available because we'll be taking down different variable names just that we need to be able to move between different windows open up notepad or vi or your favorite text editor just so you can save those so what we've done in this brief setup is we've set up an aws account or you've logged into your aws account we've opened up a cloud9 ide using that service within the console and we've cloned the initial piece of code that we need to further start deploying into the cloud and ide so you'll see all that code there and we've also installed jq so i'll hold right here just to let everybody catch up for a couple minutes and then we'll start on with the deployment of the back end and the front end i just want to add some of the questions i see here about when you get an error creating an environment this can happen if you have a brand new aws account and you've not created an ec2 instance before so let me just show you one thing you can do to get around that from the console if you go to ec2 just here what you can do if you create and launch a new instance in this and the as a micro instance i'll just open this up you can pick any one of these volumes select the linux ami leave the default checked t2 micro and just go review and launch instance what this does is it basically triggers your ability to use ec2 instances within the console then when you go back to cloud 9 you'll be able to open cloud without any issues another question i have here is about whether the code repo does it integrate with github code code commit is a is a git compatible repo it's not connected to code to a github but if you know how to use git near the system it's very similar okay so what i'll do now is i'm going to go to the next part of this where we start processing the app itself so if you go to the first module deploying the app so this is module one within the code repo that you got to with the bitly link so the key parts of this are that there's a front-end component and a back-end component to the application the front-end component is a progressive web app written in vue.js now the reason why we like using single page applications for building these kind of applications is that you enables you to compile down the application to html css and javascript once you have those assets you can then put them into an s3 bucket and then serve them globally now instead of just manually copying these assets over to an s3 bucket we're going to use aws amplify console to automate this process so although using vue.js in this application whether you're using react or or angular it's a similar process for each of these types of frameworks now the back end itself is fairly straightforward as well it has a dynamodb table and it has a lambda function interacting with that table and uses api gateway to interact with the lambda function we'll be building that this out in the next section you better get to see a diagram of how that works so first of all what we're going to do for the front end is create a code repo in code commit we're going to download all the code we need for that to work and then we'll deploy into amplify console so when and as this diagram shows when your users start to go to your endpoint to load the front end they'll actually be hitting the assets that have been deployed by aws amplify console so to get started go to the step-by-step instructions in this section so first of all we go to the management console click the services drop down and find code commit so i'll go to the console here and open code commit okay so you're just we're now logged into code commit now back in the instructions what we want to do is hit create repository and give it the name theme park front end so i'll just copy this and i'll go back here click on create repository and paste in that name you could provide a description if you choose to but you don't have to and then click on create okay when that's finished it should be almost immediate you get a green banner at the top that shows you the success that that repo has now been created so we scroll down and as shown here you see the success banner so in the second step of this we want to clone the code base we've built we've already built the front end for you so you want to clone that code base and pull all the files you need into cloud9 so this is what we're going to do first of all we're going to use the credential helper to allow cloud9 to sign into git on our behalf it just makes things a bit easier so if you cut and paste these two lines from the second step and you paste those into your cloud9 terminal it's clear here that sets up the credential helper for you you don't get any feedback from those commands it just comes back to a regular command prompt now in step three what we're going to do is create a new directory for the theme park front end and then pull in the zip file containing all that code so i'll do this one line at a time first of all i'll create that directory and you can see the theme park front end has now appeared in the file explorer on the left i'll then cd into the front end and i'll run the final command the w get and this will basically pull down the zip file from this location that's finished you'll see the zip file appearing in our file explorer on the left there okay so now with the zip file downloaded we're just going to unzip that file using a simple unzip command on step four so that's inflated a whole bunch of files we see just within that directory there as the instructions show you should be able to open up that directory in your cloud9 instance you're going to see the same files so once you have these files now on your cloud9 instance the next step is to push that to your code commit repo and then we can connect it to amplify so the first thing to do is cd into the front end directory i'm already in that directory but by doing that i'm just making sure that we're all starting in the same place next i'm going to create an environment variable called aws region this is just to make it easy to reference the region that we're in so i run this command and if i echo aws region you'll see now that it shows us es1 in my case it'll show a different region depending on where you are the benefit of doing this is we can use these environment variables throughout the workshop later to avoid having to type things in manually so then the final instruction here is to run git push and this sets the upstream to that repo that we created in code commit so i'll paste that command there and it's using the credential helper to log into that git repo okay and that's done now if i go back to code commit at this point and i refresh the screen what you'll see now is that the repo we created earlier has all of these different files and these are the files that came from that front-end zip file great so that completes the second section so i'll just pause for a couple of minutes let everybody catch up to this point and see if we have any questions so one question here do environment variables persist when you close the cloud9 environment they don't unless you set them up to do so just like a regular ec2 or linux instance a lot of these variables will disappear when you restart the instance so you can configure it to work that way but by default it doesn't so you'll notice in subsequent days in the workshop we do actually recreate those variables somebody asked what is the cd command on step five let me just review that i'm saying it looks fairly complex yeah so the cd command actually is just changing into the local environment directory within the cloud9 and then switching to the theme park front end directory now this second command is really just a bit of magic we've put together to be able to help you find the aws region and it's querying the local instance using this url that's available from all ec2 instances to find out what the region of the instance is this isn't something you would have to do in your own environment if you didn't want to okay so i'll continue on to the third section now we've got the files deploying the site with amplify console so the first thing to do is to launch amplify console which you can click this link to do or you can find it in the management console in the services drop down so once you open the console you'll see it looks like the screenshot in the instructions and we want to click on the get started button that's underneath the deploy banner so i'll click that there amplify console works for the number of existing repo providers such as github bitbucket hit lab or code commit so you can choose it to anyone you like today we're using code commit because it's just easier from the point of view of setting up the workshop you can also deploy without using a get provider at all if you prefer so on step three click under the get started with amplify console select code commit and then click on continue now um this will automatically discover any of the repos that we've we've created so far so when you click on the recently updated repos drop down you'll see the theme park front end and the only branch available is master so make sure you select both of those and then click next okay we go back to the instructions now on the configure build settings page we're going to leave the defaults don't need to do anything there just click on next and on the final review page we'll review these settings and then click on save and deploy so this page we don't need to do anything other than click on next now on this page we just need to press save and deploy and this causes amplify console at this point to go and connect to our repo look at what the code is there and start deploying that build now this actually is smart enough to realize the framework we have is view you'll see that in the app settings so it also runs the view build process that otherwise you'll be doing manually once this starts building it starts a pipeline where there's four different steps to the build process and you'll see that in the next screen i'll wait here just a couple of minutes let me just see what this issue is i'll click on save and deploy again i'll just see if we have any questions so one of the questions i see is amplifiers not in my region yes if you find um please launch the workshop from one of the five regions supported if you want to see the region list back in the instructions up here in the setup piece in xero just here you'll see there's a region selection in this part here so please select one of these regions but all the services available that you need to complete the workshop i'll just go back to where we were here okay so we're having an issue with amplify console here so i'm going to have a look at what is happening just there okay so it looks like now amplify is working so if you get that error just click through save and save and continue and try again looks like a temporary error occurred so in this continuous pipeline what happens is that amplify in the background is using a docker container to provision your application so it copies all the code from the git repo runs a build script and then starts assembling everything it needs for the vue.js application what it then does is it creates an s3 bucket where it puts all your resources and then cloud formation template a cloud formation i'm sorry cloudfront distribution which points to that s3 bucket so these are all steps you would do manually to deploy applications yourself if you were serving through s3 and cloudfront but you can do it completely automatically using amplify console so we'll be using this several times during the workshop and each time we make a change to the underlying repo it will automatically discover that and automatically start the build process for those steps now this pipeline you can see where it is on the screen at any point in time right now it's provisioned and it's con it's considering it's continuing with this build process that's happening now the next step will be the deployment and then finally it verifies the build to make sure everything is okay at that final step and find that final step what happens is that this url just here becomes a publicly served url of your application okay so we're just waiting at this point for amplify console to finish deploying okay so that deployment is now ready so if i go back to the instructions just here you'll see that once you have the four check marks available we can then open the published url in the browser so let's go back to amplify console and i'll click on this link here and it opens in a new tab now if i press f12 on my browser opens the console window where then i can see what it will look like more it looks more approximated for a mobile desktop or a mobile device so at the moment the park only shows us the map we can zoom in and out of the park map but it doesn't show us any additional details because the front end has not been connected to the back end at all so although we've now successfully connected or deployed the front end the next step is to connect this to the back end so in step four you can now click that link like i just did and go through looking at what your deployed amplifi console app looks like in your web browser so your url looks something like this it begins with dot dot master dots a long code dot amplify app you can also take this url and run it on your phone so you can see what the application would look like from a smartphone so once you've seen that let's continue with the back end part of this so on the back end just for now we have a list of rides that we need to be able to connect to the front end and restoring that list of rides using dynamodb we create an api gateway endpoint that will then use the lambda function to fetch the list of rides from dynamodb so to set this up let's get down to the section that says step-by-step instructions so you need to make sure your cloud9 instance is still running and we're going to create a deployment bucket for sam so in step 2 these three instructions here the first one we're going to fetch the account id from the instance itself so i'll just clear all of this if i paste that now if i echo account id you'll see that it's picked up the account id that i'm using to deploy this application then we'll create another environment variable for the deployment bucket now s3 names have to be globally unique across all aws customers so the reason why we do it this way is that by appending your account id to the end it helps us make sure that we've got a globally unique id for you so i create that environment variable and then finally if i echo out this environment variable you'll see this is the name of the bucket that we want to create now for step three we're going to create the bucket so i'll copy this command here this is using the aws cli to create the bucket so just by running that it's going to use the deployment bucket environment variable and then confirm that that bucket has now been created so what we need to do now is actually run the sound deployment templates to start building out the back end so first of all in step four we're going to change directory to the right controller application set cds into that directory then there's two commands to complete a sound deployment the first is sam package that takes the template and creates a packaged version of it and uploads it to our s3 bucket this is a fairly small application so this will happen very quickly that's just been uploaded and then finally we can deploy what we've just packaged using the sam deploy command great so this will take just a couple of minutes to finish the deployment while that happens i'm going to show you what a sam template actually looks like so if we look at what's in that directory the app deploy directory ride controller and also local app a typical template looks like this so same template is nothing more than yaml it's nothing too complicated but the most important thing about it is it defines resources used by our application so just here you'll see that there's a dynamodb table we specify some of the properties we want to create or a bit further down there's a lambda function and in the yaml it specifies where the code can be found and what the runtime is so all of these things are things you could do from the console directly if you wanted to but as you start to build serverless applications it becomes much much easier to automate the build of these back end resources by templating them now the first time we run a samsung plate like this it takes a little bit of time because it's never been run before so it has to build all the different resources but when we start to deploy version two and version three cloud formation is smart enough to not have to tear down all the resources it simply deploys the differences so we'll give this a couple of minutes just to finish deploying and then i'll look at any questions we have and continue from there so i'm seeing on some of the questions that several people were having errors from amplify and getting the error that i saw earlier on the screen if that's happening please just hold there for a while and retry um in a few minutes see if it see if the error goes away or you could try a little bit later this recording will be available so if you have to stop because of that i'm very sorry there's a problem but you will have to catch up later if needed also so one question here what ide is the instructor using so i'm using cloud9 ide you can launch that from the management console so from your aws console just go to the services drop down and look for cloud nine and from there you just hit create environment and that's how you create your cloud9 ide and it looks like this so one of the questions is how do we access this tutorial later so the github repo that you've gone to and that bitly link the innovator island bitly link is publicly available you can go to that anytime you like the only modules i'm covering today are zero the setup and one the deployment and you can go to get to that at any point that you need to this video of this session we're running today will also be sent out to all attendees if you want a guided walk through those modules otherwise you can follow the instructions in the github repo okay so my deployment here is now completed you'll see successfully created and updated the stack so what we can do now we now want to deploy the main part of the application so i'm going to change directory into the sam app directory here now this one's slightly different i'm going to run sam build and what this does is it runs the package.json file and installs any of the modules needed for the application through various functions that are there there's only a couple of functions here so it's pretty fast and then just like before we run sam package this package is the template yaml file and uploads it to our s3 bucket and that again is pretty fast because it's a small application and then i'm going to deploy that to my aws account and again this part will just take a couple of minutes because it contains all of the resources used by the application so you'll see in the instructions here it contains a number of different lambda functions s3 buckets a dynamodb table and other resources that are packaged together so we'll just wait for that to deploy and i'll come back to the instructions in just a moment so one of the questions we have about credits for doing this workshop so we're not issuing aws credits for this workshop but most of what we're doing here is available within uh free tiers so if you run through these steps for most people who have an account that's less than 12 months old it should be covered by the allowance that's available there but even if you incur a cost it should be fairly minimal at the end of day five i'll show you how to remove resources to minimize the cost of running through the workshop one of the questions is about amplified consoles so i'm only showing you the very basic capabilities of amplify console but you can add multiple stages and build your own deployment scripts and it's a fairly elaborate service so if you have a large production scale application and you deploy spa style apps generally this is a great way to do this because it lets you have multiple stages and lots of different rules configured for your deployments one of the questions from somebody is about if you have to miss the last workshop how can you catch up so on day five if you missed that workshop don't worry we'll be covering the very last module in the in the workshop in the github repo but these videos will be emailed out to all of the attendees on this call so you can catch up there also i put my contact details on the opening closing slides so if you have any questions following this feel free to contact me anytime you like okay so that now has finished my deployment is complete so i'll continue back to the instructions to where i was so i'm on step eight configuring environment variables so i'm going to copy this block of code here for these commands now this looks complicated it's really not that hard what it's doing is it's pulling environment variables from the last cloud formation deployment they're things like bucket names so we can use them later on so i'll just copy this list here and paste that into my cloud9 instance and you'll see the four echo commands just echo back the bucket names that we'll be using a little bit later as the instructions show it looks very similar so that we have the dynamodb table we'll be using to get the list of rides for application but currently this table is empty so the next step is to populate the table so in step one i'm going to cd into this directory and then i'll run npm install just to install the packages used by the script okay finally i'm going to run this script you'll see in this this command here is using two of the environment variables that we set up in the earlier step let's take a quick look at what that script did so if i go to that directory one app deploy and local app and open import data this is a very simple node.js script and all it's doing is uploading the contents of a csv file into dynamodb so down here you'll see there's a line dot using the document client to batch write that information into the database and in our table csv file this is a csv file containing a list of the rides and where they should appear on the map it's always done in that last and upload it to our dynamodb table okay so at that point you'll see the same sort of output i had there showing that this uploaded those entries into a table let's now test what we've done with that table and the configuration that we built with the back end so in step one let's do a table scan to make sure that the items are actually in the table so here if i paste this command it returns a list of a blob of json with 27 records indicating those are the items that have been added to the table and then now we can test the endpoint to make sure that's working so if we copy this final command here this will use the cloud formation stack to figure out what the endpoint was called so i'll just paste that in there and that is the api gateway endpoint that was deployed now if we click on that endpoint and click on open the browser will call that endpoint and you'll see that all the json that it returns so that's an api gateway endpoint we can prove that that's actually working with that browser call so back to the instructions now you've got this endpoint that's appeared and you've tested the end point you can see that it's retrieving that list of entries from dynamodb what we then need to do is give this endpoint to the front-end application so it can call the endpoint to get the list of rights so in these instructions what we're going to do is open the front end code and look at the source directory to find where the endpoint is added in the config.js file so looking at these so i'll go back to the cloud9 instance and i'll close down this directory and go to the theme part front end and then open the source directory i'll close down this to make it a bit clearer and there you'll see there's this file called config.js now in config.js each part of this is separated out by modules throughout this workshop so we only worry about module one today so that's the part that we need so in this instruction we want to make sure that we can put the api endpoint into the config just there so we're going to copy that api and paste it into this file so just down here i'll copy this url to my clipboard and paste that into the init state api value now in cloud9 anytime you have a file that's not been fully saved you'll see a little circle appearing up there so make sure that you remember to save the file so you can go to file save or you can press ctrl s but as soon as you save it that little circle will disappear so at this point what we've done is we've added the api endpoint to the front end code but now we need to commit the code back to our repo and let amplifier console detect that and rebuild the front end for us so that's pretty straightforward fortunately all we have to do is commit the change and the rest will happen automatically so our cd into this front-end directory then we're going to commit this change it'll only be a one file change it's only the config.js file we've changed and then we'll say git push so this pushes the code to code commit now what's interesting is in step three if we then go back to amplify console what you'll see is that it started a new build even though we didn't tell it to and the reason for that is that we've told amplify console to watch this github repo this coconut repo so every time we push a change to that repo it starts a new build process now this is very useful in production systems because it does a lot of testing in the build for it so if there's a problem with the build the existing version stays running and is available to our customers while the problematic build will be rolled back whereas if the build is okay it's then staged out correctly and then users are switched across at the very end once the deployment is successful so this saves a lot of time instead of doing it manually where you might be copying files across to s3 buckets again this build process takes a couple of minutes but once it's available we'll be able to look at the changes we've made in the live production front end so i'll wait now just for this build to be complete i'll just check to see if you have any questions see it's one question about amplified deployments about the blue green approach so yeah exactly that basically when you deploy new versions in amplify it's deploying a separate stack completely and only when it passes all the various tests will it then point production users across to that new version so it's a great way to deploy these sorts of applications one question is about using sam over serverless frameworks so these are both frameworks that automate cloud formation for us and make it easier for us to use cloudformation for serverless development essentially they both have different pros and cons to using them serverless framework has a plug-in ecosystem whereas sam has deep integration to all the different aws services so it's worth trying both and seeing which one you prefer but the most important thing is you choose to use a framework because it's a lot easier than doing things directly through the console so more questions about amplify console yes you have a lot of capabilities with amplify consoles such as using custom domains um setting your own environment variables configuring um tls and ssl certificates automatically and that kind of thing so the the vanilla out of the box settings choose sensible defaults for us to deploy an application for a workshop like this but for all of the things you want to do in live production web apps it actually has a lot of capabilities you can automate to make it a lot easier it also has a very generous free tier allowance so if you want to try using this for any of your home projects or just smaller projects generally speaking you can do that with incurring any costs without incurring any cost so my build process is still continuing here with amplify console let me just switch back to the instructions so we're just waiting at this point in this very final stage of part one to deploy this to amplify console and then we'll verify that those changes have happened currently the provision part has happened the more currently in the build process now here you'll see my build has failed so what we can do is dig in here and see what has happened it's asking me to re-authenticate with my build provider so i'll just do that quickly what i'm going to do is just make a slight change to this file so we can start another build i'll just do another deploy to get this will force amplify console to do another build so it looks like we're having a few issues amplify console today with a couple of errors but typically what would happen is that with these kind of changes we'd simply go through the different check marks and complete the deployment but it's interesting when you have a problem like i just had there the existing application continues to run so it doesn't take down the existing applications is a safe way to do these kinds of deployments so once that's completed with this what you'll be able to do is be able to refresh that url and see the rides appearing on the map so we'll just see if our build process here will continue this time the provision happened much more quickly so the good question from gina in the q a saying how do we know how does amplify console know that the new deployment is okay uh before switching over to it well what you can do in a production system is you can produce your own build your own build script for the docker container it's using to make sure it passes the build there you can also use tests in your view script so if you have test run it will run through the entire gamut of tests if any of the tests fail there it won't continue with the deploy in this workshop we're not using that so the builds generally are pretty straightforward and will generally pass all the tests and be deployed one of the other useful things you'll notice is it takes screenshots of the of the application and it does this with different device types it's an easy way to see what your application looks like using different devices you can see that in the list of all of these different previews in the menus on the left hand side these are all the different build settings that you can apply as well so this is a vanilla script but you can apply any type of build script that you need to okay so my deployment is now completed here so i'm going to open up this url again now what you'll see is different this time it's the first time we just had a map whereas now we have rides appearing on the map in all their different locations now if i open up my console in the browser i was refresh you can see that the application called this api gateway endpoint and received this list of rides and then populated the map so what we've successfully done here is connected the front end to the back end and this is on our second deployment using amplify console so we're at an hour for today but i just wanted to give you a quick recap of where we are so today we set up cloud9 as our ide and we deployed our front end and back end applications now i know a few of you had some issues if you're not caught up don't worry you can continue to do that after this session is finished now at the moment the front end doesn't do very much other than pull the list of rides from the database but tomorrow we're going to start adding more core functionality to make it more useful to park visitors this will include things like real-time ride updates so after this workshop today please don't terminate any of the resources you created in your aws account because we'll continue to do everything there tomorrow cloud9 when you close the browser will automatically suspend itself after 30 minutes of of being switched off and not being used so when you come back tomorrow it will be usable again so hopefully you enjoyed day one of this theme park workshop give us some feedback in the polls that we put out at the end um on your console let us know what you liked and didn't like and how we can change this we'll continue answering questions in the q a window for the next few minutes and alternatively feel free to reach out to me on email or twitter otherwise thank you very much for your time today and i'll see you again tomorrow in the same time same place thanks once again