How to deploy react app to Amazon AWS S3

During my last Christmas break, I decided to make good use of my holidays and start migrating my My Day To-Do to AWS. As I have talked about before, for my day to-do desktop web app, I am building it using React with Typescript. When I tried deploying the MVP, I ran into a number of little problems, hence my goal here is to write a few little blogposts or make some Youtube videos that talk about how to overcome the problems I faced. In this article you are going to see how to deploy react app to an Amazon AWS S3 bucket and host it as a static site. In addition to that, this tutorial will also show you how you can point your custom domain to your AWS S3 bucket.

Deploy a react app to AWS S3 bucket

You can create an S3 bucket using both the AWS admin dashboard in your favourite browser as well using the command line. This article will focus on how to achieve it by using the AWS dashboard GUI as opposed to doing it via the command line using the AWS CLI. The command line is a whole other thing and there is additional complexity on configuring the dashboard and all.

In this scenario, say you want to serve your app via a domain called http://mydaytodos.com

1. Login to your AWS dashboard
2. Navigate to S3 under services
3. Click on the “Create bucket”
4. In the page that follows, for bucket name, name it e.g. “mydaytodos.com”
   1. Ensure your bucket name matches the domain you that you will point to the bucket
5. Scroll below in the web page,
6. Click the checkbox to un-tick “Block all public access” (do this for now)
7. Leave the rest of the options as they are
8. Navigate to the bottom and click “Create bucket”
9. This will create the bucket and redirect you to the bucket list page
10. Click on the newly created bucket to examine bucket details
11. Click on the Properties tab next to Objects
12. Navigate to the section called Static website hosting
    1. At the time of writing, it’s at the bottom of the properties page
13. Click edit and click on the Enable radio button
14. Enter index.html in the index document text field
15. Save changes

Deploy your static website to your AWS S3 bucket

1. Build your react app
   1. To build this app clone it to your computer
   2. Navigate into the directory e.g. git bash on windows, terminal on mac or ubuntu os
   3. Build the app with either yarn build
2. After you have built your app, sign into to aws on your browser
3. In services navigate to the S3 service
4. Click on buckets
5. Select your bucket mydaytodos.com
6. Click upload
   1. Click Add Folder and upload the static folder from the build directory of your react app
   2. Next, click Add Files and add all the files in your build folder
7. Click upload
8. In the next screen click close once your files have been uploaded

To see your newly deployed website,

1. From your list of Buckets in your AWS console
2. Click on your newly created bucket name e.g. “mydaytodos.com”
3. Click on Properties (next to the objects tab)
4. Navigate to the bottom
5. Click the Bucket website endpoint to see your site in the browser

Conclusion

In this little post, you saw how to host a react app as a static website on Amazon AWS S3. Hope you find this useful

If you find any of my posts useful and want to support me, you can buy me a coffee 🙂

https://www.buymeacoffee.com/bhumansoni

Have a read of some of my other posts on AWS

Some of my other posts on Javascript …

What is Javascript event loop? – My Day To-Do (mydaytodo.com)