> For the complete documentation index, see [llms.txt](https://tutorial.specian.co.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tutorial.specian.co.uk/devops/aws/s3.md).

# S3

Static files and assets will be stored on S3.

The first thing we have to do is to build the React app.

```
$ cd packages/web
$ yarn build
Creating an optimized production build...
Compiled successfully.
...
✨  Done in 20.37s.
```

We now have a `build` folder:

```
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.cdaef9d20bdd2939b5087486a61c7d6a.js
├── robots.txt
├── service-worker.js
└── static
    └── js
        ├── 0.b9fba7db.chunk.js
        ├── 0.b9fba7db.chunk.js.map
        ├── 3.b4b93fe8.chunk.js
        ├── 3.b4b93fe8.chunk.js.map
        ├── 4.d21e26c5.chunk.js
        ├── 4.d21e26c5.chunk.js.map
        ├── 5.bc17229d.chunk.js
        ├── 5.bc17229d.chunk.js.map
        ├── 6.0d642d4a.chunk.js
        ├── 6.0d642d4a.chunk.js.map
        ├── main.cb6ee362.chunk.js
        ├── main.cb6ee362.chunk.js.map
        ├── runtime-main.416359ae.js
        └── runtime-main.416359ae.js.map
```

{% hint style="info" %}
Add `build` to `.gitignore`.
{% endhint %}

We are going to upload this to S3.

### Creating a bucket

Search for `S3` then click the `Create bucket` button.

![](https://2559875260-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnRxZ2gbXvMdM70TAFz%2F-LrIwpnhiug-SGKq3DsR%2F-LrIz2aXYTQb1wj6-Xjc%2Fimage.png?alt=media\&token=fb70ef16-dfa4-4f69-ac6c-0682ff84453f)

1. Follow the process, use the default values but untick `Block all public access`. (I like to name the bucket after the domain e.g daedalost.com)
2. Once the bucket is created, click on it to see the details
3. Go to `Permission` and paste the following:

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

Replace `NAME_OF_BUCKET` with your bucket's name.

Everyone on the internet can now access this bucket.

![](https://2559875260-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnRxZ2gbXvMdM70TAFz%2F-LrIwpnhiug-SGKq3DsR%2F-LrJ-YI4kulH7kaE7Dj1%2Fimage.png?alt=media\&token=7f57d0c2-9791-4a4a-b4fd-3272fe40b81b)

{% hint style="info" %}
Later in the tutorial, we will use CloudFront to serve the assets from S3. Come back to this step and remove public access. 
{% endhint %}

{% hint style="info" %}
Have a look at the different [Bucket Policy Examples](https://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html) from the AWS documentation.
{% endhint %}

Go to `Properties` > `Static website hosting` > `Use this bucket to host a website`:

* Index document: `index.html`
* Error document: `index.html`

![](https://2559875260-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnRxZ2gbXvMdM70TAFz%2F-LrJ13AKu9tPI_hvCRdq%2F-LrJ18KlWXWFjE4pHwPD%2Fimage.png?alt=media\&token=d64ee24e-a40f-4bd9-bf20-b7d1ea7d629f)

This endpoint now serves the React app. It won't work at the moment since it doesn't connect to our API. Though, you can hard code `http://localhost:8080` as the endpoint to test it locally.