How to Deploy ReactJS App with S3 Static Hosting

How to Deploy ReactJS App with S3 Static Hosting

July 1, 2020 / Eternal Team

Are you worried about deploying the ReactJS app on S3?????

Don’t worry our AWS expert team will explain to you how to deploy on AWS with a screenshot so it will be easy for you.

Before we started there are some prerequisites that you need to have:

  1. You have to have an AWS account without an account even if I can’t help you….. 🙂
  2. AWS IAM User
  3. Install AWS CLI

Now sign-in to your AWS account

Step 1

Now we are creating some IAM rules, this service you can find under the “security, identity and compliance” section.

Deploy ReactJS App with S3 Static Hosting

Deploy ReactJS App with S3 Static Hosting

Step 2

Time to attach the policy to the created user Policy name “AdministratorAccess”

Deploy ReactJS App with S3 Static Hosting

Click on “preview” And Access Key ID and the Secret Access Key for later use. So click Download .csv. Click Close.

Step 3

Open the terminal window, because it’s time to install the AWS CLI.

$ brew install awscli

Once the AWS CLI has been installed, copy the following command passing in your Access Key ID and your Secret Access Key from the file you downloaded called credentials.csv.

$ aws configure

AWS Access Key ID [None]: AswqAfOSFfDfN7xraMALQ
AWS Secret Access Key [None]: wJaarQUtDFEMIQK7MFENGVbfiWYEHAMPDEKUY
Default region name [None]: us-west-2
Default output format [None]: ENTER

I’m using macOS so that if you are using Linux or Windows the command will change.

Install Node/Npm,

$ brew install node
$ node -v
$ npm -v

We’re going to use the create-react-app to set up our app.

$ yarn create react-app serverless-guru-app
$ cd serverless-guru-app
$ yarn start

Once your react-app is created and open

http://localhost:3000/

Step 4

Deploy ReactJS App with S3 Static Hosting

Now we are going to create an S3 bucket.

Deploy ReactJS App with S3 Static Hosting

Make sure your bucket is publicly accessible, now click on the bucket and click the Properties tab. And go to Static Website Hosting. Select Use this bucket to host a website option and enter index.html for the Index document. And save it.

Deploy ReactJS App with S3 Static Hosting

Now click on the Permissions tab and select copy below Bucket Policy.

{
 "Version": "2012-10-17",
 "Statement": [
   {
     "Sid": "AllowPublicReadAccess",
     "Effect": "Allow",
     "Principal": "*",
     "Action": [
       "s3:GetObject"
     ],
     "Resource": [
       "arn:aws:s3:::example-bucket/*"
     ]
   }
 ]
}

Note Write your bucket name instead of “example-bucket” Great work. Everything on the AWS side is ready to go.

Step 5

Now open up our react-app project in a text editor and create a deployment script to make updating our live ReactJS application. And Open your package.json file. Now we add the script and deploy, so we will use the AWS CLI to sync our build directory to our S3 bucket.

#aws s3 sync build/ s3://example-bucket --acl public-read

Deploy ReactJS App with S3 Static Hosting

Now open up your S3 bucket in the AWS Console and copy the URL from the Static Web Hosting The URL is like.

example-bucket.s3-website-us-east-1.amazonaws.com.

Deploy ReactJS App with S3 Static Hosting

Congratulations! You created and deployed a ReactJS web application in your AWS account.

AWS-Consulting-Partner

Talk to AWS Certified Consultant

Want to start a project?

It’s simple.

Contact us