DEV Community

Cover image for Hosting a Static Website on AWS S3
Eranda K.
Eranda K.

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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

app folder structure

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;
Enter fullscreen mode Exit fullscreen mode

This will show following output in the localhost

updated output

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.

s3 dashboard

Create a new S3 bucket

Click on "Create bucket" button top right corner
Create bucket

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.

Public Access

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

Public Access ack

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.

Permissions

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

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>>/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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.

Properties

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

Static website hosting

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
Enter fullscreen mode Exit fullscreen mode

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

build

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

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

Bucket website endpointg

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.

Uploaded content

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

Hosted in s3

Hope you have enjoyed.

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

Top comments (0)