Static Website Hosting for my create-react-app on Amazon S3

Christopher Diep
Dec 12, 2018 · 3 min read

I played around with Amazon Web Services today. I was specifically interested in deploying one of my create-react-app’s.

It is a static website currently deployed on Heroku.

https://star-wars-pre-int.herokuapp.com/

I want to see how else I can deploy my app. This know-how would also be useful for a possible personal website. (Still in progress)

Enter Amazon S3

I have the option to create a minified bundle from React using npm run build and then upload those files to an S3 bucket instance.

  1. Go to terminal and use the npm run build to create the build folder containing static files to drop into the S3 bucket.
Minified Bundle for Amazon S3

2. Go to your AWS account and create a bucket with a globally unique name.

It needs a name!

3. When setting permissions, make sure to select the option to not block new bucket policies and to not block access.

Manage the bucket policies.

4. Go to the bucket’s properties after creating it and enable static web site hosting.

Static website hosting.

5. Upload your minified bundle to the bucket.

Dragged and dropped!

6. Add the bucket policy. (Copied and pasted. AWS also has a tool for making one.)

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

7. Check your site. (If there are errors, take time to resolve it. I personally did step 3 at a later point.)

http://starwarsreactspa.s3-website-us-east-1.amazonaws.com/

Takeaway

That’s not too bad. I have another option when I deploy apps. Now, I want to see what AWS has to offer when it comes to Rails or Node.js RESTful API’s.

Also, I am curious about the differences between hosting it on Amazon S3 vs Heroku.

Sources

Christopher Diep

Written by

Freelance Software Engineer | https://christopherdiep.com