Amplify-js: Amplify Console Deployment - Access Denied on route refresh

[rohitspujari]

When I deploy my react app using Amplify Console, I get the access-denied page or get routed to index.html when I refresh my browser on a certain application route ("my-app/products"). This doesn't happen on cloudfront url that I get when publish my app through "amplify publish".

Any workarounds you can suggest?

[wizawuza]

you should check out my post on #2498 , it may not solve your problem as it's a problem in itself, but it may set you on the right path.
The docs for the amplify console are here:
https://docs.aws.amazon.com/amplify/index.html#lang/en_us
In there search for redirects

[swaminator]

This might be because your assets are not loading properly. We launched a feature to support regex based on this thread here: https://forums.aws.amazon.com/thread.jspa?threadID=294311&tstart=0

Try using regex in source. The format is .
The following example will do rewrite to all files to index.html but except specific file extensions.
source:
target: /index.html
type: 200

[rohitspujari]

Thanks Nikhil! Also, this post was super helpful for those who're still looking for a solution.
https://forums.aws.amazon.com/thread.jspa?threadID=294311&tstart=0

[wizawuza]

Thanks @rohitspujari
This one in that thread worked for me:
</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

[jordanranz]

Closing as the issue seems to have been solved.

[vinnichase]

for react make sure to add json in the regex for the manifest.json ;)

[melvinmt]

Try using regex in source. The format is .
The following example will do rewrite to all files to index.html but except specific file extensions.
source:
target: /index.html
type: 200

And where do you add this exactly?

[James-Perrin]

@melvinmt rewrites and redirects in the amplify console.

[codabulo]

If the issue is with single-web-page apps (such as reactjs), see the Amplify DOCS: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html
see: "Redirects for Single Page Web Apps (SPA)"

Solution that worked for me:
In AWS Console > Amplify > Rewrites and redirects...
Edit the redirects to create a redirect with:
Source address:
Target address: /index.html
Type: 200

Why does this work? You need to let through requests ending in js, json, etc, so a simple <*> won't work here...

[MatteoInfi]

That broken completely my web app

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Uncaught SyntaxError: Unexpected token '<'

[MatteoInfi]

Turns out that the AWS docs contains a wrong solution, this is what works (as suggested by wizawuza):

</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

The docs should be fixed...

[fierceblonde]

MatteoInfi's solution worked for me

[MatteoInfi]

MatteoInfi's solution worked for me

Hey, did you try if it works fine also for redirection? The page is not loading properly when is redirecting from the naked domain to the www, not sure it is me or this redirection rule.

[jdsaurith]

Resulta que los documentos de AWS contienen una solución incorrecta, esto es lo que funciona (como lo sugiere wizawuza):

</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

Los documentos deben arreglarse ...

Esto funciono para mi.