How to Host a React Web App on AWS S3 by@awstutor

How to Host a React Web App on AWS S3

How to Host a React Web App on S3 can be used to host a single-page page. We will use the same name as the name of our website. We need to create a new page and upload the files to S3 to the service. The next step is to download the files and upload them to the site to the S3 service. You can also use the service as a single page page to host your own website. Use the service to test your knowledge of the service and test your ability to connect to a new website.
image
AWS Tutor HackerNoon profile picture

AWS Tutor

www.awstutor.io

facebook social iconlinkedin social icontwitter social icon

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.

image

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.

image

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.

image

UPLOAD FILES

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

image

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

image

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

image

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.

image

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.

react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!