{"slug":"building-a-serverless-web-app-on-aws-services","frontmatter":{"title":"Building a Serverless Web App on AWS Services","slug":"building-a-serverless-web-app-on-aws-services","date":"2018-05-18T15:06:20.000Z","categories":["aws","cloud","deployment","javascript","nosql","react","serverless","web development"],"source":"myBlogStorage/public/posts/building-a-serverless-web-app-on-aws-services.json"},"markdown":"## Introduction\n\nIn this tutorial, you’ll learn to build a simple web application using the following AWS Services:\n- [AWS DynamoDB](https://aws.amazon.com/dynamodb/) as the database\n- [AWS Lambda](https://aws.amazon.com/lambda/) to create functions that will read and write from/to the database\n- [AWS API Gateway](https://aws.amazon.com/api-gateway/) to create the REST API that the web application will use\n- [AWS S3](https://aws.amazon.com/s3/) to host the web application\n- [AWS CloudFront](https://aws.amazon.com/cloudfront/) to deliver the web application from a location near to the user’s location.\n\nHere’s the architecture diagram:\n\n![architecture diagram](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/2965d6f2-9e6b-4a3c-855e-97eef7f22c43.png)\n\nFor the lambda functions, we will use a Node.js runtime environment with the Javascript SDK.\n\nEverything will be made from the AWS Management Console, without external frameworks, SDK, or command-line interfaces (CLI).\n\n## Sample WebApp and Credit\n\nThe sample web app allows you to create/edit/delete courses. This is how it looks like:\n[http://courses20010.s3-website-us-east-1.amazonaws.com/](http://courses20010.s3-website-us-east-1.amazonaws.com/)\n[https://d1td28opf6foxs.cloudfront.net/](https://d1td28opf6foxs.cloudfront.net/)\n\n![demo](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/db216707-2ba9-4229-acb7-d2c76ed9413b.gif)\n\nIt’s a single-page application made with React and Redux. The credit for this application goes to [Aries McRae](https://github.com/ariesmcrae). For this guide, I just modified his [React CRUD boilerplate](https://github.com/ariesmcrae/reactjs-crud-boilerplate).\n\nYou can clone the app from [this GitHub repository](https://github.com/eh3rrera/react-app-frontend) and test it locally with the included Express server.\n\nThis 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.\n\n## How it works\n\nThe API works with two data structures, `course` and `author`:\n\n```json\nCourse:\n{\n id: \"web-components-shadow-dom\",\n title: \"Web Component Fundamentals\",\n watchHref: \"http://www.pluralsight.com/courses/web-components-shadow-dom\",\n authorId: \"cory-house\",\n length: \"5:10\",\n category: \"HTML5\"\n}\n\nAuthor:\n{\n id: 'cory-house',\n firstName: 'Cory',\n lastName: 'House'\n}\n```\n\nOf course, you’ll need an AWS account. If you don’t have one, [sign up here](https://aws.amazon.com/). Registration is free, and all the services used in this tutorial are within the [AWS Free Tier](https://aws.amazon.com/free/), but you’ll need to enter a credit card number in case you exceed that free tier.\n\nThe 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.\n\nOnce 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](http://docs.aws.amazon.com/IAM/latest/UserGuide/getting-started_create-admin-group.html) to do this.\n\nNow let’s start by creating the tables to store the app information in DynamoDB.\n\n## Storing data in DynamoDB\n\n**DynamoDB** is a fully-managed NoSQL database that stores the data in key-value pairs, like a JSON object:\n\n```json\n{\n \"ID\": 1,\n \"Title\": \"Introduction to Angular 5\",\n \"Category\": \"web-dev\"\n}\n```\n\nThere 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.\n\nBased 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.\n\nThis 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.\n\nDynamoDB gives you a lot of options. You can learn more about it in the [developer guide](http://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html), but for now, let’s dive into creating a database for our API.\n\nOpen the *Services* menu and choose *DynamoDB*:\n\n![choose dynamodb](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/fa5ffa61-7359-4148-93b0-697f05027e1c.jpg)\n\nMake sure you’re in the correct AWS region (there’s a DynamoDB database per region) and click on *Create table*:\n\n![create table](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/d69fa092-91c9-41bb-bfd4-5cd54a1f3a4f.jpg)\n\nEnter the following information, leave the default settings checked and click on *Create*:\n- Table name: courses\n- Primary key: id\n\n![course table](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/69d43523-55df-4c77-9ace-20d2882ae0ec.png)\n\nIf you see the following message:\n\n![autoscaling message](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/4a52ebad-1df4-4da9-a3ee-34f74d2bf4f6.png)\n\nYour 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](http://docs.aws.amazon.com/amazondynamodb/latest/developerguide/AutoScaling.Console.html#AutoScaling.Permissions).\n\nIt might take a few seconds, but you should see a confirmation page like the following:\n\n![table created](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/8c343e09-e42d-4300-ac99-9a566777cd3c.png)\n\nTake note of the table’s **Amazon Resource Name (ARN)**, you’ll need it later.\n\nIn the *Items* tab you can query your table or add items:\n\n![course table items](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/8eb151ac-c6a1-4187-bf3c-cb14a39e644d.png)\n\nI’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:\n- Table name: authors\n- Primary key: id\n\n![authors table](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/e1920f70-7383-47d9-866e-bd77207f875c.png)\n\nAfter the table is created, take note of its ARN.\n\nNow, in the *Items* tab, create some authors, for example:\n\n```json\n{\n \"id\": \"cory-house\",\n \"firstName\": \"Cory\",\n \"lastName\": \"House\"\n},\n{\n \"id\": \"samer-buma\",\n \"firstName\": \"Samer\",\n \"lastName\": \"Buma\"\n},\n{\n \"id\": \"deborah-kurata\",\n \"firstName\": \"Deborah\",\n \"lastName\": \"Kurata\"\n}\n```\n\n![author item](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/94ad0045-0ab9-49ec-9201-3d2e8f8b7115.png)\n\nNow let’s create the lambda functions that will use these tables.\n\n## Creating lambda functions\n\n**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.\n\nIn 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.\n\nAt the time of this writing, a lambda function can be written in Node.js, Python, Java, or C#. This tutorial will use Node.js.\n\nYou can learn more about AWS Lambda [in the developer documentation](http://docs.aws.amazon.com/lambda/latest/dg/welcome.html).\n\nWe’ll create six lambda functions:\n- get-all-authors to return all the users in the database\n- get-all-courses to return all the courses in the database\n- get-course to return only one course\n- save-course to create a new course\n- update-course to update a course\n- delete-course to delete a course\n\nLet’s start by creating the `get-all-authors` function. Open the *Services* menu and choose *Lambda*:\n\n![AWS lambda](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/d1cebaa7-d7c7-4b3e-a101-8e604e23889a.jpg)\n\nClick on:Create a function*:\n\n![Create function](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/a5351ed9-0a44-4152-9204-b1af39fb9a54.jpg)\n\nAnd then, with the *Author from scratch option* selected, enter the following:\n- Name: get-all-authors\n- Runtime: Node.js 6.10 (or a superior version)\n- Role: Create a custom role\n\nWhen selecting the option `Create a custom role`, a new window will open to allow you to create a new role.\n\nAlternatively, 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:\n\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [{\n \"Effect\": \"Allow\",\n \"Action\": [\"dynamodb:DeleteItem\",\n \"dynamodb:GetItem\",\n \"dynamodb:PutItem\",\n \"dynamodb:Scan\",\n \"dynamodb:UpdateItem\"],\n \"Resource\": \"arn:aws:dynamodb:region:accountId:table/*\"\n }]\n}\n```\n\nHowever, this is not good practice; custom services should require as few permissions as possible to reduce overhead and maximize privacy and security.\n\nSo in the window to create a new role, enter `get-all-authors-lambda-role` as the role name:\n\n![create custom role](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/635bf59e-4880-4262-a9c3-3e6bff57a734.png)\n\nAt 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:\n\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [{\n \"Effect\": \"Allow\",\n \"Action\": [\"logs:CreateLogGroup\",\n \"logs:CreateLogStream\",\n \"logs:PutLogEvents\"],\n \"Resource\": \"arn:aws:logs:*:*:*\"\n },\n {\n \"Effect\": \"Allow\",\n \"Action\": \"dynamodb:Scan\",\n \"Resource\": \"\"\n }]\n}\n```\n\nJust 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.\n\nFinally, click on the *Allow* button.\n\nBack 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*:\n\n![create get all authors function](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/a78c65a5-4080-4eb7-b70b-52ef0e0354f2.png)\n\nAfter the lambda function is created, scroll down to the *Function code*section:\n\n![function code](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/deda3127-d6c8-4ba7-9fcd-a6255816a509.png)\n\nEnter the following code:\n\n```js\nconst AWS = require(\"aws-sdk\");\nconst dynamodb = new AWS.DynamoDB({\n region: \"\",\n apiVersion: \"2012-08-10\"\n});\n\nexports.handler = (event, context, callback) => {\n const params = {\n TableName: \"authors\"\n };\n dynamodb.scan(params, (err, data) => {\n if (err) {\n console.log(err);\n callback(err);\n } else {\n callback(null, data);\n }\n });\n};\n```\n\nFirst, 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](http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-regions-availability-zones.html#concepts-available-regions)), and the API version (`2012-08-10` is the latest at the time of writing this tutorial).\n\nThe exported function receives three parameters:\n- event — an object that is used to pass data to the handler.\n- context— an object that provides runtime information about the Lambda function being executed.\n- callback— a function to return information to the caller (if it’s called, otherwise the return value is null). The callback takes two parameters:\n\nerror — an object that provides the result of a failed execution. When a Lambda function succeeds, you can pass null as the first parameter.\n- result — an object that provides the result of a successful execution. The result provided must be JSON.stringify-compatible. If an error is provided, this parameter is ignored.\n\nInside the `handler` function, you execute a [scan](http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB.html#scan-property) operation to get all the items of the `authors` table.\n\nAny error that occurs is passed to the callback function. Otherwise, the callback is executed passing the data returned.\n\nKeep 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.\n\nYou can know more about the available methods of the AWS Javascript SDK for DynamoDB in the [API documentation](http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB.html).\n\nNow click *Save*. Then, if you click on the *Test* button, a window to configure some input properties will open:\n\n![test event](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/1ad8439c-310e-4b69-a024-f57f43cdc3ca.png)\n\nThis function does not take any parameters so give it a name and just click on *Create* and then on *Test* one more time.\n\nYou can check the execution results at the top of the page:\n\n![test results](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/a083335c-12ce-47f8-af15-7280b912b2e6.png)\n\nOr in the *Execution Results* tab below the code editor:\n\n![test results](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/372b657a-f680-4d8b-aec3-03b62c6c5f8f.png)\n\nThis is a sample output:\n\n```json\n{\n \"Items\": [{\n \"id\": {\n \"S\": \"cory-house\"\n },\n \"firstName\": {\n \"S\": \"Cory\"\n },\n \"lastName\": {\n \"S\": \"House\"\n }\n },\n {\n \"id\": {\n \"S\": \"samer-buma\"\n },\n \"firstName\": {\n \"S\": \"Samer\"\n },\n \"lastName\": {\n \"S\": \"Buma\"\n }\n },\n {\n \"id\": {\n \"S\": \"deborah-kurata\"\n },\n \"firstName\": {\n \"S\": \"Deborah\"\n },\n \"lastName\": {\n \"S\": \"Kurata\"\n }\n }],\n \"Count\": 3,\n \"ScannedCount\": 3\n}\n```\n\nAs 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.\n\nReplace the code of the `else` block inside the callback function of `scan` with the following:\n\n```js\n//...\n\nexports.handler = (event, context, callback) => {\n...\n dynamodb.scan(params, (err, data) => {\n if(err) {\n...\n } else {\n const authors = data.Items.map(item => {\n return { id: item.id.S, firstName: item.firstName.S, lastName: item.lastName.S };\n });\n callback(null, authors);\n }\n });\n};\n```\n\nIf you save and then test the function once again, you’ll get as result a much cleaner object:\n\n```json\n[{\n id: \"cory-house\",\n firstName: \"Cory\",\n lastName: \"House\"\n },\n {\n id: \"samer-buma\",\n firstName: \"Samer\",\n lastName: \"Buma\"\n },\n {\n id: \"deborah-kurata\",\n firstName: \"Deborah\",\n lastName: \"Kurata\"\n }];\n```\n\nNow follow the *Functions* link at the top of the page. Your function should appear on the dashboard:\n\n![functions dashboard](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/3a63f2dd-91b3-4fb8-b127-1d37788b4c5a.png)\n\nNext, 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.\n\nYou 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.\n\nBut 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.\n\nThe policy to create a new course:\n\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [{\n \"Effect\": \"Allow\",\n \"Action\": [\"logs:CreateLogGroup\",\n \"logs:CreateLogStream\",\n \"logs:PutLogEvents\"],\n \"Resource\": \"arn:aws:logs:*:*:*\"\n },\n {\n \"Effect\": \"Allow\",\n \"Action\": \"dynamodb:PutItem\",\n \"Resource\": \"\"\n }]\n}\n```\n\nAnd the code for the corresponding lambda function (`save-course`):\n\n```js\nconst AWS = require(\"aws-sdk\");\nconst dynamodb = new AWS.DynamoDB({\n region: \"\",\n apiVersion: \"2012-08-10\"\n});\n\nconst replaceAll = (str, find, replace) => {\n return str.replace(new RegExp(find, \"g\"), replace);\n};\n\nexports.handler = (event, context, callback) => {\n const id = replaceAll(event.title, \" \", \"-\").toLowerCase();\n const params = {\n Item: {\n id: {\n S: id\n },\n title: {\n S: event.title\n },\n watchHref: {\n S: `http://www.pluralsight.com/courses/${id}`\n },\n authorId: {\n S: event.authorId\n },\n length: {\n S: event.length\n },\n category: {\n S: event.category\n }\n },\n TableName: \"courses\"\n };\n dynamodb.putItem(params, (err, data) => {\n if (err) {\n console.log(err);\n callback(err);\n } else {\n callback(null, {\n id: params.Item.id.S,\n title: params.Item.title.S,\n watchHref: params.Item.watchHref.S,\n authorId: params.Item.authorId.S,\n length: params.Item.length.S,\n category: params.Item.category.S\n });\n }\n });\n};\n```\n\nTo test this function, you can configure a test event with the following data:\n\n```json\n{\n \"title\": \"Web Component Fundamentals\",\n \"authorId\": \"cory-house\",\n \"length\": \"5:10\",\n \"category\": \"HTML5\"\n}\n```\n\nTo 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.\n\nThe 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:\n\n```js\nconst AWS = require(\"aws-sdk\");\nconst dynamodb = new AWS.DynamoDB({\n region: \"\",\n apiVersion: \"2012-08-10\"\n});\n\nexports.handler = (event, context, callback) => {\n const params = {\n Item: {\n id: {\n S: event.id\n },\n title: {\n S: event.title\n },\n watchHref: {\n S: event.watchHref\n },\n authorId: {\n S: event.authorId\n },\n length: {\n S: event.length\n },\n category: {\n S: event.category\n }\n },\n TableName: \"courses\"\n };\n dynamodb.putItem(params, (err, data) => {\n if (err) {\n console.log(err);\n callback(err);\n } else {\n callback(null, {\n id: params.Item.id.S,\n title: params.Item.title.S,\n watchHref: params.Item.watchHref.S,\n authorId: params.Item.authorId.S,\n length: params.Item.length.S,\n category: params.Item.category.S\n });\n }\n });\n};\n```\n\nTo test this function, you can configure a test event with the following data:\n\n```json\n{\n \"id\": \"web-component-fundamentals\",\n \"title\": \"Web Component Fundamentals\",\n \"authorId\": \"cory-house\",\n \"length\": \"5:03\",\n \"category\": \"HTML5\",\n \"watchHref\": \"http://www.pluralsight.com/courses/web-components-shadow-dom\"\n}\n```\n\nThe policy to get all the courses:\n\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [{\n \"Effect\": \"Allow\",\n \"Action\": [\"logs:CreateLogGroup\",\n \"logs:CreateLogStream\",\n \"logs:PutLogEvents\"],\n \"Resource\": \"arn:aws:logs:*:*:*\"\n },\n {\n \"Effect\": \"Allow\",\n \"Action\": \"dynamodb:Scan\",\n \"Resource\": \"\"\n }]\n}\n```\n\nAnd the code for the corresponding lambda function (`get-all-courses`):\n\n```js\nconst AWS = require(\"aws-sdk\");\nconst dynamodb = new AWS.DynamoDB({\n region: \"\",\n apiVersion: \"2012-08-10\"\n});\n\nexports.handler = (event, context, callback) => {\n const params = {\n TableName: \"courses\"\n };\n dynamodb.scan(params, (err, data) => {\n if (err) {\n console.log(err);\n callback(err);\n } else {\n const courses = data.Items.map(item => {\n return {\n id: item.id.S,\n title: item.title.S,\n watchHref: item.watchHref.S,\n authorId: item.authorId.S,\n length: item.length.S,\n category: item.category.S\n };\n });\n callback(null, courses);\n }\n });\n};\n```\n\nThe policy to get one course:\n\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [{\n \"Effect\": \"Allow\",\n \"Action\": [\"logs:CreateLogGroup\",\n \"logs:CreateLogStream\",\n \"logs:PutLogEvents\"],\n \"Resource\": \"arn:aws:logs:*:*:*\"\n },\n {\n \"Effect\": \"Allow\",\n \"Action\": \"dynamodb:GetItem\",\n \"Resource\": \"\"\n }]\n}\n```\n\nAnd the code for the corresponding lambda function (`get-course`):\n\n```js\nconst AWS = require(\"aws-sdk\");\nconst dynamodb = new AWS.DynamoDB({\n region: \"\",\n apiVersion: \"2012-08-10\"\n});\n\nexports.handler = (event, context, callback) => {\n const params = {\n Key: {\n id: {\n S: event.id\n }\n },\n TableName: \"courses\"\n };\n dynamodb.getItem(params, (err, data) => {\n if (err) {\n console.log(err);\n callback(err);\n } else {\n callback(null, {\n id: data.Item.id.S,\n title: data.Item.title.S,\n watchHref: data.Item.watchHref.S,\n authorId: data.Item.authorId.S,\n length: data.Item.length.S,\n category: data.Item.category.S\n });\n }\n });\n};\n```\n\nTo test this function, you can configure a test event with the following data:\n\n```json\n{\n \"id\": \"web-component-fundamentals\"\n}\n```\n\nThe policy to delete a course:\n\n```json\n{\n \"Version\": \"2012-10-17\",\n \"Statement\": [{\n \"Effect\": \"Allow\",\n \"Action\": [\"logs:CreateLogGroup\",\n \"logs:CreateLogStream\",\n \"logs:PutLogEvents\"],\n \"Resource\": \"arn:aws:logs:*:*:*\"\n },\n {\n \"Effect\": \"Allow\",\n \"Action\": \"dynamodb:DeleteItem\",\n \"Resource\": \"\"\n }]\n}\n```\n\nAnd the code for the corresponding lambda function (`delete-course`):\n\n```js\nconst AWS = require(\"aws-sdk\");\nconst dynamodb = new AWS.DynamoDB({\n region: \"\",\n apiVersion: \"2012-08-10\"\n});\n\nexports.handler = (event, context, callback) => {\n const params = {\n Key: {\n id: {\n S: event.id\n }\n },\n TableName: \"courses\"\n };\n dynamodb.deleteItem(params, (err, data) => {\n if (err) {\n console.log(err);\n callback(err);\n } else {\n callback(null, data);\n }\n });\n};\n```\n\nTo test this function, you can configure a test event with the following data:\n\n```json\n{\n \"id\": \"web-component-fundamentals\"\n}\n```\n\nAnd these are all the functions you’ll need. Now let’s expose them to the world via a REST API.\n\n## Setting up API Gateway\n\n**API Gateway** is a service that allows creating a REST API fully managed by AWS that acts as the front-end for other services.\n\nOpen the *Services* menu and choose *API Gateway*:\n\n![choose API Gateway](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/3f43e391-df86-46d5-8945-26b297e2dc47.png)\n\nPress *Get started*:\n\n![API Gateway](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/7e777907-b340-40b1-b297-9d41a78fcc85.jpg)\n\nYou can create an API with a [Swagger](https://swagger.io/) file here we’re going to create the API manually, so choose to create a *New API* and give it a name:\n\n![create new API](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/a2bb37b3-e0d7-46bf-a227-2dcb4b2afc8a.png)\n\nThis will create a new API and you’ll be ready to start adding resources (URL paths) and methods (GET, POST, etc.):\n\n![API created](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/b6298e2b-5aeb-4e95-93c3-8e796140159b.png)\n\nNow open the *Actions* menu and choose *Create Resource*. Enter a resource name and check the option *Enable API Gateway CORS*:\n\n![create resource](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/62fa35bb-6005-4d40-8303-9d16637e5cbb.png)\n\nBy default, the URL path will be created from the resource name. [Cross-origin resource sharing](https://en.wikipedia.org/wiki/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.\n\nNext, click on *Create Resource*:\n\n![resource created](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/cd5adccc-59bb-49f0-b17c-433c8bdaeea7.png)\n\nAn `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:\n\n![CORS created](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/16006d4f-3698-4229-989c-30002b11e67d.png)\n\nNow 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:\n\n![create method](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/cb44ed0f-d5b7-44e4-a06c-3c35781fa5ac.png)\n\nWe’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:\n\n![create POST](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/c133012a-be4b-4592-ad21-7c80c024de09.png)\n\nAs 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`):\n\n![set up POST](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/a48178d9-ad7c-4a61-9f04-7384dbfee2a8.png)\n\nConfirm the permission to invoke the lambda function:\n\n![give permissions](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/e3cbaf9c-f34e-464b-a500-df33908e97ba.png)\n\nBy 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](http://docs.aws.amazon.com/apigateway/latest/developerguide/models-mappings.html#models-mappings-mappings).\n\nHowever, probably it’s a good idea to use a [model](http://docs.aws.amazon.com/apigateway/latest/developerguide/models-mappings.html#models-mappings-models) to validate the request.\n\nSo go to the *Models* section and click on *Create*:\n\n![create model](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/daf44629-382f-4539-b5ab-ea1437cd18c9.png)\n\nGive it a name, enter `application/json` as the *Content type*, and as the model schema, enter the following:\n\n```json\n{\n \"$schema\": \"http://json-schema.org/schema#\",\n \"title\": \"CourseInputModel\",\n \"type\": \"object\",\n \"properties\": {\n \"title\": {\"type\": \"string\"},\n \"authorId\": {\"type\": \"string\"},\n \"length\": {\"type\": \"string\"},\n \"category\": {\"type\": \"string\"}\n },\n \"required\": [\"title\", \"authorId\", \"length\", \"category\"]\n}\n```\n\nModels use the [JSON Schema specification](http://json-schema.org/). You can learn more about it [here](https://spacetelescope.github.io/understanding-json-schema/).\n\nClick on *Create model* and back to the POST method click on *Method Request*:\n\n![Method Request](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/51e91374-ec4f-4d0f-9bbb-bf4861d1fcc0.png)\n\nIn *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:\n\n![add model](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/baf5ce67-c12d-41df-808e-b646490740d5.png)\n\nNow if you click on *TEST*:\n\n![test](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/246d3bf6-a546-4272-a432-0c06e7bf93a9.png)\n\nYou can test the POST endpoint by entering a request body like:\n\n```json\n{\n \"title\": \"Web Component Fundamentals\",\n \"authorId\": \"cory-house\",\n \"length\": \"5:03\",\n \"category\": \"HTML5\"\n}\n```\n\nEverything should work correctly:\n\n![test result](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/2b8dcb3f-9705-4f78-bbdc-1d4da1873797.png)\n\nIf you remove one or more attributes of the request, an error should be returned:\n\n![test result error](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/1573ae4e-886e-4589-ab04-a0cd8089fb3d.png)\n\nMoving 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.\n\nSelect the `course` resource and from the *Actions* menu, create another resource, this time just adding a path variable using brackets (and enabling CORS):\n\n![ID path](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/2cf483e9-7644-487f-a5fd-21cc46f50ef4.png)\n\nClick on *Create resource* to create it:\n\n![ID path created](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/e013c99c-74d4-44d8-8f85-6f1407576f57.png)\n\nNext, create a PUT method and link it to the `update-course` lambda function:\n\n![update method](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/ab282cb6-317c-42be-97bf-dfe29aff6cd2.png)\n\nNow 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.\n\nIn this case, we’ll have to use a **body mapping template** to send all the information as the lambda function requires it.\n\nSo select the PUT method and click on *Integration Request*:\n\n![Integration Request](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/59d6055e-476c-4642-8699-d832f32e7d48.png)\n\nThen, 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:\n\n```json\n{\n \"id\": $input.params('id'),\n \"title\": $input.json('$.title'),\n \"authorId\": $input.json('$.authorId'),\n \"length\": $input.json('$.length'),\n \"category\": $input.json('$.category'),\n \"watchHref\": $input.json('$.watchHref')\n}\n```\n\nThe mapping template uses the [Velocity Template Language](http://velocity.apache.org/engine/devel/vtl-reference-guide.html) (VTL). [Here’s the link](http://docs.aws.amazon.com/apigateway/latest/developerguide/models-mappings.html) to the relevant section in the AWS documentation.\n\nThe `$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](http://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-mapping-template-reference.html#input-variable-reference).\n\nAlso, 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.\n\nClick *Save* and test it with the path variable `web-component-fundamentals` (assuming the record exists in your database) and the following request body:\n\n```json\n{\n \"title\": \"Web Component Fundamentals\",\n \"authorId\": \"cory-house\",\n \"length\": \"5:03\",\n \"category\": \"HTML5\",\n \"watchHref\": \"http://www.pluralsight.com/courses/web-components-shadow-dom\"\n}\n```\n\nEverything should work correctly:\n\n![test result](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/dce6e938-660d-4b90-b68b-2050600d375a.png)\n\nIf you like, add a model to validate the request, just like in the case of the POST method.\n\nNow, 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:\n\n```json\n{\n \"id\": \"$input.params('id')\"\n}\n```\n\nDon’t forget to add a GET method on the `/courses` resource for the `get-all-courses` function.\n\nAnd another resource, `/authors`, for the `get-all-authors` function.\n\nWhen you’re done, you should have something like this:\n\n![final API](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/793a1b14-c07d-4929-a65f-9e43156ce293.png)\n\n## Cross Origin Resource Sharing (CORS)\n\nNow, 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).\n\nSelect the `/authors` endpoint, click on *Actions* and choose *Enable CORS*:\n\n![Enable CORS](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/80f33973-cf78-4544-bad3-3592ac408721.png)\n\nDeselect the OPTIONS method, click on *Enable CORS and replace existing CORS headers*:\n\n![Enable CORS](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/f1d8921c-73b7-4992-9c1f-697ee570a125.png)\n\nAnd confirm to add the CORS headers to the GET method:\n\n![Confirm CORS](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/67e00c25-e88f-4f6c-92f5-95a186df7ed9.png)\n\nDo the same for all the methods of the `/courses` and `/courses/{id}`resources (except for the OPTIONS method).\n\nFinally, to deploy the API, go to the *Actions* menu and choose *Deploy API*:\n\n![Deploy options](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/bca2e844-9149-4c0e-8f4c-d6e1a00d7789.png)\n\nThen, create a new stage, give it a name, optionally a description and click on *Deploy*:\n\n![create new stage](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/aeb07977-a49e-43d4-8de4-4d800fba073e.png)\n\nAfter the API is deployed, you’ll get the URL to invoke it:\n\n![API deployed](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/65256df6-58ae-4e27-97ce-10182ce724cc.png)\n\nFor 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`.\n\nAt this point, you can use [curl](https://curl.haxx.se/) or [Postman](https://www.getpostman.com/) to test the API:\n\n![Postman](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/3f9c97ad-688c-40c9-b326-f32f8b202d38.png)\n\nNow, the only step missing is uploading a client app for our API to S3.\n\n## Hosting the app in S3\n\nClone the app from [this GitHub repository](https://github.com/eh3rrera/react-app-frontend).\n\nIn a terminal window, go to the app directory and execute `npm install` to install the dependencies.\n\nNext, go to `src/api/serverUrl.js`, and replace the exported value with the URL of your API.\n\nIf you want to test it locally, execute `npm start` on the terminal.\n\nThen, execute `npm run build` to build a version of the app ready for production. You can find the output files in the `build` folder.\n\nNow, let’s use Amazon S3 to host the app and go completely serverless.\n\nAmazon S3 is a storage service that can also function as a web server.\n\nIn S3, you put your files in buckets. You can know more about S3 in [this developer guide](http://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html), for now, let’s create a bucket.\n\nOpen the *Services* menu and choose *S3*:\n\n![Choose S3](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/f9ea973d-1940-4ee1-ae00-ef9dfa5de709.png)\n\nClick on the *Create bucket* button and enter a name and the region where your bucket will be created:\n\n![Create bucket](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/b127a335-b964-4ed0-ba34-f2e752a18cd1.png)\n\nMake 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.\n\nNext, click on the *Create* button, we’ll take the default values for the properties and permissions tabs.\n\nOnce the bucket is created, click on it, and go to the *Properties* tab:\n\n![Properties tab](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/ad1b98a3-b12b-414a-8b55-6e9e778e842f.png)\n\nClick on the *Static website hosting* option and select *Use this bucket to host a website*:\n\n![set up web server](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/c3e5c2f7-6655-4e0a-a192-e340d3d3900e.png)\n\nSince 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*.\n\nNext, in the *Permissions* tab, select *Bucket Policy*:\n\n![Edit policy](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/cc2dcb9b-bc4d-4395-acba-1c41477d0641.png)\n\nEnter the [following policy](https://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-2) to grant read-only permissions to your bucket, just change `examplebucket` by your bucket name (in my case `net.eherrera.serverless-demo`):\n\n```json\n{\n \"Version\":\"2012-10-17\",\n \"Statement\":[{\n \"Sid\":\"AddPerm\",\n \"Effect\":\"Allow\",\n \"Principal\": \"*\",\n \"Action\":[\"s3:GetObject\"],\n \"Resource\":[\"arn:aws:s3:::examplebucket/*\"]\n }]\n}\n```\n\nClick on *Save* to apply the policy:\n\n![Save policy](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/a99114cb-3fb3-4b28-a21a-6d303bda7506.png)\n\nNow go to the *Overview* tab, click on the *Upload* button, drag the content of the `build` directory and click on *Upload*:\n\n![Upload file](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/8ae2c242-7a29-4a61-a7fe-ad6f17f1d7d4.png)\n\nOnce 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):\n\n![App](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/048ccc9c-c4c7-43df-83d7-59a81e7139ab.png)\n\nOptionally, 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.\n\nHowever, I would highly recommend using **CloudFront**.\n\nCloudFront 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](http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html).\n\nOpen the *Services* menu and choose *CloudFront*:\n\n![choose cloudfront](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/224c8118-07eb-4fff-8d29-36fbefb224b3.png)\n\nClick on *Create Distribution* and under the *Web* section click on *Get Started*:\n\n![create web distribution](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/c96fc878-aa0e-45ab-ad47-072d57d4a592.png)\n\nIn the *Origin Domain Name* select the bucket that contains your app, *Origin ID* will be populated:\n\n![origin domain name](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/152146cc-c5d8-4134-8fed-084736b6ead1.png)\n\nScroll 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.\n\nWait a few minutes until the deployment has finished, and then click on the ID of your distribution:\n\n![distribution ID](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/6e2187ab-5de4-4f88-aef8-583f5edf8ccd.png)\n\nIn 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):\n\n![domain name](https://pub-88af132eea1d4abda63241574f4e71ff.r2.dev/uploads/2018/05/078285ec-56b2-432a-8859-0f86c00462b4.png)\n\nAnd that’s it!\n\n## Conclusion\n\nThe idea of a serverless application is interesting:\n- There’s no need to manage any servers.\n- The application can be scaled automatically and highly available.\n- You pay only for the resources used and for the time the application is used.\n\nIn 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.\n\nThis 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!\n\nIn case AWS excites you, some interesting projects would include authenticating users with [Amazon Cognito](https://aws.amazon.com/cognito/) or using a framework like [Serveless](https://serverless.com/) or a service like [AWS CloudFormation](https://aws.amazon.com/cloudformation/) to simplify the managing and deploying of serverless applications.\n\n---\n\nThanks for reading. I hope you found this guide informative and engaging.\n\n## Building a Serverless Web App on AWS Services | Pluralsight\n\n### Building a Serverless Web App on AWS Services | PluralsightPluralsight Guides\n\nSource: [www.pluralsight.com/guides/building-a-serverless-web-app-on-aws-services](https://www.pluralsight.com/guides/building-a-serverless-web-app-on-aws-services)"}