16

Been racking my brain on this for a couple of days. I am trying to deploy my react app on AWS Amplify. When I launch the application I am correctly directed to a sign in page (Uses Auth0 Universal login) After logging in I am redirected back to my web app through the callback URL.

When my page loads I get the following message

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
<Code>AccessDenied</Code>

<Message>Access Denied</Message>

<RequestId>B2173BDEE0658858</RequestId>

<HostId>
TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
</HostId>
</Error>

I am not hosting the web app through an s3 bucket, I uploaded my build file directly to AWS Amplify.

Any ideas on what the issue is?

enter image description here

enter image description here

Zak DeBrine
  • 181
  • 1
  • 4
  • 1
    Hey Have you been able to solve it? Same problem here. – J. Cake May 06 '20 at 15:15
  • Same problem here. SPA at index.html and wanted to add an additional pure HTML landing page to track a campaign. I tried a separate xyz.html in the public root and I tried an index.html in a subfolder, public/xyz/index.html. Both received the same response as above... 403 permission denied and the same XML error as above. – AV8R May 12 '20 at 18:08
  • Found my problem, I thought webpack was copying *.html during build but it wasn't. After I added the new .html file to webpack.config and fixed my rewrites, it worked. – AV8R May 12 '20 at 21:27

2 Answers2

17

Use this rule on amplify console.

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]
Greg B
  • 14,597
  • 18
  • 87
  • 141
Talented blockchain developer
  • 197
  • 2
  • 8
  • I had that issue too. – Talented blockchain developer Sep 23 '20 at 07:08
  • This does work, can anyone shed some light on why that might be so? Obviously, it's to add some external resources (css, givs etc ), but why it's that not caught by the general "/" rule ? – pmanolov Nov 09 '20 at 09:16
  • 2
    This solution is required when deploying a single page app. When requests come in for resources on the newly deployed server they need to be redirected to the root html file as that is where you application logic lives. So you just need to configure AWS in a way that supports your application. Check out [Using Redirects](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html) to understand how the redirects works for AWS and then the [section on SPAs](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa) – Justin Dec 24 '20 at 02:44
  • Is there a way to add redirect rules in code and push to git repo? I would prefer not to use Amplify console. BTW Thanks for this answer. @Ma.Liguo – sudhir shakya Feb 26 '21 at 16:25
0

When you create the zip folder, make sure you zip the contents of your build output and not the top level folder. For example, if your build output generates a folder named “build” or “public”, first navigate into that folder, select all of the contents, and zip it from there. If you do not do this, you will see an “Access Denied” error because the site's root directory will not be initialized properly.

  <Error>
      <Code>AccessDenied</Code>
      <Message>Access Denied</Message>
      <RequestId>4442587FB7D0A2F9</RequestId>
      <HostId>...</HostId>
 </Error>
vaquar khan
  • 10,864
  • 5
  • 72
  • 96