# React App with basic backend Creates a simple React note taking app and deploys it to an Amazon S3 bucket backed by a Amazon CloudFront distribution. Also deploys an Amazon DynamoDB table and an Amazon API Gateway with basic read/write endpoints. This example used [this helpful guide](https://www.freecodecamp.org/news/aws-cdk-v2-three-tier-serverless-application/) heavily in it's creation. The React app is located inside the `/lib/web` folder The lambda functions are located inside `/lib/lambda` The CDK Stack is located in `cdk-react-app.ts` The `cdk.json` file tells the CDK Toolkit how to execute your app. ## How it works ![Diagram of the architecture](./react-cdk-diagram.png) The files in the `/lib/web` are compiled into a bundle by [Vite](https://vitejs.dev/) which is a lightweight module bundling alternative to Webpack. The built files are then uploaded to an Amazon S3 bucket and a Amazon CloudFront distribution is created that has an Origin Access Identity to the Amazon S3 bucket. - Note: The Amazon S3 bucket is **not** configured to be a static website, because it is served through Amazon CloudFront instead. A DynamoDB table is created and a basic schema is defined for notes, along with an Amazon API Gateway and two Lambda functions are configured to trigger from the API Gateway and access the DynamoDB table. Finally, a `config.json` file is created with the URL of the Amazon API gateway and uploaded to the same Amazon S3 bucket as the built React files. The React app looks for this config file so it knows where to send API requests. This is not ideal for production/real projects, but it is sufficient to keep this example project self contained and working without any additional steps. ## Develop * `npm install` to install all the dependencies. * `npm run watch` opens a development version of the React app that watches for changes. ## Deploy First, bootstrap your environment. Then run `npm run deploy` and it will build and deploy everything for you. ## Cleanup To remove all the resources, simply run `cdk destroy` and it will take care of it for you.