Hosting a Static Website on AWS S3

Get Started

First we need to create the react application that we want to host on AWS S3. For the simplicity of this tutorial I'll be using the default template from create-react-app

To do this, I'll be using following command.

npx create-react-app s3-hosting-demo

It will create a simple react application with following folder structure that we can use to deploy

For the simplicity of this tutorial I will edit the App.js file a bit. I'll change the default text in the start page.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <h1>Hello World</h1>
      <h2>Hosted in s3</h2>
      </header>
    </div>
  );
}

export default App;

This will show following output in the localhost

Now Lets See, How we can host this application on S3 bucket

First login to AWS console . If you don't have an AWS account, you can register as a free tier user

After login, navigate to Amazon S3 service. Your dashboard should looks like this.

Create a new S3 bucket

Click on "Create bucket" button top right corner

Then Give a name to your s3 bucket. In this case I'll name my bucket as blog-demo-react-app. Check on AWS recommended s3 bucket naming rules

Then you need to allow public access to your s3 bucket. To do this, you need to uncheck the checkbox under Block Public Access settings for this bucket.

Then you need to acknowledge the setting by checking the following box.

Finally click on Create Bucket button under the form and your s3 bucket is created.

Add bucket policy

Once the bucket is created we need to add a bucket policy so that content inside our bucket is publicly accessible. To do this we need to navigate to the new s3 bucket just created and click on
Permissions tab.

When scrolled down a bit, we can see the place to edit the bucket policy.

Click on edit button and paste the following policy. Replace <<YOUR_BUCKET_NAME>> with the name of the bucket that you've created. Then click on "Save Changes" button on the bottom to save the policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1380877761162",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<<YOUR_BUCKET_NAME>>/*"
        }
    ]
}

Bonus

You can use AWS policy generator to generate policies to your AWS services

Enable Static site hosting

Then you need to enable Static website hosting for your s3 bucket. To do this, navigate to the Properties tab in your s3 bucket.

Then scroll to the bottom. you can see the settings for Static website hosting. Click on Edit button.

In the next screen you need to click on Enable and new set of settings will appear.

Now let's keep this for a while and move back to the react app that we've created. We'll create a production build using the following command.

npm run build

This will create a new build folder in the project root.

index.html will be the entry file for this project. Now let's move back to S3 console and add the necessary configurations.

You can also add an error document if you need. Once all the configurations are made, click on the Save Changes button on the bottom to save the changes.
Once everything is configured properly, you should be able to see the website endpoint under Static website hosting

Then navigate to the Objects tab in your S3 bucket and drag and drop the content inside ./build folder to your bucket and upload. Once the content is uploaded it should looks like this.

Then navigate to website endpoint in you web browser. You should be able to see your react application live.

Hope you have enjoyed.

Please comment if you face any problems. I'm happy to help. Also follow me on twitter