Deploy React App In Amazon S3

If you have used React to build a web app, now you want to share it with the world, well there are many ways to host your web app. Here in this blog, we will be deploying our web app in amazon Simple Storage Service or S3.

What is Amazon S3?

• Amazon Simple Storage Service is storage for the Internet. It is designed to make web-scale computing easier for developers.
• Amazon S3 has a simple web services interface that you can use to store and retrieve any amount of data, at any time, from anywhere on the web.
• It gives any developer access to the same highly scalable, reliable, fast, inexpensive data storage infrastructure that Amazon uses to run its own global network of web sites.

If you want to follow along then you can git clone our repo from: https://github.com/roydeboys/factchecker or else you can create your own app and proceed further.

Creating an S3 bucket

• Visit the aws console https://console.aws.amazon.com/.
• Under services type s3 and select simple storage service.
• Once you have entered the s3 console now hit create bucket.

• Provide a unique s3 bucket name and select a region.
• Uncheck block all public access.
• Leave rest options to default.
• Click on Create Bucket.

• Now your s3 bucket has been created, and now we will edit the the permissions.
• Click on your s3 bucket.
• Click Properties, and go to static website hosting.
• Check on use this bucket to host a website.
• Under index document type index.html.
• Click save.

• Click Permissions, under that select bucket policy.
• Under bucket policy copy the following code and paste it. Just replace with your bucket name in <BUCKET-NAME>

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

Principal: This is the who. Using a *, we're saying everyone. Literally, everyone.

Action: This is what the principal can do. We're saying everyone can perform a "get."

Resource: This is the which. Against which resources (objects) can the principal perform this action?

So, altogether, we're saying everyone can get any object in <BUCKET-NAME>.

Upload react app to s3 bucket

• Open your terminal navigate to your project directory and install the node modules by using the command sudo npm install.
• Now we will run the npm run build command which will create a build/ folder. That folder will be totally self-contained. Everything needed to run our app will be included.

• We can see that the build folder is created.Let's take a look inside the build folder.

• index.html is the centerpiece of our app. If you were to look at the file, you'd see that it loads all of our CSS and JavaScript files.
• Now we will upload the contents of the build folder to the s3 bucket.
• Click the Overview option in the bucket.
• Now just drag and drop the build files in the bucket.

• Click upload.
• Now our website is uploaded and can be accessed from any part of the globe.
• Click on the index.html file.
• Below you will find an object URL with which our website can be accessed.

I hope this blog was informative and have added value to your knowledge. If you have any queries, you can message me or contact me in inkedin.com/in/sourav-sutradhar-b78075149/.