diff --git a/WebApplication/1_StaticWebHosting/README.md b/WebApplication/1_StaticWebHosting/README.md index 06c4e286..ff79dd8f 100644 --- a/WebApplication/1_StaticWebHosting/README.md +++ b/WebApplication/1_StaticWebHosting/README.md @@ -1,6 +1,6 @@ # Module 1: Static Web Hosting with AWS Amplify Console -In this module you'll configure AWS Amplify Console to host the static resources for your web application. In subsequent modules you'll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway. +In this module, you'll configure AWS Amplify Console to host the static resources for your web application. In subsequent modules you'll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway. ## Architecture Overview @@ -40,7 +40,7 @@ git config --global credential.helper '!aws codecommit credential-helper $@' git config --global credential.UseHttpPath true ``` -Next you need to create the repository and clone it to your Cloud9 environment: +Next, you need to create the repository and clone it to your Cloud9 environment: 1. Open the [AWS CodeCommit console][codecommit-console] 1. Select **Create Repository** 1. Set the *Repository name** to "wildrydes-site" @@ -67,7 +67,7 @@ Now from your Cloud9 development environment: Once your git repository is created and cloned locally, you'll need to pull in the files for your website and sync them up to the repository. **:white_check_mark: Step-by-step directions** -From your Cloud9 development environment(or local environment) +From your Cloud9 development environment (or local environment) 1. Change directory into your repository: ``` cd wildrydes-site/ @@ -95,18 +95,18 @@ From your Cloud9 development environment(or local environment) ``` ### Deploy the site with the AWS Amplify Console -Next you'll use the [AWS Amplify Console][amplify-console] to deploy the website you've just commited to git. The Amplify Console takes care of the work of setting up a place to store your static web application code and provides a number of helpful capabilities to simplify both the lifecycle of that application as well as enable best practices. +Next, you'll use the [AWS Amplify Console][amplify-console] to deploy the website you've just commited to git. The Amplify Console takes care of the work of setting up a place to store your static web application code and provides a number of helpful capabilities to simplify both the lifecycle of that application as well as enable best practices. **:white_check_mark: Step-by-step directions** 1. Launch the [Amplify Console console page][amplify-console-console] 1. Click **Connect App** 1. Select the *Repository service provider* used today and select **Next** 1. If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account -1. From the dropdown select the *Repository* and *Branch* created today +1. From the dropdown, select the *Repository* and *Branch* created today  -1. On the "Configure build settings" page leave all the defaults and select **Next** -1. On the "Review" page select **Save and deploy** +1. On the "Configure build settings" page, leave all the defaults and select **Next** +1. On the "Review" page, select **Save and deploy** The process takes a couple of minutes for Amplify Console to create the neccesary resources and to deploy your code. @@ -116,7 +116,7 @@ Once completed, click on the site image to launch your Wild Rydes site.  -If you click on the link for *Master* you'll see various pieces of information about your website deployment, including sample renderings on various platforms: +If you click on the link for *Master*, you'll see various pieces of information about your website deployment, including sample renderings on various platforms:  @@ -124,7 +124,7 @@ If you click on the link for *Master* you'll see various pieces of information a The AWS Amplify Console will rebuild and redeploy the app when it detects changes to the connected repository. Make a change to the main page to test out this process. **:white_check_mark: Step-by-step directions** -1. From your Cloud9 environment open the ```index.html``` file in the root directory of the repository. +1. From your Cloud9 environment, open the ```index.html``` file in the root directory of the repository. 1. Modify the title line: ```
-1. Choose on **Services** then select **Lambda** in the Compute section.
+1. Choose on **Services**, then select **Lambda** in the Compute section.
1. Choose **Create function**.
@@ -83,17 +83,17 @@ Make sure to configure your function to use the `WildRydesLambda` IAM role you c
#### Background
Amazon API Gateway can leverage an AWS Lambda function to make authorization decisions. In order to support bearer tokens, such as JWT tokens, you can use custom authorizers. When configured with a custom authorizer, API Gateway invokes a Lambda function with the request token and context. The Lambda custom authorizer must return a policy that API Gateway can use to make the authorization decision for the entire API, not just the specific method that was called. To make the creation of custom authorizers easier, we have created JavaScript and Python blueprints that you can select from the Lambda console. These blueprints contain a utility object that simplifies policy generation.
-You can also return a set of key/value pairs that are appended to the request context values. The code for our custom authorizer is in the `ListUnicornAuthorizer` folder, open the folder and take a look at the `index.js` file to get an idea of how our custom authorizer works. To authorize access to our new list rides API we rely on a custom scope called `UnicornManager/unicorn` - this scope is automatically added to client tokens produced by the Unicorn Manager application.
+You can also return a set of key/value pairs that are appended to the request context values. The code for our custom authorizer is in the `ListUnicornAuthorizer` folder. Open the folder and take a look at the `index.js` file to get an idea of how our custom authorizer works. To authorize access to our new list rides API, we rely on a custom scope called `UnicornManager/unicorn` - this scope is automatically added to client tokens produced by the Unicorn Manager application.
#### High-Level Instructions
-Use the AWS Lambda console to create a new Lambda function called **ListUnicornAuthorizer** that will process incoming JWT bearer tokens. Upload the provided [ListUnicornAuthorizer.zip](./ListUnicornAuthorizer.zip) as the function code. The authorizer Lambda function relies on an environment variable called **`USER_POOL_ID`**, define this in the Lambda console and set the value of the WildRydes **Pool Id** from the Cognito console.
+Use the AWS Lambda console to create a new Lambda function called **ListUnicornAuthorizer** that will process incoming JWT bearer tokens. Upload the provided [ListUnicornAuthorizer.zip](./ListUnicornAuthorizer.zip) as the function code. The authorizer Lambda function relies on an environment variable called **`USER_POOL_ID`**. Define this in the Lambda console and set the value of the WildRydes **Pool Id** from the Cognito console.
Make sure to configure your function to use the **WildRydesLambda** IAM role you created in module 2 of this workshop.
-1. Choose on **Services** then select **Lambda** in the Compute section.
+1. Choose on **Services**, then select **Lambda** in the Compute section.
1. Choose **Create function**.
@@ -203,14 +203,14 @@ In the API Gateway console, open the `WildRydes` API we created in module #4 and
#### Background
Our new partner website, called Unicorn Manager, is also a static application hosted on Amazon S3. You can define who can access the content in your S3 buckets using a bucket policy. Bucket policies are JSON documents that specify what principals are allowed to execute various actions against the objects in your bucket.
-By default objects in an S3 bucket are available via URLs with the structure http://<Regional-S3-prefix>.amazonaws.com/
-1. In the AWS Management Console choose **Services** then select **S3** under Storage.
+1. In the AWS Management Console choose **Services**, then select **S3** under Storage.
1. Choose **+ Create Bucket**
@@ -275,7 +275,7 @@ Using the CloudFront console, create a new Distribution for web content specifyi
1. In the **Origin Domain Name** field, paste the URL for the S3 static website we just created and **/** as the origin path. **Do not select the bucket from dropdown list, paste the full website url including the http:// prefix. The origin type should be `custom`, not `s3`**.
-1. In the **Viewer Protocol Policy** make sure that **Redirect HTTP to HTTPS** is selected.
+1. In the **Viewer Protocol Policy**, make sure that **Redirect HTTP to HTTPS** is selected.

@@ -298,7 +298,7 @@ Using the Cognito console, add a new client application called **UnicornManager*
-1. In the AWS Management Console choose **Services** then select **Cognito** under Mobile.
+1. In the AWS Management Console, choose **Services** then select **Cognito** under Mobile.
1. In the intro page, click **Manage your User Pools** an open the **WildRydes** pool.
@@ -342,7 +342,7 @@ Using the Cognito console, open the **WildRydes** User Pool and create a new cus
1. Specify **UnicornServer** as the **Name**.
-1. Use **UnicornManager** as the **Identifier** for the custom resource server.
+1. Use **UnicornManager** as the **Identifier** for the custom resource server.
1. In the **Scopes** section, declare a new scope called **unicorn**. I've used "**Allow listing of rides for unicorns**" as the description.
@@ -354,7 +354,7 @@ Using the Cognito console, open the **WildRydes** User Pool and create a new cus
### 8. Configure the new app client for OAuth
#### Background
-Amazon Cognito User Pools supports the authorization code grant, implicit, and client credentials grants. Third party developers can load the Cognito hosted UI with their application ID and request any of the enabled flows. Cognito User Pools also exposes a set of client and server/admin APIs that you can use to build custom authentication flows. As a result of a successful authentication Cognito produces and OpenID Connect-compatible identity token and a JWT access token. The access token includes the custom scopes you declared for the application.
+Amazon Cognito User Pools supports the authorization code grant, implicit, and client credentials grants. Third party developers can load the Cognito hosted UI with their application ID and request any of the enabled flows. Cognito User Pools also exposes a set of client and server/admin APIs that you can use to build custom authentication flows. As a result of a successful authentication, Cognito produces an OpenID Connect-compatible identity token and a JWT access token. The access token includes the custom scopes you declared for the application.
In our example, we will use the implicit flow for the sake of simplicity. Implicit grant flows are mostly used by mobile applications. For web applications, you would normally require third party developers to host their own backend service and use the authorization code grant flow.
@@ -364,9 +364,9 @@ Open the **App client settings** and configure the **UnicornManager** app to use
-1. In the AWS Management Console choose **Services** then select **Cognito** under Mobile.
+1. In the AWS Management Console, choose **Services**, then select **Cognito** under Mobile.
-1. In the intro page, click **Manage your User Pools** an open the **WildRydes** pool.
+1. In the intro page, click **Manage your User Pools** and open the **WildRydes** pool.
1. Open the **App clients settings** from the **App integration** menu on the left. This page lists both the app clients declared for your user pool. Make sure you make the following changes only to the **UnicornManager** client app.
@@ -445,4 +445,4 @@ Click **Sign up** to create the unicorn account. The hosted registration ui will
Once the account is confirmed, the application will redirect you to the main web page of the Unicorn manager. Use the **Refresh** button on the top right to load a list of the rides for the unicorn you registered.
-We have now turned **Wild Rydes** into a platform. Third party developers can now ask us for a new client app id, use our hosted UI to authenticate and register new users. This will allow us to grow our customer base and toolkit beyond what our team can produce by itself, **UnicornManager** is just the first step.
+We have now turned **Wild Rydes** into a platform. Third party developers can now ask us for a new client app id, use our hosted UI to authenticate, and register new users. This will allow us to grow our customer base and toolkit beyond what our team can produce by itself, **UnicornManager** is just the first step.
diff --git a/WebApplication/6_GraphQLAPI/README.md b/WebApplication/6_GraphQLAPI/README.md
index cbd14371..60182cc5 100644
--- a/WebApplication/6_GraphQLAPI/README.md
+++ b/WebApplication/6_GraphQLAPI/README.md
@@ -2,11 +2,11 @@
*Note! This section is currently part of expansion of this lab. There is currently no Step 7*
-In this module you'll use [AWS AppSync][appsync] to build a GraphQL API to find more information about the rides you have taken so far. In a subsequent module you will then modify our web application to add the ride history page which will query this API.
+In this module, you'll use [AWS AppSync][appsync] to build a GraphQL API to find more information about the rides you have taken so far. In a subsequent module, you will then modify our web application to add the ride history page which will query this API.
## Architecture Overview
-In the [Serverless Backend][serverless-backend] module you created a Lambda function that stored data in a DynamoDB bucket. Then in the [RESTful APIs][restful-apis] module you put Amazon API Gatewway infront of the Lambda function so you could connect it to your web application. Every time that you request a ride through that API, the Lambda function stores the data. Now, let's get that data out and present it as ride history.
+In the [Serverless Backend][serverless-backend] module, you created a Lambda function that stored data in a DynamoDB bucket. Then, in the [RESTful APIs][restful-apis] module, you put Amazon API Gatewway infront of the Lambda function so you could connect it to your web application. Every time that you request a ride through that API, the Lambda function stores the data. Now, let's get that data out and present it as ride history.
GraphQL provides a robust query language API that works well with web and mobile based applications. AWS AppSync has the ability to put a GraphQL API infront of many different backends, including: AWS DynamoDB, AWS ElasticSearch Service, Amazon RDS Aurora, and AWS Lambda functions. The GraphQL API you will build here will allow you to return all rides, information about rides by their ID, and information about the unicorns that served your ride.
@@ -52,7 +52,7 @@ Use the AWS AppSync console to create a new GraphQL API. Call your API `RidesHis
#### Background
-AWS AppSync has created a base GraphQL schema that contains basic functionality for our API. We could use it to create and delete items from out database, but we're only interested in retrieving data in this module. Expand on what was created by adding a query to find rides based on the unicorn that serviced them. The DynamoDB table currently has no indexes on any other attributes and so you will need to create a SCAN request filtered by UnicornName.
+AWS AppSync has created a base GraphQL schema that contains basic functionality for our API. We could use it to create and delete items from out database, but we're only interested in retrieving data in this module. Expand on what was created by adding a query to find rides based on the unicorn that serviced them. The DynamoDB table currently has no indexes on any other attributes, so you will need to create a SCAN request filtered by UnicornName.
#### High-Level Instructions
@@ -60,7 +60,7 @@ Create a new query `getRidesByUnicornName` that retrieves the ride information b
**:white_check_mark: Step-by-step directions**
1. While in the [AWS AppSync Console][appsync-console] in your `RidesHistory` API, select **Schema**.
-1. In the Schema editor modify the Query object to add a new query:
+1. In the Schema editor, modify the Query object to add a new query:
`getRidesByUnicornName(UnicornName: String, limit: Int, nextToken: String): RidesConnection`
Such that the final object contains 3 queries:
@@ -73,7 +73,7 @@ Create a new query `getRidesByUnicornName` that retrieves the ride information b
```
1. Click **Save Schema**>
-1. Under *Resolvers* find the *Query* section and select **Attach** next to the new query you just created.
+1. Under *Resolvers*, find the *Query* section and select **Attach** next to the new query you just created.

@@ -121,8 +121,8 @@ Configure the AppSync GraphQL API to use the `WildRydes` user pool as an authori
**:white_check_mark: Step-by-step directions**
1. While in the [AWS AppSync Console][appsync-console] in your `RidesHistory` API, select **Settings**.
-1. Under *Authorization type* select *Amazon Cognito User Pool*.
-1. Under *User Pool configuration* select the region of your user pool and then select the user pool created earlier. Lastly, select *ALLOW* as the default action.
+1. Under *Authorization type*, select *Amazon Cognito User Pool*.
+1. Under *User Pool configuration*, select the region of your user pool, and then select the user pool created earlier. Lastly, select *ALLOW* as the default action.
1. At the bottom of the page, select **Save**.

@@ -135,7 +135,7 @@ The [AWS AppSync Console][appsync-console] contains a helpful query tool that al
1. While in the [AWS AppSync Console][appsync-console] in your `RidesHistory` API, select **Queries**.
1. Select *Login with User Pools**
1. In the *Login with Cognito User Pools* popup, for `ClientId` enter the `appid` saved earlier.
-1. Now you need to login with the user you created earlier in the [User Management][user-management] module. One thing to note is that in Cognito your username is different than your email. You'll need to head to the Cognito Console to find the user name for your created user:
+1. Now, you need to login with the user you created earlier in the [User Management][user-management] module. One thing to note is that in Cognito your username is different than your email. You'll need to head to the Cognito Console to find the user name for your created user:
1. Go to the [Amazon Cognito Console][cognito-console]
1. Select **Manage User Pools**
1. Select the user pool created earlier **WildRydes**
@@ -175,7 +175,7 @@ The [AWS AppSync Console][appsync-console] contains a helpful query tool that al
}
```
-1. Click on the **Play** arrow button in the top of the page and select `getRides` from the new drop down that pops up. On the right you should see the results of the query:
+1. Click on the **Play** arrow button in the top of the page and select `getRides` from the new drop down that pops up. On the right, you should see the results of the query:
```
{
"data": {
@@ -201,7 +201,7 @@ The [AWS AppSync Console][appsync-console] contains a helpful query tool that al
}
```
-1. Execute this query from the **Play** drop down and you should now see all rides that were performed by the named unicorn provided. If you only have a single ride by this unicorn explore testing the query using a differnt UnicornName. Note that if you have very few saved rides, you might need to go into the `/rides.html` interface on the web application and generate more rides.
+1. Execute this query from the **Play** drop down and you should now see all rides that were performed by the named unicorn provided. If you only have a single ride by this unicorn, explore testing the query using a differnt UnicornName. Note that if you have very few saved rides, you might need to go into the `/rides.html` interface on the web application and generate more rides.
```
{
"data": {
@@ -228,7 +228,7 @@ You've completed the testing of your AWS AppSync based GraphQL API!
:key: [AWS AppSync][appsync] simplifies application development by letting you create a flexible API to securely access, manipulate, and combine data from one or more data sources. AppSync is a managed service that uses GraphQL to make it easy for applications to get exactly the data they need.
-:wrench: In this module you've created an AppSync API and connected it to our DynamoDB database created in an earlier module. You then set the authorization mechanism to the same that we are using for our REST API and web application meaning you'll have a unified way across these 3 different aspects of the application.
+:wrench: In this module, you've created an AppSync API and connected it to our DynamoDB database created in an earlier module. You then set the authorization mechanism to the same that we are using for our REST API and web application meaning you'll have a unified way across these 3 different aspects of the application.
### Next
diff --git a/WebApplication/9_CleanUp/README.md b/WebApplication/9_CleanUp/README.md
index 272b4d6e..f4633ece 100644
--- a/WebApplication/9_CleanUp/README.md
+++ b/WebApplication/9_CleanUp/README.md
@@ -7,7 +7,8 @@ This page provides instructions for cleaning up the resources created during the
### 1. Module 6 - AppSync GraphQL API Cleanup
+
+
Delete the AppSync GraphQL API. From the AppSync console, select the application and click **Delete**
1. Go to the [AWS AppSync Console][appsync-console].
@@ -20,7 +21,8 @@ Delete the AppSync GraphQL API. From the AppSync console, select the application
### 2. Module 5 - OAuth Cleanup
+
+
Delete the Unicorn Manager CloudFront distribution and S3 bucket for the static website hosting created in module 5. Using the Lambda console, also delete the **ListUnicornRides** and **ListUnicornAuthorizer** functions. If you have deployed the pre-requisites CloudFormation stack, delete the stack using the CloudFormation console.
1. In the AWS Management Console, click **Services** then select **CloudFront** under Networking & Content Delivery.
@@ -31,7 +33,7 @@ Delete the Unicorn Manager CloudFront distribution and S3 bucket for the static
1. Using the **Services** dropdown, navigate to the **S3** console under Storage.
-1. Select the **unicornmanager-xxx** bucket and click **Delete bucket**. In the confirmation window enter the bucket name and click **Confirm**.
+1. Select the **unicornmanager-xxx** bucket and click **Delete bucket**. In the confirmation window, enter the bucket name and click **Confirm**.
1. Next, using the **Services** dropdown navigate to the **Lambda** console under Compute.
@@ -56,7 +58,7 @@ Delete the REST API created in module 4. There is a **Delete API** option in the
1. Enter the name of your API when prompted and choose **Delete API**.
### 4. Module 3 - Serverless Backend Cleanup
-Delete the AWS Lambda function, IAM role and Amazon DynamoDB table you created in module 3.
+Delete the AWS Lambda function, IAM role, and Amazon DynamoDB table you created in module 3.
**:white_check_mark: Step-by-step directions**
@@ -120,7 +122,7 @@ AWS Lambda automatically creates a new log group per function in Amazon CloudWat
**:white_check_mark: Step-by-step directions**
-1. From the AWS Console click **Services** then select **CloudWatch** under Management Tools.
+1. From the AWS Console click **Services**, then select **CloudWatch** under Management Tools.
1. Choose **Logs** in the navigation menu.
1. Select the **/aws/lambda/RequestUnicorn** log group. If you have many log groups in your account, you can type `/aws/lambda/RequestUnicorn` into the **Filter** text box to easily locate the log group.
1. Choose **Delete log group** from the **Actions** drop-down.
diff --git a/WebApplication/README.md b/WebApplication/README.md
index afd295f7..47c24b9f 100644
--- a/WebApplication/README.md
+++ b/WebApplication/README.md
@@ -1,8 +1,8 @@
## Serverless Web Application Workshop
-In this workshop you'll deploy a simple web application that enables users to request unicorn rides from the [Wild Rydes][wildrydes] fleet. The application will present users with an HTML based user interface for indicating the location where they would like to be picked up and will interface on the backend with a RESTful web service to submit the request and dispatch a nearby unicorn. The application will also provide facilities for users to register with the service and log in before requesting rides.
+In this workshop, you'll deploy a simple web application that enables users to request unicorn rides from the [Wild Rydes][wildrydes] fleet. The application will present users with an HTML based user interface for indicating the location where they would like to be picked up and will interface on the backend with a RESTful web service to submit the request and dispatch a nearby unicorn. The application will also provide facilities for users to register with the service and log in before requesting rides.
-The application architecture uses [AWS Lambda][lambda], [Amazon API Gateway][api-gw], [Amazon S3][s3], [Amazon DynamoDB][dynamodb], [Amazon Cognito][cognito], and [AWS Amplify Console][amplify-console]. Amplify Console hosts static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser via S3. JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway. Amazon Cognito provides user management and authentication functions to secure the backend API. Finally, DynamoDB provides a persistence layer where data can be stored by the API's Lambda function.
+The application architecture uses [AWS Lambda][lambda], [Amazon API Gateway][api-gw], [Amazon S3][s3], [Amazon DynamoDB][dynamodb], [Amazon Cognito][cognito], and [AWS Amplify Console][amplify-console]. Amplify Console hosts static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser via S3. JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway. Amazon Cognito provides user management and authentication functions to secure the backend API. Finally, DynamoDB provides a persistence layer where data can be stored by the API's Lambda function.
See the diagram below for a depiction of the complete architecture.
@@ -23,7 +23,7 @@ architecture and verify your work.
:warning: These modules are intended to be executed linearly.
-After you have completed the workshop you can delete all of the resources that were created by following the [cleanup guide][cleanup].
+After you have completed the workshop, you can delete all of the resources that were created by following the [cleanup guide][cleanup].
### Next
Step-by-step instructions (expand for details)
Step-by-step instructions (expand for details)
Step-by-step instructions (expand for details)
Step-by-step instructions (expand for details)
:white_check_mark: Step-by-step directions(expand for details)
:white_check_mark: Step-by-step directions (expand for details)
:white_check_mark: Step-by-step directions(expand for details)
:white_check_mark: Step-by-step directions (expand for details)