Building a Serverless Web App on AWS Services

In this tutorial, you'll learn to build a simple web application using the following AWS Services:

Here's the architecture diagram:

For the lambda functions, we will use a Node.js runtime environment with the Javascript SDK.

Everything will be made from the AWS Management Console, without external frameworks, SDK, or command-line interfaces (CLI).

The sample web app allows you to create/edit/delete courses. This is how it looks like:

It's a single-page application made with React and Redux. The credit for this application goes to Aries McRae. For this guide, I just modified his React CRUD boilerplate.

You can clone the app from this GitHub repository and test it locally with the included Express server.

This guide won't explain how the app is made. So don't worry if you are unfamiliar with React and Redux, as this tutorial will focus on building the API and setting up all the AWS services.

The API works with two data structures, course and author:

Of course, you'll need an AWS account. If you don't have one, sign up here. Registration is free, and all the services used in this tutorial are within the AWS Free Tier, but you'll need to enter a credit card number in case you exceed that free tier.

The most difficult step is verification, in which an automated system will call you, and you have to enter a PIN code. It doesn't always work and you may have to ask the support team to call you to verify your account.

Once you have created your account, you automatically sign up for all services in AWS. However, it's a good practice to create an admin user instead of using your root account for day-to-day operations. Follow the steps in this guide to do this.

Now let's start by creating the tables to store the app information in DynamoDB.

DynamoDB is a fully-managed NoSQL database that stores the data in key-value pairs, like a JSON object:

There are no schemas so every record can have a different structure. The only restriction is that the field(s) defined as the partition key must be present in all the records.

Based on this partition key, DynamoDB store data in different drives. An efficient distribution will make accessing the data as fast as possible, so it's important to choose a good partition key.

This way, the partition key can become the primary key, but you can also use a combination of a partition key and a sort key as a primary key. For example, if you have multiple records with the same course ID (the partition key), you can add a timestamp as a sort key to form a unique combination. In addition, you can also have secondary indexes for any other field (or combination of fields) to make queries more efficient.

DynamoDB gives you a lot of options. You can learn more about it in the developer guide, but for now, let's dive into creating a database for our API.

Open the Services menu and choose DynamoDB:

Make sure you're in the correct AWS region (there's a DynamoDB database per region) and click on Create table:

Enter the following information, leave the default settings checked and click on Create:

If you see the following message:

Your AWS account does not currently have the DynamoDBAutoscaleRole, but there's no problem if you're not going to use the auto-scaling service or if you're not sure what it is. If you want to use it, follow the documentation link to add the AmazonDynamoDBFullAccess and a custom inline policy to create the autoscale role automatically when you create a new table with auto scaling the first time, it's all in the documentation.

It might take a few seconds, but you should see a confirmation page like the following:

Take note of the table's Amazon Resource Name (ARN), you'll need it later.

In the Items tab you can query your table or add items:

I'm going to leave it empty for now, but I'll add items to this table when the application is finished. Meanwhile, I'll go ahead and create a new table for the authors with the following information:

After the table is created, take note of its ARN.

Now, in the Items tab, create some authors, for example:

Now let's create the lambda functions that will use these tables.

AWS Lambda is a service that allows you to run functions upon certain events, for example, when data is inserted in a DynamoDB table or when a file is uploaded to S3.

In this case, a lambda function will be run whenever a request hits one of the API endpoints you'll set up in the next section.

At the time of this writing, a lambda function can be written in Node.js, Python, Java, or C#. This tutorial will use Node.js.

You can learn more about AWS Lambda in the developer documentation.

We'll create six lambda functions:

Let's start by creating the get-all-authors function. Open the Services menu and choose Lambda:

Click on :Create a function*:

And then, with the Author from scratch option selected, enter the following:

When selecting the option Create a custom role, a new window will open to allow you to create a new role.

Alternatively, you could choose the option Create a new role from a template(s) and choose the policy template Simple Microservice permissions. This template will give you permissions to read, create, update, and delete items from any table:

However, this is not good practice; custom services should require as few permissions as possible to reduce overhead and maximize privacy and security.

So in the window to create a new role, enter get-all-authors-lambda-role as the role name:

At this point, it will only give you permissions to write to the CloudWatch logs, so click on the Edit link and modify the policy document so it looks like this:

Just replace the DynamoDB Scan Resource field with the ARN of your author's table. This will give you permissions to perform a scan operation to read all the items of the author's table only.

Finally, click on the Allow button.

Back to the window to create the lambda function, choose the role get-all-authors-lambda-role in the Existing role option and click on Create function:

After the lambda function is created, scroll down to the Function code section:

Enter the following code:

First, you require the AWS SDK and create a DynamoDB instance passing the code of the region where the database is located, for example us-east-2 for Ohio (find out your region code here), and the API version (2012-08-10 is the latest at the time of writing this tutorial).

The exported function receives three parameters:

Inside the handler function, you execute a scan operation to get all the items of the authors table.

