# Deploy a react static site to Amazon S3


Easier than you think.

Amazon S3 can be used to host a static website. Let’s walk through these simple processes.

### Required Bucket Configuration

The following properties are required to make an `s3-bucket` to host a static site

* Enable Static Site Hosting

* Need public access to the bucket along with the objects

* A bucket policy to enable `Get Object` permission

* Bucket name should be the same as a domain name

We will walk through the following steps to match with all the required configurations.

### Step 01: Create a Bucket

* Go to `AWS Console` and open `S3 service`

* Create a bucket and Uncheck Public Access

* Bucket name should be the same as your website domain

If we consider the website should be `www.my-site.com` then, the bucket name should be `my-site.com`

If we plan to use the site domain `[www.sub-domain.my-site.com`](http://www.sub-domain.my-site.com) then the bucket name should be the same `[www.sub-domain.my-site.com`](http://www.sub-domain.my-site.com)

* While creating a bucket, ensure you **uncheck **the **Block all public access**

* Also, acknowledge the public access

### Step 02: Enable Static Website Hosting

To enable `static website hosting

* Select the bucket and go to the `properties` tab

* Now you will find an option to edit `Static website hosting` and click the `Edit` button

* **Enable** the hosting

* For a react app the `index document` should be `index.html`

* We can create an error file and put it in the `Error document` section. Alternatively, we can use a dummy file name, even though it does not exist.

* Now save the changes

### Step 03: Update Bucket Policy

To update `bucket-policy` select the bucket and go to the `Permissions` tab.

* Select `bucket-policy` and click `edit`

* Bucket policy be

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}
```

Here, `Resource` is the bucket `arn`

This policy implies that the bucket's object will be accessed publicly.

* Save the `bucket-policy`

### Step 04: Upload Static Files

Before uploading files to the bucket, build the react app and ensure `build` the directory is available in the `react-app`

* Now select the bucket and upload all the files and directories inside the `build` directory

Now the site is ready and you can find the URL in the following section

* Select the bucket and go to the `properties` section

* In properties, under the `static site hosting` you will find the URL for the site.

### Step 05: Setup Domain Using Route 53

To use the domain from `Route 53` .

Go to the hosted zone and create a new recordset with the following properties

* Route name should be the same as the bucket name

* Alias should be toggled in

* As a value, from the dropdown select the `s3 website endpoint`

* Also, select the region and bucket name from the value dropdown

* Route type should be `A` record (IPv4)

* Routing policy for the static site can be `Simple Routing Policy`

### We Are Done

For further investigation, you can follow the [Official doc by AWS](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html).

Let me know of any queries, and I’ll reply ASAP.