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

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

Created by Jean-Baptiste Guillois (AWS)

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 Downloads section of the Node.js documentation.

  • Yarn, installed and configured. For more information, see the Yarn documentation.

Architecture

Architecture for deploying a React-based SPA to Amazon S3 and CloudFront

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 Cloud9 – AWS Cloud9 is an IDE that offers a rich code-editing experience with support for several programming languages and runtime debuggers, and a built-in terminal. AWS Cloud9 contains a collection of tools that you use to code, build, run, test, and debug software, and helps you release software to the cloud.

  • AWS CloudFormation – AWS CloudFormation helps you model and set up your AWS resources, provision them quickly and consistently, and manage them throughout their lifecycle. You can use a template to describe your resources and their dependencies, and launch and configure them together as a stack, instead of managing resources individually. You can manage and provision stacks across multiple AWS accounts and AWS Regions.

  • Amazon CloudFront – Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations for lower latency and improved performance.

  • Amazon S3 – Amazon Simple Storage Service (Amazon S3) is an object storage service. You can use Amazon S3 to store and retrieve any amount of data at any time, from anywhere on the web.

  • Amazon Route 53 – Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service that you can use to perform three main functions in any combination: domain registration, DNS routing, and health checking.

  • IAM – AWS Identity and Access Management (IAM) is a web service for securely controlling access to AWS services. With IAM, you can centrally manage users, security credentials such as access keys, and permissions that control which AWS resources users and applications can access.

  • AWS CloudTrail – AWS CloudTrail is an AWS service that helps you enable governance, compliance, and operational and risk auditing of your AWS account.

  • Amazon CloudWatch – Amazon CloudWatch monitors your AWS resources and the applications you run on AWS in real time. You can use CloudWatch to collect and track metrics, which are variables that you can measure for your resources and applications.

  • Amazon API Gateway – Amazon API Gateway is an AWS service for creating, publishing, maintaining, monitoring, and securing REST, HTTP, and WebSocket APIs at any scale.

Code

This pattern's sample application code is available in the GitHub React-based CORS single-page application repository.

Epics

TaskDescriptionSkills 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.
  1. In the project directory, run the npm install command to initiate the application dependencies. 

  2. 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
TaskDescriptionSkills required
Deploy the AWS CloudFormation template.
  1. Sign in to the AWS Management Console, and then open the AWS CloudFormation console.

  2. Choose Create Stack, and then choose With new resources (standard).

  3. Choose Upload a template file.

  4. Choose Choose file, choose the react-cors-spa-stack.yaml file from the cloned repository, and then choose Next.

  5. Enter a name for your stack, and then choose Next.

  6. Keep all default options, and then choose Next.

  7. Review the final settings for your stack, and then choose Create stack.

App developer, AWS DevOps
Customize your application source files.
  1. After your stack is deployed, open the Output tab and identify the APIEndpoint URL and Bucket name.

  2. Copy the API endpoint URL.

  3. 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.
  1. Open the Amazon S3 console.

  2. Identify and choose the S3 bucket that you created earlier.

  3. Choose Upload, and then choose Add files.

  4. Choose the content of your build folder.

  5. Choose Add folder, and then choose the static directory. Important: Don’t choose the contents; choose the directory.

  6. Choose Upload to upload the files and directory to your S3 bucket.

App developer, AWS DevOps
TaskDescriptionSkills required
Access and test the application.
  1. Open the Amazon CloudFront console, and then choose Distributions.

  2. Choose the relevant distribution ID, choose the Distribution domain name, and then copy the URL.

  3. Open a browser window, and then paste the URL to access the application.

App developer, AWS DevOps
TaskDescriptionSkills required
Delete the S3 bucket contents.
  1. Open the Amazon S3 console and choose the bucket that you created earlier. 

  2. Choose Empty to delete the bucket’s contents.

AWS DevOps, App developer
Delete the AWS CloudFormation stack.
  1. Open the AWS CloudFormation console and choose the stack that you created earlier.

  2. Choose Delete to delete the stack and all related resources.

AWS DevOps, App developer