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


Folders and files

Last commit message
Last commit date

Latest commit



26 Commits

React SPA App with Serverless Backend and Congito Auth Demo


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.

screen-cognito screen-home


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


Directory Structures

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

Main Libraries

  • @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

Getting started

1. Clone the repository

  • Run git clone command to download the source code

2. Deploy backend resources

  • 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.
APIStack.CognitoUserPoolId = xxx
APIStack.CognitoUserPoolWebClientId = xxx
APIStack.ExportsOutputFnGetAttUserPoolxxx = xxx
AuthStack.apiEndpointxxx = xxx

3. Deploy frontend resources

3.1 Build React app

  • 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.

3.2 Deploy frontend resources

  • 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.
FrontendStack.endpoint =

4. Create Cognito user

  • 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.


This sample shows how to make a React SPA application with serverless backend by AWS Cloud Development Kit (CDK).



Code of conduct

Security policy





No releases published


No packages published