How to Host a React Web App on 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.

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.

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.

UPLOAD FILES

From the overview section, upload the two files ‘index.html’ and ‘error.html’ to S3.

In the ‘permissions’ menu, allow public read access to these 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

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.

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.

Visit the original blog here. Signup for our weekly newsletter and I’ll send you a summary of articles and videos every week. No spam. No ads.