Deploy a React Application with AWS

AWS is a subsidiary of Amazon & offers a broad range of cloud computing services, which means services using their infrastructure which is hosted on various data centers all over the world which we can rent to run our own solutions.

In this article, we will learn how to deploy a React application using AWS. First, we will build a React Application using create-react-app. Then, we will deploy it in Amazon S3.

Steps to Create a React Application

Step 1Step 2: Check whether Node.js is installed in your system.

node –version

Step 2: Now, write the following command to create a new react app using create-react-app.

npx create-react-app my-web-app

Step3: “cd my-web-app” command will help to navigate to the newly created directory “my-web-app”. Now write “npm start” command to start the local server.

Step4: Now, the React app is running at “http://localhost:3000/“. Type the link in the browser to open the React app.

Running on Local Server (localhost:3000)

So, your react application is ready!!!

Step5: Create a build of this application. Write “npm run build” to build or compile the project’s source code. It will create a “build” directory that contains some static files.

Steps to deploy the React Application in Amazon S3

Step1 (Login to AWS Console): Go to https://console.aws.amazon.com and Login to your AWS Console.

Step2 (Create Bucket): Search S3 Bucket page and go there. Click upon the “Create Bucket” button.

Creating S3 Bucket

Step3 (Update the Public Access Permission): By default, the “Block all public access” field will be checked. This should be unchecked, else the bucket will be private and nobody can access our website.

Now, at the end you see the “Create Bucket” button, click upon that and your bucket will be created. It will look like this.

S3 Bucket (gfg-react-app)

Step4 (Add Bucket Policy): Go to “Permissions” tab and click upon “Edit” button in Bucket Policy section. Now, click upon the “Policy Generator” button.

You can create a policy here. Select Type of Policy as “S3 Bucket Policy”. In Principal, write “*”. In Actions, select “getObject” action. In ARN, copy your bucket ARN and click upon “Add Statement” button. A new button “Generate Policy” will be visible. Clicking upon that button will generate your required policy.

AWS Policy Generator

XML

{
  "Id": "Policy1694774324793",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1694774318358",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::gfg-react-app/*",
      "Principal": "*"
    }
  ]
}

Now, add this generated Bucket Policy in Bucket Policy section. This allows everyone to access the S3 objects using the S3 website endpoint.

Bucket Policy

Step5 (Upload files): Now, come to “Objects” tab and upload all the files present in the “build” directory.

S3 Bucket (gfg-react-app)

Step6 (Static Site Hosting): Now, go to “Properties” tab and at the end, you can find “Static Website Hosting”. Edit it like the pictures given below and Save changes.

Static Website Hosting

Congrats!!! Your React Application is hosted successfully in Amazon S3 bucket.

Running on Amazon S3 Bucket

FAQs On Deploy a React Application on AWS

1. Can React deployment on AWS be automated?

Yes, React Deployment on AWS S3 can be automated setting up Continuous Integration Continuous Deployment Technique (CI/CD) pipeline using tools such as Github Actions, Jenkins etc.

2. Is React still Relevant in 2023?

Yes, React is still relevant in 2023. It continues to be a popular choice for frontend development with the rise of React frameworks like Next.js.

3. Are there any cost considerations when deploying a React app on AWS S3?

Yes, there are several cost considerations when deploying a React app on AWS S3:

S3 Storage Costs: You’ll be charged for the storage space your app’s files occupy in your S3 bucket. Ensure you’re not storing unnecessary or large files to optimize costs.

Data Transfer Costs: AWS may charge for data transfer out of S3. This includes serving files to users and data transferred to and from other AWS services, so consider using CloudFront to reduce these costs.

CloudFront Costs (if used): If you use AWS CloudFront as a CDN, you’ll incur additional costs for data transfer, requests, and regional edge caches.

Request Costs: AWS S3 and CloudFront may charge for HTTP requests made to your resources. Monitor request patterns to estimate these costs accurately.

Monitoring Costs: If you enable detailed monitoring and logging services like AWS CloudWatch, be aware that there may be additional costs associated with these services.

Data Transfer between AWS Services: If your React app interacts with other AWS services (e.g., Lambda, API Gateway, DynamoDB), be aware of potential data transfer costs between these services.

Backup and Versioning Costs: Enabling features like versioning and cross-region replication in S3 may increase your storage costs.