Any error that occurs is passed to the callback function. Otherwise, the callback is executed passing the data returned.

Keep in mind that the scan operation will return up to one MB of data. If there is more data available, a LastEvaluatedKey value is included in the results along with the number of items exceeding the limit to continue the scan in a subsequent operation.

You can know more about the available methods of the AWS Javascript SDK for DynamoDB in the API documentation.

Now click Save. Then, if you click on the Test button, a window to configure some input properties will open:

This function does not take any parameters so give it a name and just click on Create and then on Test one more time.

You can check the execution results at the top of the page:

Or in the Execution Results tab below the code editor:

This is a sample output:

As you can see, every key/value pair inside Items also contains the type (S for String), so let's modify the format with a map function to only return the key and the value for each item.

Replace the code of the else block inside the callback function of scan with the following:

If you save and then test the function once again, you'll get as result a much cleaner object:

Now follow the Functions link at the top of the page. Your function should appear on the dashboard:

Next, we need to create the rest of the functions with their corresponding roles and policies. Of course, you can create one role with a full access policy and use it for all your functions, but remember, that is not the recommended approach. Custom roles that minimize the number of permissions are better in the long run.

You can also create the policies and roles from the Identity and Access Management (IAM) console with the visual editor, first creating a policy with required permission and then creating the role that will contain that policy.

But probably it's faster to enter the policy manually and have AWS create both the policy and the role for you. So here are the policies and the code for each function.

The policy to create a new course:

And the code for the corresponding lambda function (save-course):

To test this function, you can configure a test event with the following data:

To update a course we're also going to use the putItem operation so the policy is the same and you can reuse the role of the previous function.

The code for the corresponding lambda function (update-course) is also similar, with the only difference being that the id and watchHref fields are not generated:

To test this function, you can configure a test event with the following data:

The policy to get all the courses:

And the code for the corresponding lambda function (get-all-courses):

The policy to get one course:

And the code for the corresponding lambda function (get-course):

To test this function, you can configure a test event with the following data:

The policy to delete a course:

And the code for the corresponding lambda function (delete-course):

To test this function, you can configure a test event with the following data:

And these are all the functions you'll need. Now let's expose them to the world via a REST API.

API Gateway is a service that allows creating a REST API fully managed by AWS that acts as the front-end for other services.

Open the Services menu and choose API Gateway:

Press Get started:

You can create an API with a Swagger file here we're going to create the API manually, so choose to create a New API and give it a name:

This will create a new API and you'll be ready to start adding resources (URL paths) and methods (GET, POST, etc.):

Now open the Actions menu and choose Create Resource. Enter a resource name and check the option Enable API Gateway CORS:

By default, the URL path will be created from the resource name. Cross-origin resource sharing (CORS) is a mechanism that allows a web page to request resources hosted in another domain (which is going to be our case here). With this mechanism, the server sends some headers to tell the application that is OK to access the resources on that different server.

Next, click on Create Resource:

An Options endpoint is created because the client sends a preflight request to see if the resource is available and if it contains the CORS headers:

