Hosting a Static Website on AWS S3
Tags: aws, react, devops, webdev
Published: 2022-06-18 23:10:00

## 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](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)

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

```bash
npx create-react-app s3-hosting-demo
```

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

![app folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yumjhmjt5z8ko66rpvv.png)

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.

```js
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

![updated output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4o0nyq3938a1klg1hb8.png)

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

First login to [AWS console](https://aws.amazon.com/console/) . If you don't have an AWS account, you can register as a [free tier](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all) user
 
 After login, navigate to Amazon S3 service. Your dashboard should looks like this.
 
![s3 dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko0r6l3aob6m40r44wyt.png)

### Create a new S3 bucket
 
Click on "Create bucket" button top right corner
![Create bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph2p986ca0f4fug311oj.png)

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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnc850nyi6okf2c2hzeh.png)

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

![Public Access ack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qezx5f15objxazocdqb.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbgs96el9pznit7a1r80.png)
 
When scrolled down a bit, we can see the place to edit the bucket policy.

![bucket policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax3wikjg7xwmjb5x1pex.png)

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.

```json
{
    "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] (https://awspolicygen.s3.amazonaws.com/policygen.html) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmt2mb84127wcug7tyk8.png)

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

![Static website hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8gpjdx71dlvcvqj3r4v.png)

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.

```bash
npm run build
```
This will create a new `build` folder in the project root.

![build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jc3rkljeyecvfgjbrlo.png)

`index.html` will be the entry file for this project. Now let's move back to S3 console and add the necessary configurations. 
 
![configurations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3vqhji95p6ph8xf2pna.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69j5usuen62a2scjbo71.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6dt10uq9oxm792zjl6y.png)

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

![Hosted in s3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p2sunjig9xjyafy7qa7.png)
 
Hope you have enjoyed. 

Please comment if you face any problems. I'm happy to help. Also follow me on [twitter](https://twitter.com/erandakarachchi)