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
- Login to your AWS dashboard
- Navigate to S3 under services
- Click on the “Create bucket”
- In the page that follows, for bucket name, name it e.g. “mydaytodos.com”
- Ensure your bucket name matches the domain you that you will point to the bucket
- Scroll below in the web page,
- Click the checkbox to un-tick “Block all public access” (do this for now)
- Leave the rest of the options as they are
- Navigate to the bottom and click “Create bucket”
- This will create the bucket and redirect you to the bucket list page
- Click on the newly created bucket to examine bucket details
- Click on the Properties tab next to Objects
- Navigate to the section called Static website hosting
- At the time of writing, it’s at the bottom of the properties page
- Click edit and click on the Enable radio button
- Enter index.html in the index document text field
- Save changes
Deploy your static website to your AWS S3 bucket
- Build your react app
- To build this app clone it to your computer
- Navigate into the directory e.g. git bash on windows, terminal on mac or ubuntu os
- Build the app with either yarn build
- After you have built your app, sign into to aws on your browser
- In services navigate to the S3 service
- Click on buckets
- Select your bucket mydaytodos.com
- Click upload
- Click Add Folder and upload the static folder from the build directory of your react app
- Next, click Add Files and add all the files in your build folder
- Click upload
- In the next screen click close once your files have been uploaded
To see your newly deployed website,
- From your list of Buckets in your AWS console
- Click on your newly created bucket name e.g. “mydaytodos.com”
- Click on Properties (next to the objects tab)
- Navigate to the bottom
- 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)
0 Comments