This sample shows how to make a SPA application with serverless backend by AWS Cloud Development Kit (CDK). You can also see from this sample how to control access to API with Amazon Cognito and attach WAF to API Gateway and CloudFront.

Screenshots of this demo are shown below.

There are three cdk stacks, which correspond to each row in the architecure below.

• AuthStack
  • Amazon Cognito
• APIStack
  • Amazon API Gateway, AWS WAF, AWS Lambda
• FrontendStack
  • Amazon CloudFront, AWS WAF, Amazon S3

.
├── backend          # CDK scripts for backend resources
└── frontend
    ├── provisioning # CDK scripts for frontend resources
    └── web          # React scripts

• @aws-amplify/ui-components
• @aws-amplify/ui-react
• aws-amplify
• aws-cdk
• aws-lambda
• jest
• react
• react-scripts
• ts-node
• typescript

• npm
• cdk
• configuration of aws profile

• Run git clone command to download the source code

• Run npm install command in the backend directory.
• Run cdk deploy --all to deploy backend resouces.
  • You can deploy each stack individually like cdk deploy AuthStack.
• When resouces are successfully deployed, outputs such as APIStack.CognitoUserPoolId will be shown in the terminal. These values will be used to deploy frontend resouces.

Outputs:
APIStack.CognitoUserPoolId = xxx
APIStack.CognitoUserPoolWebClientId = xxx
APIStack.ExportsOutputFnGetAttUserPoolxxx = xxx
...
Outputs:
AuthStack.apiEndpointxxx = xxx

• Run npm install command in the frontend/web directory.
• Update frontend/web/src/App.tsx to use the previous outputs.
  • userPoolId
  • userPoolWebClientId
  • apiEndpoint
• Run npm run build in the same directory to build react scripts.

• Move to frontend/provisioning directory and run npm install command.
• Run cdk deploy --all to deploy frontend resouces.
• When resouces are successfully deployed, FrontendStack.endpoint will be displayed in the terminal. You will access the app hosted on cloudfront/s3 by this url.

Outputs:
FrontendStack.endpoint = xxx.cloudfront.net

• In order to sign in the app, you need to create a new cognito user. You can create a user by AWS Management Console or AWS CLI.

See CONTRIBUTING for more information.

This library is licensed under the MIT-0 License. See the LICENSE file.