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

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.

Similar Reads

Steps to Create a React Application

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

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

FAQs On Deploy a React Application on AWS

...

Contact Us