Now to start adding methods to the /courses endpoint, select it (don't select the root / endpoint), open the Actions menu and click on Create Method option:

We're going to start with the POST method, so select this option and click on the check icon next to the menu to set up the method:

As the Integration type choose Lambda Function, then the region where you created your lambda functions, and enter the name of the function that will be associated to this method (save-course):

Confirm the permission to invoke the lambda function:

By default, API Gateway will pass the request body to the lambda function and return to the client the object returned by the lambda function. Since the client is going to send exactly what the lambda function expects and the lambda function is going to do the same, there's no need to configure any request or response body mapping templates.

However, probably it's a good idea to use a model to validate the request.

So go to the Models section and click on Create:

Give it a name, enter application/json as the Content type, and as the model schema, enter the following:

Models use the JSON Schema specification. You can learn more about it here.

Click on Create model and back to the POST method click on Method Request:

In Request Validator choose the option Validate body, in the Request Body section add the model for the application/json content type and confirm all these choices:

Now if you click on TEST:

You can test the POST endpoint by entering a request body like:

Everything should work correctly:

If you remove one or more attributes of the request, an error should be returned:

Moving on, we are also going to need a path like courses/web-component-fundamentals, where web-component-fundamentals corresponds to the ID of the course we want to update, delete or select one course.

Select the course resource and from the Actions menu, create another resource, this time just adding a path variable using brackets (and enabling CORS):

Click on Create resource to create it:

Next, create a PUT method and link it to the update-course lambda function:

Now the thing with this operation is that the ID of the course is in the URL, and the rest of the attributes are in the request body.

In this case, we'll have to use a body mapping template to send all the information as the lambda function requires it.

So select the PUT method and click on Integration Request:

Then, in the Body Mapping Templates section, choose the option When there are no templates defined, add a mapping template for the content-type application/json, click on the check icon next to it, and enter the following template:

The mapping template uses the Velocity Template Language (VTL). Here's the link to the relevant section in the AWS documentation.

The $input variable gives you access to all the request data, while $input.params() to the request parameters from the path, query string, or headers (in that order) and $input.json() returns a JSON string from the request body. You can know more about the $input variable and their functions here.

Also, notice that the ID has to be "converted" to a string by enclosing it in quotation marks, while the rest of the data since it's already sent as a string, don't have to be converted.

Click Save and test it with the path variable web-component-fundamentals (assuming the record exists in your database) and the following request body:

Everything should work correctly:

If you like, add a model to validate the request, just like in the case of the POST method.

Now, applying what you have learned, create a DELETE and GET method on the /courses/{id} resource, linking them to the delete-course and get-course functions and passing only the ID with the following template:

Don't forget to add a GET method on the /courses resource for the get-all-courses function.

And another resource, /authors, for the get-all-authors function.

When you're done, you should have something like this:

Now, we need to add the CORS header to all the methods (the CORS option you chose when creating a resource only adds the CORS headers for the preflight request).

Select the /authors endpoint, click on Actions and choose Enable CORS:

Deselect the OPTIONS method, click on Enable CORS and replace existing CORS headers:

And confirm to add the CORS headers to the GET method:

Do the same for all the methods of the /courses and /courses/{id} resources (except for the OPTIONS method).

Finally, to deploy the API, go to the Actions menu and choose Deploy API:

Then, create a new stage, give it a name, optionally a description and click on Deploy:

After the API is deployed, you'll get the URL to invoke it:

For example, in my case, the root URL of my API is https://hcqxdqvii3.execute-api.us-east-2.amazonaws.com/v1 and to get the course with ID web-component-fundamentals, I'll have to use the URL https://hcqxdqvii3.execute-api.us-east-2.amazonaws.com/v1/courses/web-component-fundamentals.

At this point, you can use curl or Postman to test the API:

Now, the only step missing is uploading a client app for our API to S3.

Clone the app from this GitHub repository.

In a terminal window, go to the app directory and execute npm install to install the dependencies.

Next, go to src/api/serverUrl.js, and replace the exported value with the URL of your API.

If you want to test it locally, execute npm start on the terminal.

Then, execute npm run build to build a version of the app ready for production. You can find the output files in the build folder.

Now, let's use Amazon S3 to host the app and go completely serverless.

Amazon S3 is a storage service that can also function as a web server.

In S3, you put your files in buckets. You can know more about S3 in this developer guide, for now, let's create a bucket.

Open the Services menu and choose S3:

Click on the Create bucket button and enter a name and the region where your bucket will be created:

Make sure you don't put any spaces in the name. Also, the name has to be unique across all existing names in S3, so use your domain name or something unique.

Next, click on the Create button, we'll take the default values for the properties and permissions tabs.

Once the bucket is created, click on it, and go to the Properties tab:

Click on the Static website hosting option and select Use this bucket to host a website:

Since this is a single-page application, enter index.html as the Index and Error documents. Copy the URL that S3 gives you and click Save.

Next, in the Permissions tab, select Bucket Policy:

Enter the following policy to grant read-only permissions to your bucket, just change examplebucket by your bucket name (in my case net.eherrera.serverless-demo):

Click on Save to apply the policy:

Now go to the Overview tab, click on the Upload button, drag the content of the build directory and click on Upload:

Once the upload has finished, go to your app using the URL you copied (or go back to the Static website hosting option in the Properties tab to get it):

Optionally, you can create another bucket to store the logs of the web server, you just have to enable the Server access logging option in the Properties tab.

However, I would highly recommend using CloudFront.

CloudFront is a Content Delivery Network (CDN) service that will copy your app to edge locations around the world to improve the speed in which your app is served to your users. You can learn more about it in this developer guide.

Open the Services menu and choose CloudFront:

Click on Create Distribution and under the Web section click on Get Started:

In the Origin Domain Name select the bucket that contains your app, Origin ID will be populated:

Scroll down and under Distribution Settings, set the Default Root Object value to index.html and click on Create Distribution at the bottom of the page.

Wait a few minutes until the deployment has finished, and then click on the ID of your distribution:

In the General tab, you'll find the new URL of your app in the Domain Name row. (You can use the HTTPS protocol for your URL if you prefer):

And that's it!

The idea of a serverless application is interesting:

In this tutorial, you have learned how to use AWS's API Gateway and Lambda functions to build a REST API that performs CRUD operations on a database built on the AWS DynamoDB database framework. This guide also covered how to host this API on S3 in a single-page application that can be distributed worldwide using CloudFront.

This was just a cursory look at each of these technologies; there is a lot more to learn about each technology and about other AWS components as well!

In case AWS excites you, some interesting projects would include authenticating users with Amazon Cognito or using a framework like Serveless or a service like AWS CloudFormation to simplify the managing and deploying of serverless applications.

Thanks for reading. I hope you found this guide informative and engaging.