DevOps

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.

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

We are going to use the Calculator App by Andrew Farmer and host it using S3. Even though this site maintains a proper repository, we will quickly grab the HTML file directly from the source of the website.

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

Now that we have our HTML files ready, let's upload them to S3. Go to S3 and create a new bucket. Make sure the bucket name is unique since S3 doesn't allow an existing bucket name to be used again.