Deploy a React-based single-page application to Amazon S3 and CloudFront

Created by Jean-Baptiste Guillois (AWS)

Code repository: React-based CORS single-page application	Environment: Production	Technologies: Web & mobile 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 website or web application that dynamically updates the contents of a displayed webpage by using JavaScript APIs. This approach enhances the user experience and performance of a website because it updates only new data instead of reloading the entire webpage from the server.

This pattern provides a step-by-step approach to coding and hosting an SPA that’s written in React on Amazon Simple Storage Service (Amazon S3) and Amazon CloudFront. The SPA in this pattern uses a REST API that’s exposed by Amazon API Gateway and also demonstrates best practices for cross-origin resource sharing (CORS).

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 Downloads section 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

This architecture is automatically deployed by using AWS CloudFormation (infrastructure as code). It uses Regional services such as Amazon S3 to store the static assets and Amazon API Gateway to expose Regional API (REST) endpoints. The application logs are collected by using Amazon CloudWatch. All AWS API calls are audited in AWS CloudTrail. All security configuration (for example, identities and permissions) is managed in Amazon Identity and Access Management (IAM). Static content is delivered through the Amazon CloudFront content delivery network (CDN), and DNS queries are handled by Amazon Route 53.

Technology stack  

• Amazon API Gateway

• Amazon CloudFront

• Amazon Route 53

• Amazon S3

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

Epics

Locally build and deploy your application

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: git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa	App developer, AWS DevOps
Locally deploy the application.	In the project directory, run the npm install command to initiate the application dependencies.  Run the yarn start command to start the application locally.	App developer, AWS DevOps
Locally access the application.	Open a browser window and enter the http://localhost:3000 URL to access the application.	App developer, AWS DevOps

Deploy the application

Task	Description	Skills required
Deploy the AWS CloudFormation template.	Sign in to the AWS Management Console, and then open the AWS CloudFormation console. Choose Create Stack, and then choose With new resources (standard). Choose Upload a template file. Choose Choose file, choose the react-cors-spa-stack.yaml file from the cloned repository, and then choose Next. Enter a name for your stack, and then choose Next. Keep all default options, and then choose Next. Review the final settings for your stack, and then choose Create stack.	App developer, AWS DevOps
Customize your application source files.	After your stack is deployed, open the Output tab and identify the APIEndpoint URL, Bucket name, and CFDistributionURL. Copy the API endpoint URL. Navigate to <project_root>/src/App.js, and then paste the URL into the APIEndPoint variable value on line 26 of the App.js file.	App developer
Build the application package.	In your project directory, run the yarn build command to build the application package.	App developer
Deploy the application package.	Open the Amazon S3 console. Identify and choose the S3 bucket that you created earlier. Choose Upload, and then choose Add files. Choose the content of your build folder. Choose Add folder, and then choose the static directory. Important: Don’t choose the contents; choose the directory. Choose Upload to upload the files and directory to your S3 bucket.	App developer, AWS DevOps

Test the application

Task	Description	Skills required
Access and test the application.	Open a browser window, and then paste the URL (the CFDistributionURL output from the CloudFormation stack that you deployed previously) to access the application.	App developer, AWS DevOps

Clean up the resources

Task	Description	Skills required
Delete the S3 bucket contents.	Open the Amazon S3 console and choose the bucket that was created earlier by the stack (the first bucket whose name starts with react-cors-spa-).  Choose Empty to delete the bucket’s contents. Choose the second bucket that was created earlier by the stack (the second bucket whose name starts with react-cors-spa- and ends with -logs). Choose Empty to delete the bucket’s contents.	AWS DevOps, App developer
Delete the AWS CloudFormation stack.	Open the AWS CloudFormation console and choose the stack that you created earlier. Choose Delete to delete the stack and all related resources.	AWS DevOps, App developer

Additional information

To deploy and host your web application, you can also use AWS Amplify Hosting, which provides a Git-based workflow for hosting full-stack, serverless web apps with continuous deployment. Amplify Hosting is part of AWS Amplify, which provides a set of purpose-built tools and features that enable frontend web and mobile developers to quickly and easily build full-stack applications on AWS.