Skip to content
This repository has been archived by the owner on Nov 16, 2022. It is now read-only.

Sample application with instructions and examples for "Hands-on workshop with AWS JavaScript SDK v3"

License

Notifications You must be signed in to change notification settings

aws-samples/aws-sdk-js-v3-workshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

aws-sdk-js-v3-workshop

If you're looking for scripts to upgrade your code from v2 to v3, see aws-sdk-js-codemod.

In this workshop, we're going to:

  • Build a simple note taking application.
  • Identify the benefits of using AWS SDK for JavaScript v3 over v2.

The note taking application is the modified version from the original Open Source MIT licensed project shared in the tutorials on serverless-stack.

If you are starting a new project with AWS SDK for JavaScript v3, then please refer aws-sdk-js-notes-app which uses more services in addition to S3 and DynamoDB.

Table of Contents

Pre-requisites

To set up this workshop package, complete the following tasks:

  • Install Node.js by following these steps:
    1. Install nvm.
    2. Use node v12.x.x by running nvm use or nvm use 12 in a terminal window.
    3. Verify that node is installed by running node -v in a terminal window and confirm that it shows the latest version of v10, such as v12.17.0).
  • Install yarn.
    • We recommend using yarn for its simplicity, speed and yarn workspaces.
  • Install dependencies by running yarn.
  • If you don't have an AWS account, create one.
    • If you're an Amazon employee, see the internal wiki for creating an AWS account.
  • Install the AWS CLI.
    • Verify that the AWS CLI is installed by running aws in a terminal window.
  • Set up AWS Shared Credential File.
    • Your ~/.aws/credentials (%UserProfile%\.aws\credentials on Windows) should look like the following:
      [default]
      aws_access_key_id = <ACCESS_KEY>
      aws_secret_access_key = <SECRET_ACCESS_KEY>
      
    • Your ~/.aws/config (%UserProfile%\.aws\config on Windows) should look like the following:
      [default]
      region = us-west-2
      

Exercise1

This exercise code uses AWS SDK for JavaScript v2 as follows:

  • backend performs create, delete, get, list and update operations on DynamoDB.
  • frontend does put, get, delete operations using an S3 browser client.

The README files have instructions on how to move both to v3. The backend and frontend can be worked on independently as long as the APIs don't change.

Create backend API

  • Run: yarn build:backend
  • This generates bundles to be deployed to lambda.

Deploy infrastructure

  • Run: yarn cdk deploy
  • This command:
    • Creates AWS infrastructure using AWS Cloud Development Kit.
    • Deploys backend bundles to lambda.
    • Creates resources to be used in the frontend.

Prepare frontend API

  • Run: yarn prepare:frontend
  • This command copies AWS resources to the frontend config.

Debug frontend

  • Run: yarn start:frontend
  • This command starts ReactApp for testing frontend, and opens the URL in browser.

Migrate backend from v2 to v3

Follow backend README.md.

Migrate frontend from v2 to v3

Follow frontend README.md.

Clean up

The Cloudformation stack can be deleted by running: yarn cdk destroy

Exercise2

This exercise has the code which uses AWS SDK for JavaScript v3, which you would have got after finishing Exercise1:

  • backend performs create, delete, get, list and update operations on DynamoDB.
  • frontend does put, get, delete operations using an S3 browser client.

Edit existing APIs or create new ones to use AWS Services you're familiar with in the backend. For example:

Exercise3

Inspect the differences of stack trace if call DynamoDB.putItem with invalid resources in V2 and V3 SDK.

Using v2, call a service with invalid parameters as shown below:

Code
const DynamoDB = require("aws-sdk/clients/dynamodb");
const client = new DynamoDB({ region: "us-west-2" });
const request = client.putItem({
  TableName: "FakeName",
  Item: {
    Foo: { S: "Foo" },
  },
});
request.send((err, data) => {
  console.log(err);
});

When the code fails, the stack trace would look like:

Stack trace
ResourceNotFoundException: Requested resource not found
    at Request.extractError (XXX/node_modules/aws-sdk/lib/protocol/json.js:51:27)
    at Request.callListeners (XXX/node_modules/aws-sdk/lib/sequential_executor.js:106:20)
    at Request.emit (XXX/node_modules/aws-sdk/lib/sequential_executor.js:78:10)
    at Request.emit (XXX/node_modules/aws-sdk/lib/request.js:683:14)
    at Request.transition (XXX/node_modules/aws-sdk/lib/request.js:22:10)
    at AcceptorStateMachine.runTo (XXX/node_modules/aws-sdk/lib/state_machine.js:14:12)
    at XXX/node_modules/aws-sdk/lib/state_machine.js:26:10
    at Request.<anonymous> (XXX/node_modules/aws-sdk/lib/request.js:38:9)
    at Request.<anonymous> (XXX/node_modules/aws-sdk/lib/request.js:685:12)
    at AcceptorStateMachine.runTo (XXX/node_modules/aws-sdk/lib/state_machine.js:14:12)
    at XXX/node_modules/aws-sdk/lib/state_machine.js:26:10
    at Request.<anonymous> (XXX/node_modules/aws-sdk/lib/request.js:38:9)
    at Request.<anonymous> (XXX/node_modules/aws-sdk/lib/request.js:685:12)
    at AcceptorStateMachine.runTo (XXX/node_modules/aws-sdk/lib/state_machine.js:14:12)
    at XXX/node_modules/aws-sdk/lib/state_machine.js:26:10
    at Request.<anonymous> (XXX/node_modules/aws-sdk/lib/request.js:38:9)
    at Request.<anonymous> (XXX/node_modules/aws-sdk/lib/request.js:685:12)
    at Request.callListeners (XXX/node_modules/aws-sdk/lib/sequential_executor.js:116:18)

This happens, as Request.transition exists multiple times as the SDK state machine stuck at some state and makes stack trace unreadable.

Is the same operation is tried in v3:

Code
const {
  DynamoDBClient,
  PutItemCommand,
} = require("@aws-sdk/client-dynamodb-node");
const client = new DynamoDBClient({ region: "us-west-2" });
const command = new PutItemCommand({
  TableName: "FakeName",
  Item: {
    Foo: { S: "Foo" },
  },
});
(async () => {
  try {
    await client.send(command);
  } catch (e) {
    console.log(e);
    throw e;
  }
})();

The stack trace would be much smaller:

Stack trace
ResourceNotFoundException: Requested resource not found
    at JsonRpcParser.exports.jsonErrorUnmarshaller [as parseServiceException] (XXX/node_modules/@aws-sdk/json-error-unmarshaller/build/index.js:37:70)
    at JsonRpcParser.<anonymous> (XXX/node_modules/@aws-sdk/protocol-json-rpc/build/JsonRpcParser.js:22:40)
    at step (XXX/node_modules/tslib/tslib.js:136:27)
    at Object.next (XXX/node_modules/tslib/tslib.js:117:57)
    at fulfilled (XXX/node_modules/tslib/tslib.js:107:62)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Contributing

Contributions are more than welcome. Please read the code of conduct and the contributing guidelines.

License Summary

This sample code is made available under the MIT license. See the LICENSE file.

About

Sample application with instructions and examples for "Hands-on workshop with AWS JavaScript SDK v3"

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published