Deploying the UI to S3
Start course
1h 59m

For years, web development has continued to evolve alongside programming languages, tooling, and frameworks. It started out with static web sites before moving on to dynamic sites that were rendered on the server. Over time, as JavaScript frameworks gained functionality and popularity, there was a shift towards putting more of the logic into the front end, and using the back-end as a supporting API.

Throughout all the changes in web development over the years, the server has been a constant. Regardless of the languages, tools, and frameworks used, there’s always a server running the code. And that’s something that hasn’t changed. What has changed is that cloud providers now make it easy for software engineers to focus on writing their code, without having to focus on the underlying server.

In this course, you'll build a serverless web application using Python 3.6. You'll use Lambda, API Gateway, S3, DynamoDB, and Cognito to create a multi-user to-do list application based on Vue.js.

Note: The Apple M1 chip isn't compatible with this course currently. We recommend using a different device.

Learning Objectives

  • Outline the architecture of a serverless web application
  • Set up the AWS services required for the app
  • Create and deploy an API using Python 3.6
  • Explain the value of creating unit tests
  • Use a Cognito User Pool within your app

Intended Audience

  • Developers
  • DevOps Engineers
  • Site Reliability Engineers


  • Familiar with AWS
  • Development experience
  • Familiar with the CLI



Welcome back. In this lesson, let's deploy our front-end code to S3 and make sure that everything still works. So first, I'm going to right-click here. I want to do Reveal in Finder. Okay, so we have our code. Great, now let's also open up S3. And the bucket that we determined was going to be our front-end code was this todo serverless ca.

Okay, so let's upload our code. I'm going to pop this out into its own window, going to shrink this down, and I'm going to drag the top three files here, the index. html, node modules, and js, and drag them here. And we can re-expand this. Then clicking Upload runs through the upload process. Perfect, okay.

So now that that's uploaded, let's go to Properties, and let's click on the Static web hosting. And we want to select Use this bucket to host a website. This is our index. html. So let's just click Save. Okay, if we go back here, okay, so now back on our Overview tab, let's select everything. Let's make sure these are public.

Okay, now if we click on the link here and in a new tab, we open this up, you can see we have our application up and running. Okay, so here we have our login screen. Let's try logging in with the same account as before, ben.lambert@cloudacademy. com. And there we have it, there are our three items. So open this back up, so we can check out any sort of failures.

We can see couple of 403s, let's determine what that is. All right, that's just the icon for our favicon. That's not a problem. Let's try and complete Thing 1. And according to this, that worked. Let's refresh to make sure, and there's Thing 1. Let's delete Thing 3, and that seems to have worked as well. So, we were able to get all of this deployed to S3.

So now our code lives out on S3. It's completely serverless. We don't have to manage anything there. Our application, let's jump back to our previous window, our application is being run through API Gateway and Lambda. If we look at our API Gateway, you can see here, we have a resource of todo. So anyone who hits this URL endpoint /todo has these five methods that they can call.

OPTIONS will allow for preflight. GET will get our todo list items. POST will create a new todo list item. PUT will update. And DELETE will delete. Those requests are sent over to a corresponding Lambda function. That Lambda function gets kicked off, sends it back to API Gateway. If we look at the flow here, remember, a client makes a request, it goes into the method, hits the integration, determines the type.

It's a Lambda, so it kicks it off to a Lambda function, and then it sends it back to the client. And if we look at the database, we're using DynamoDB, so we have a completely managed database as well. All right, in our next lesson, we're going to wrap up with some final thoughts.

About the Author
Learning Paths

Ben Lambert is a software engineer and was previously the lead author for DevOps and Microsoft Azure training content at Cloud Academy. His courses and learning paths covered Cloud Ecosystem technologies such as DC/OS, configuration management tools, and containers. As a software engineer, Ben’s experience includes building highly available web and mobile apps. When he’s not building software, he’s hiking, camping, or creating video games.