How to deploy react website in AWS S3 in 7 Steps

In this tutorial, we will host a React website in AWS S3

Create a react application locally

To create a react application, you have to install node and npm first. To install both:

Once installed, open your terminal or vscode terminal and write:

npx create-react-app my-app
cd my-app
npm start

Then open localhost:3000

Step 2: Build website to deploy

Now run this command to make production builds :

npm run build

We actually deploy this build folder in production environment.

Create an AWS account

Create aws acount aws.amazon.com or go to your aws account.

Create an S3 bucket

If you are planning to use domain name for your website, be sure to create bucket with same name.

Enter a bucket name and click “Create”.

Step 5: Configure static website hosting in S3

Go to S3 bucket properties and enable “Static Website Hosting”. Select “Use this bucket to host a website”. Give “index.html” as the index document and error document.

Make a note of your endpoint. This is the URL using which you can access your website. Once you are done, click Save.

Set S3 bucket read permissions to public

Now go to bucker ‘Permissions” and paste the below code :

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your_bucket_name>/*"
        }
    ]
}

Upload website contents to S3

Now you have to upload the contents of your build folder to your S3 bucket.

Open your S3 bucket and click “Upload”.

Drag and drop the contents of your build folder to the upload window. Check if all the contents of your build folder is present, including sub-folders and files. Once your verify this, click “Upload”.

Awesome. Your website is live now.