Deploy a React-based single-page application to Amazon S3 and CloudFront
Created by Jean-Baptiste Guillois (AWS)
Code repository: | Environment: Production | Technologies: Websites & web apps; Cloud-native; Serverless |
Workload: All other workloads | AWS services: Amazon CloudFront; Amazon S3; Amazon API Gateway |
Summary
A single-page application (SPA) is a web application implementation that loads a web document and updates it by using JavaScript APIs. Your customers can then use your website without loading entire pages from the server, which helps improve your website's performance and provides a more dynamic user experience.
This pattern provides a step-by-step approach and code to host a single-page application (SPA) written in React on Amazon Simple Storage Service (Amazon S3) and Amazon CloudFront. The pattern’s sample SPA uses a REST API exposed by Amazon API Gateway to demonstrate cross-origin resource sharing (CORS) best practices.
Prerequisites and limitations
Prerequisites
An active AWS account.
An integrated development environment (IDE), such as AWS Cloud9.
Node.js and
npm
, installed and configured. For more information, see the Downloadssection of the Node.js documentation. Yarn, installed and configured. For more information, see the Yarn documentation
. Git, installed and configured. For more information, see the Git documentation
.
Architecture

Technology stack
Amazon API Gateway
Amazon CloudFront
Amazon Route 53
Amazon Simple Storage Service (Amazon S3)
Amazon Identity and Access Management (IAM)
Amazon CloudWatch
AWS CloudTrail
AWS CloudFormation
Tools
AWS services
Amazon API Gateway helps you create, publish, maintain, monitor, and secure REST, HTTP, and WebSocket APIs at any scale.
AWS Cloud9 is an IDE that helps you code, build, run, test, and debug software. It also helps you release software to the AWS Cloud.
AWS CloudFormation helps you set up AWS resources, provision them quickly and consistently, and manage them throughout their lifecycle across AWS accounts and Regions.
Amazon CloudFront speeds up distribution of your web content by delivering it through a worldwide network of data centers, which lowers latency and improves performance.
AWS CloudTrail helps you audit the governance, compliance, and operational risk of your AWS account.
Amazon CloudWatch helps you monitor the metrics of your AWS resources and the applications you run on AWS in real time.
AWS Identity and Access Management (IAM) helps you securely manage access to your AWS resources by controlling who is authenticated and authorized to use them.
Amazon Route 53 is a highly available and scalable DNS web service.
Amazon Simple Storage Service (Amazon S3) is a cloud-based object storage service that helps you store, protect, and retrieve any amount of data.
Code
This pattern's sample application code is available in the GitHub React-based CORS single-page application
Epics
Task | Description | Skills required |
---|---|---|
Clone the repository. | We recommend using AWS Cloud9 as the IDE for this pattern, but you can also use another IDE (for example, Visual Studio Code or IntelliJ IDEA). Run the following command to clone the sample application's repository into your IDE:
| App developer, AWS DevOps |
Locally deploy the application. |
| App developer, AWS DevOps |
Locally access the application. | Open a browser window and enter the | App developer, AWS DevOps |
Task | Description | Skills required |
---|---|---|
Deploy the AWS CloudFormation template. |
| App developer, AWS DevOps |
Customize your application source files. |
| App developer |
Build the application package. | In your project directory, run the | App developer |
Deploy the application package. |
| App developer, AWS DevOps |
Task | Description | Skills required |
---|---|---|
Access and test the application. |
| App developer, AWS DevOps |
Task | Description | Skills required |
---|---|---|
Delete the S3 bucket contents. |
| AWS DevOps, App developer |
Delete the AWS CloudFormation stack. |
| AWS DevOps, App developer |