Deploying my ui artifacts to my s3 bucket

Question

I have built a stack with an s3 bucket and made the bucket public and have enabled the bucket for static website hosting so that I have an endpoint to be able to spin out my project.  When I run an ng build on my stack locally, it creates a dist folder with directories and files.  One of the directories is a 'browser' directory that has my my index.html file in it along with other files.  When i deploy my stack to AWS, it will deploy everything in the dist folder.  The trouble is my the index.html file and other files are buried in the 'browser' directory so that when i try to access my bucket endpoint, it says it can't find the index.html file.  
What changes do i need to make so that my index.html file is not buried in my browser directory in the dist folder or my endpoint can find the index.html file in the dist/browser directory located in my s3 bucket?

Answer

If your index.html file is located in some folder, you can set it in the browser when you access your website
 ![Enter image description here](/media/postImages/original/IM4tqCazFyTZSxFecUOrpWJg)

Or you can try a redirection rule in the S3 web hosting configuration  
https://docs.aws.amazon.com/AmazonS3/latest/userguide/how-to-page-redirect.html#redirect-rule-examples

for example:

```
[
    {
        "Condition": {
            "KeyPrefixEquals": "index.html"
        },
        "Redirect": {
            "HttpRedirectCode": "302",
            "ReplaceKeyPrefixWith": "dist/browser/index.html"
        }
    }
]
```

![redirection rule](/media/postImages/original/IMQcpgZAMvTaSFbCslfckNCg)

Deploying my ui artifacts to my s3 bucket

Relevant content