This project was bootstrapped using Create React App and demonstrates how to host a Single Page Application (SPA) on AWS S3 with CloudFront integration.
The goal of this project is to provide a simple template for hosting a React SPA on AWS S3 with CloudFront. While hosting a static React app is straightforward, using React Router can present challenges due to routing issues in such environments. This template resolves those issues by offering a ready-to-use deployment solution.
To use the deploy.sh script, ensure that Node Version Manager (NVM) is installed.
To use the undeploy.sh script, ensure that jq is in place.
This script automates the deployment of your React app to AWS by creating the necessary infrastructure:
- S3 Bucket: The app will be stored and served from this bucket.
- CloudFront Distribution: Acts as a content delivery network (CDN) to provide a globally distributed access point for your app.
- CloudFront Function: Ensures that React Router works correctly by intercepting CloudFront requests.
The script leverages AWS CloudFormation to create and manage these resources. Once the infrastructure is in place, it builds your React app and uploads the files to the S3 bucket.
This script cleans up all the resources created during deployment:
- Deletes the S3 bucket
- Removes the CloudFront distribution
- Deletes the associated function