AWS S3 — Hosting a React Web App on AWS S3
AWS S3 — Hosting a React Web App on AWS S3
www.awstutor.io

AWS Storage

AWS S3 — Hosting a React Web App Using AWS S3

In this tutorial, we will go through the steps required to configure an S3 bucket to host a React.js web application.

Manish Manalath
Nov 12, 2019 · 4 min read

Single Page Applications have been massive game-changers in the web application industry. Frameworks like React and Angular have exploded in popularity due to their ease of development and their flexibility in being standalone applications compared to being tied together with backend languages.

In addition to being a file storage service, AWS S3 allows us to host web pages similar to a web hosting service. Though it doesn't support server-side languages like PHP or Node.js, S3 buckets can be configured to render HTML pages as websites.

In this tutorial, we will write a simple react.js application and server it to the world via an S3 bucket.

REACT APPLICATION

Go to the project website, and click on ‘view source’, you should see the following few lines of code.

We will need this file saved as ‘index.html’. We will also need a 404 page for S3 to redirect to (in case of non-existent URLs), so we will create another page called ‘error.html’. To save you time and a few minor edits, you can download the archive here and extract it to get these files.

You should have two files, index.html and error.html, ready to be uploaded to S3. If you are interested in learning more about react, I would recommend Codeacademy’s React101 course to get started.

S3 STATIC WEBSITE CONFIGURATION

In ‘Set Permissions’ menu, uncheck the ‘Block all public access’ option since the default option for all S3 buckets is to block public access to bucket files. In order for others to view our website, we have to allow them access to our index and error files.

Allow public access to the bucket

Once you have created the bucket, click on the bucket name and go to the ‘Properties’ menu. Click on the ‘Static Website Hosting’ and choose ‘Use this bucket to host a website’ option.

In the text boxes for the index and error document, type ‘index.html’ and ‘error.html’. Save and go to the ‘Overview’ section.

Allow static website hosting

UPLOAD FILES

Uploading files

In the ‘permissions’ menu, allow public read access to these files.

Public read access to uploaded files

Once the upload is complete, you should be able to view the website hosted on S3. The format of the URL will be https://<bucketname>.s3-website-<region>.amazonaws.com.

website URL

You can find the exact website URL under ‘properties’ -> ‘static website hosting’. Click on the URL and you should see your calculator app rendered on your screen.

Final Calculator App

Hope this tutorial helped you to understand the process of hosting a website on S3. You can also call third party REST APIs using your single page application. If you are stuck at any point while following this tutorial, let me know in the comments.

Hope you found this article useful. Signup for my weekly newsletter and I’ll send you a summary of articles every week. No spam. No ads.

AWS Tutor

Articles, How-Tos and Use Cases on AWS Tools and Services

Manish Manalath

Written by

10 years as a Digital Nomad. Writes on Tech (http://awstutor.io) and Productivity. Connect with me on Linkedin (linkedin.com/in/manishmshiva)

AWS Tutor

AWS Tutor

Articles, How-Tos and Use Cases on AWS Tools and Services

More From Medium

More from AWS Tutor

More on AWS from AWS Tutor

More on Cloud Computing from AWS Tutor

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade