Amplify Console 200 (Rewrite) fails on SPA React (Router) Application #2498

wizawuza · 2019-01-08T21:34:16Z

Describe the bug
When using the Amplify Console to build a project, the react router performs as expected when I click new links. When I hit Ctrl-R for refresh, it pushes me back to:
https://..amplifyapp.com/index.html

The default "rewrites and redirects" is:
Source address: /<*>
Target address: /index.html
Type: 404 (Not found)

So that makes sense.

When I change the rewrite to INSTEAD be:
Source address: /<*>
Target address: /
Type: 200 (rewrite)

Things seem to work as expected initially. The page refreshes to a non-root page (e.g., if I'm at /user/account, a Ctrl-R will keep me there), but for some reason reason after a few minutes, I get an error in the console and the page is blank. I can change it back to a 404 (Not found) type of redirect, but that doesn't get me the desired behavior.

Note, the app works just fine with a local npm start command, as well as when using the CLI with "amplify publish", both on an S3 domain as well as a custom domain (via Route 53). I am not using a custom domain with the amplify console (yet) as I wanted to give it a shot to maybe help me with "dev-test-production" workflows.

Screenshots

Desktop (please complete the following information):

OS: Windows/all
Browser Chrome/MS Edge

Thank you!

wizawuza · 2019-01-08T21:41:42Z

In case it helps to debug.. After having this fail in Chrome per the above description, I then tried in MS Edge. That worked perfectly for a few minutes, afterwards it failed in a similar fashion.

Changing the type to 404 makes the website work again (although a Ctrl-R refresh always pushed it back to the root), but then afterwards switching it again back to 200 does not work, not even for a minute.

I tried clearing my cache in chrome in case that might have been an issue - no luck.

lisandrolan · 2019-01-15T04:09:29Z

I have a similar issue.
I have the following paths
example.com//bio or
example.com/ and it is not redirecting.

@powerful23

swaminator · 2019-01-15T21:50:24Z

This is 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: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
target: /index.html
type: 200

wizawuza · 2019-01-16T13:36:54Z

Even with the following rule:
[
{
"source": "</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]

I still get the same error. This project works just fine when using amplify publish via the amplify CLI, and setting the S3 bucket's index document AND error document to "index.html" so I don't think it's an issue with my code.

elsenhuc · 2019-01-17T11:39:07Z

I have the same issue. Works perfectly on S3 with success:index.html and error:index.html - but I don't get the redirects to working state in amplify console

wizawuza · 2019-01-17T12:57:16Z

@elsenhuc The one I posted above:
</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
didn't work for me, but when I looked through the forum at:
https://forums.aws.amazon.com/thread.jspa?threadID=294311&tstart=0
I found one that worked for another individual. Specifically:
</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

As that one worked for me. I'd suggest you give that a go. I don't know regular expressions well enough to really know what the difference is between those two, so I can't help beyond that. I'll close this thread now as my issue is solved, but if that doesn't work for you please feel free to reopen.

elsenhuc · 2019-01-17T13:01:34Z

Hi, I went through that regex as well.
Yes - it works on first view - but it fails when you use "querystring" parameters - at least for me.
I have app.mydomain.com/events?noheader=1 and the ?noheader=1 piece is silently removed..making it impossible to parse

wizawuza · 2019-01-17T13:08:20Z

@elsenhuc
Ah sorry to hear that. Are you using React? Would it be possible to switch to React Router and use their match and path parameters? That works for me at least.. Or is that too big of a rewrite in your current codebase?
Sorry I don't have a more "backwards compatible" solution.

elsenhuc · 2019-01-17T14:14:01Z

hmmm..strange - In fact I am using react and ReactRouter already...
let url = this.props.location.search;
let params = queryString.parse(url);
if (params.noheader) { ... }

wizawuza · 2019-01-17T14:35:53Z

I'd do it differently, namely:
https://reacttraining.com/react-router/web/example/url-params
namely, these lines:
<Route path="/:id" component={Child} />
and then the function/component Child just below that.

That format of URL parameters is working for me with amplify console.

elsenhuc · 2019-01-17T14:39:55Z

That is something different...you are using a path (I do that already).
The problem I am facing is a querystring parameter afterwards.

this piece works:
<Route path="/events/:eventid" component={ViewEvent} />
but when you try URL/events/1234?param1=1&param2=2
that's a different story..

wizawuza · 2019-01-17T14:45:11Z

Can you change it so that URL should be /events/1234/1/2

and have the Route component look like:
<Route path="/:id/:param1/:param2" component={Child} />
<Route path="/:id/:param1" component={Child} />
<Route path="/:id" component={Child} />

You may need some logic to make sure it doesn't show all 3 instances of the Child component every time, but otherwise I think that'll work.

elsenhuc · 2019-01-17T19:35:50Z

well..while this might be possible it's still...sort of a lame workaround :-)
There must be a better way with regex

mike-casey-easyknock · 2019-02-26T15:01:50Z

This worked for me

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

target address:
/index.html

type:
200 (Rewrite)

chrisfowler · 2019-03-21T11:24:06Z

@elsenhuc Did you ever get this issue resolve for ?querystrings. I too having trouble routing with querystring paramters. Getting stripped out. If I deploy using amplify publish from cli then no issues.

elsenhuc · 2019-03-25T10:57:59Z

The docs have been updated: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html but in the meantime I had changed my code and used a URL redirect inside react, rather than a querystring parameter - so I "avoided" it

artista7 · 2019-03-25T11:46:25Z

This worked for me too

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

target address:
/index.html

type:
200 (Rewrite)

tylerjvollick · 2019-04-13T21:14:51Z

I have a SPA Create react app and am trying to get these redirects figured out...
the following doesn't work at all. I get a 502 error. Any thoughts?

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
        "target": "index.html",
        "status": "200",
        "condition": null
    }
]

tylerjvollick · 2019-04-13T21:20:15Z

I have a SPA Create react app and am trying to get these redirects figured out...
the following doesn't work at all. I get a 502 error. Any thoughts?
[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
        "target": "index.html",
        "status": "200",
        "condition": null
    }
]

Ahh my bad. I needed my target to be "/" rather than "index.html". The following did the trick!

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
        "target": "/",
        "status": "200",
        "condition": null
    }
]

javieraldape · 2019-04-17T14:36:00Z

I had the same problem and was able to solve it by adding the suggested redirects. The images and routes work correctly, however, the custom fonts are not loading.

When I leave the default redirects from the deployment, the correct fonts are shown but, when changing the source to </^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/> they stop loading.

Any Ideas?

wataruoguchi · 2019-06-21T06:05:12Z

It's not an amplify's issue.
I'm using Vue.js, I assume React does similar. The router plugin of Vue.js has this documented nicely. It says all routes should fall to index.html:
https://router.vuejs.org/guide/essentials/history-mode.html
Hope it's helpful.

mgavaudan · 2019-08-10T22:22:10Z

@chrisfowler did you ever figure out how to keep the parameters with react and amplify?

adiaz-dev · 2019-10-22T20:47:30Z

The parameters that worked immediately for me were:
"</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>"

Without this rule the app was behaving incorrectly on the re-routing actions.

Regards,

r-moore · 2019-12-03T12:31:22Z

The rewrite is working for me at the first level (e.g. /login) but not if I have a second level of routing (e.g. /auth/login)

Two issues I've been struggling with:

You can't navigate directly to /auth/login in the address bar (it's a path that React router is setup to handle but you never get redirected to /index.html so the react app doesn't load)
It tries to load static resources (e.g. favicon.ico, or /static/js/main.js) from the subfolder (/auth/favicon.ico, /auth/static/js/main.js)

Has anyone else got amplify console working with this kind of app routing?

r-moore · 2019-12-03T12:46:10Z

I've managed to get it working with a 301 redirect for source: </(\/[^.]+$)/> to target: /

I'd rather use a 200 rewrite if anyone has any ideas how to make that work

fisheke · 2019-12-10T08:27:04Z

I got somewhere with my angular app (with routing) hosted in a subdirectory (quite similar to what react would be).

Solved with this:

    {
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)(MY_SUBDIRECTORY\\/[^.]+$)/>",
    "target": "/MY_SUBDIRECTORY/index.html",
    "status": "200",
    "condition": null
    }

ilyador · 2020-01-11T13:36:45Z

Hi, I am having the same problem.
Root works fine, any other path entered manually, redirects to index.html

scolestock · 2020-02-07T20:10:52Z

It's worth using the regular expression in the docs: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html

It includes "map", which will make sure your source maps are loading if needed.

DiegoArrieta · 2020-02-22T22:53:28Z

This worked for me

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

target address:
/index.html

type:
200 (Rewrite)

Thanks! this worked for me!

tomyitav · 2020-05-13T06:46:12Z

Hi, how can I change Rewrites and Redirects in amplify console?

maxfelker · 2020-05-19T20:20:06Z

@tomyitav I used the above rule that @DiegoArrieta shared on 2/22 on a react app that I just created today with create-react-app. Here is my Amplify rule set:

I added xml to the pattern to support serving public sitemap.xml files. Here's the snippet I used:

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

Good luck!

ShawnYcx · 2020-09-01T18:33:17Z

Hi, I'm having issues with react url param routes and it's giving out error on amplify.

Example routes with url params

<AsyncSearchResultsList path="search/:q" />
<AsyncSearchDetailedInfo path="search/user/:id" />

This is the error I'm getting

On amplify I have these redirects setup

I can't navigate to either of these routes and it works fine for other routes without parameters
All of these routes are also working perfectly on localhost

Is there something I'm missing? I'm using Reach Router in my react project.

Update:

Figured what seemed to be part of it, the issue I was having was resolved. Amplify wasn't handling the Lazy loaded route components properly, data is flowing and the page is loading now after refactoring. But another issue came up, the page now displays blank whenever I navigate to those routes directly. I'm pretty sure it's an issue with Amplify's redirect rules. Still need help!

Caoimhin89 · 2020-11-19T02:31:59Z

I added </^((?!.(xml|css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/> with a target of / and a rule of Rewrite 200.

This solution works for me for URLs that have one element after /, but anything beyond that still has the issue of resulting in a blank page.

For example:

I'm able to refresh the page while at example.com/account

If, however, I try to refresh the page while on example.com/account/edit I get a blank page again.

Has anyone figured out how to deal with this?

aqilusman45 · 2020-11-28T20:13:33Z

Anybody who is coming here to solve issues related gatsbyjs site with static and client site routes, I was able to solve navigation issues using these rules:

Note: first rule is for static content and the rule later is for handling client side routes, basically my Reach Router is in src/pages/app

Lasim · 2020-12-31T22:12:45Z

@elsenhuc: did you found a solution for the parameter problem?
E.g.: mynicedomain.com/login?asd=12
I got the same issue with VueJS.

y-yeah · 2021-02-01T12:51:57Z

@elsenhuc The one I posted above:
</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
didn't work for me, but when I looked through the forum at:
https://forums.aws.amazon.com/thread.jspa?threadID=294311&tstart=0
I found one that worked for another individual. Specifically:
</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

As that one worked for me. I'd suggest you give that a go. I don't know regular expressions well enough to really know what the difference is between those two, so I can't help beyond that. I'll close this thread now as my issue is solved, but if that doesn't work for you please feel free to reopen.

Hi guys I realized this fix works except when one of the queries has the key called location. When a key exactly matches with "location", the page ends up showing Access Denied.

dbeck121 · 2021-11-14T20:00:47Z

I added </^((?!.(xml|css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/> with a target of / and a rule of Rewrite 200.

This solution works for me for URLs that have one element after /, but anything beyond that still has the issue of resulting in a blank page.

For example:

I'm able to refresh the page while at example.com/account

If, however, I try to refresh the page while on example.com/account/edit I get a blank page again.

Has anyone figured out how to deal with this?

I have the same problem and I did not find a solution. I tried thousands of regex strings but no solution so far. I am super frustrated now. Working for houres on this problem now.

edit:

@Caoimhin89 in case you did not find a solution or it helps anyone.

Seems like I have a dirty fix at least for my react app:

[
{
"source": "</^[^.]+$|\.(?!(css|ico|jpeg|gif|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
"target": "/",
"status": "200",
"condition": null
},
{
"source": "/_{/<>",

"target": "/<>",

"status": "200",

"condition": null

},

{

"source": "/<*>",

"target": "/",

"status": "404",

"condition": null

}

]}

With this at least /result/1234 routes work in react

glothos · 2022-06-24T15:59:28Z

Having the same problem. When I go direct on root / it loads a blank page with Unexpected token < but if I type a correct route of the app like /auth/login it renders correctly.

Tried the solutions above and none worked.

charlie-ac · 2022-12-05T21:07:53Z

Having the same problem. When I go direct on root / it loads a blank page with Unexpected token < but if I type a correct route of the app like /auth/login it renders correctly.

Tried the solutions above and none worked.

For anyone who finds this in the future, I had the same problem and was able to resolve it by using

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

instead of

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

It looks like that "Unexpected token '<'" error comes from the fact that the original regex was problematic and amplify was serving the contents of index.html even for urls like main.xxxxxxxx.js

kilian-v · 2023-09-26T17:15:52Z

Hello , I have the same error here but with a flutter web application. I have tried most of the proposed solutions but nothing works.

mrfrozen97 · 2024-05-13T07:03:11Z

I've managed to get it working with a 301 redirect for source: </(\/[^.]+$)/> to target: /

I'd rather use a 200 rewrite if anyone has any ideas how to make that work

Hello, I have similar issue with the redirect. I have a subdomain /GDPClock/USA I am using React router dynamic routes like "/GDPClock/:country" . THe amplify tried to load static files from /GDPClock/static/* instead of /GDPClock/* . How can I fix it.

mrfrozen97 · 2024-05-13T07:04:23Z

Also in the react router. I can only use one level of routing i.e. /Abc /bcd and not /abc/bcd. Why is the case? Is there a better alternative to React routing when using Amplify?

mrfrozen97 · 2024-05-13T07:37:58Z

I got a stupid fix for sub-routes/nested routes not working in amplify.

Problem: /GDPClock works fine. /GDPClock/USA loads a blank white page.

The reason is that Amplify loads static resources from /GDPClock/static/js/abc.js but it should be /static/js/abc.js

Hack:
I added a rule /GDPClock/static/<path1/<file redirects to /static/<path1/<file (301-permanant redirect)
If you have many sub-routes u can use:
"/<*>/static/<path1/<file" to "/static/<path1/<file" (301-permanant redirect)

I do not understand why does Amplify make it so complicated to just use some basic routing.

cortf · 2024-05-31T19:00:19Z

Hey I had a similar issue with my React/react-router-dom SPA deployment.

I encountered an issue where I could only access the home page directly. For example, visiting domain.com would load the page, and I could navigate to the /about section by clicking links. However, if I refreshed the page or, typed domain.com/about directly into the browser it would result in a 404 error. Although I added the correct rewrite rule, it still did not resolve the problem.

The solution that ultimately worked was adjusting the permissions of the S3 buckets related to my deployment. Specifically, I had to turn off the "Block all public access" setting. Once I made this change, the 404 issue was resolved, and I could access all pages directly.

miguelmobilat · 2024-08-20T17:41:56Z

Hola, tengo el mismo error aquí, pero con una aplicación web de Flutter. Probé la mayoría de las soluciones propuestas, pero nada funciona.

were you able to solve it?

Sushil787 · 2024-09-14T09:27:32Z

Thanks god !!!!
This worked for me:
This worked for me

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

target address:
/index.html

type:
200 (Rewrite)

wizawuza mentioned this issue Jan 15, 2019

Amplify Console Deployment - Access Denied on route refresh #2545

Closed

wizawuza closed this as completed Jan 17, 2019

ilyador mentioned this issue Feb 12, 2020

React app with React-Router deployed on Amplify Console, redirects to index.html aws-amplify/amplify-hosting#430

Closed

chinying mentioned this issue Apr 20, 2020

Refreshing on /campaigns on v2-staging.postman.gov.sg redirects to /index.html opengovsg/postmangovsg#69

Closed

CharlieMcD2 mentioned this issue May 20, 2020

[Feedback]Image shows a React App and not an Angular App aws-amplify/amplify-hosting#687

Closed

github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Sep 14, 2024

Amplify Console 200 (Rewrite) fails on SPA React (Router) Application #2498

Amplify Console 200 (Rewrite) fails on SPA React (Router) Application #2498

Comments

wizawuza commented Jan 8, 2019

wizawuza commented Jan 8, 2019

lisandrolan commented Jan 15, 2019 • edited Loading

swaminator commented Jan 15, 2019

wizawuza commented Jan 16, 2019 • edited Loading

elsenhuc commented Jan 17, 2019

wizawuza commented Jan 17, 2019

elsenhuc commented Jan 17, 2019

wizawuza commented Jan 17, 2019

elsenhuc commented Jan 17, 2019

wizawuza commented Jan 17, 2019

elsenhuc commented Jan 17, 2019 • edited Loading

wizawuza commented Jan 17, 2019

elsenhuc commented Jan 17, 2019

mike-casey-easyknock commented Feb 26, 2019

chrisfowler commented Mar 21, 2019

elsenhuc commented Mar 25, 2019

artista7 commented Mar 25, 2019

tylerjvollick commented Apr 13, 2019

tylerjvollick commented Apr 13, 2019

javieraldape commented Apr 17, 2019

wataruoguchi commented Jun 21, 2019

mgavaudan commented Aug 10, 2019

adiaz-dev commented Oct 22, 2019

r-moore commented Dec 3, 2019

r-moore commented Dec 3, 2019 • edited Loading

fisheke commented Dec 10, 2019

ilyador commented Jan 11, 2020 • edited Loading

scolestock commented Feb 7, 2020

DiegoArrieta commented Feb 22, 2020

tomyitav commented May 13, 2020

maxfelker commented May 19, 2020 • edited Loading

ShawnYcx commented Sep 1, 2020 • edited Loading

Caoimhin89 commented Nov 19, 2020

aqilusman45 commented Nov 28, 2020

Lasim commented Dec 31, 2020

y-yeah commented Feb 1, 2021

dbeck121 commented Nov 14, 2021 • edited Loading

glothos commented Jun 24, 2022 • edited Loading

charlie-ac commented Dec 5, 2022 • edited Loading

kilian-v commented Sep 26, 2023

mrfrozen97 commented May 13, 2024

mrfrozen97 commented May 13, 2024 • edited Loading

mrfrozen97 commented May 13, 2024 • edited Loading

cortf commented May 31, 2024 • edited Loading

miguelmobilat commented Aug 20, 2024

Sushil787 commented Sep 14, 2024

lisandrolan commented Jan 15, 2019 •

edited

Loading

wizawuza commented Jan 16, 2019 •

edited

Loading

elsenhuc commented Jan 17, 2019 •

edited

Loading

r-moore commented Dec 3, 2019 •

edited

Loading

ilyador commented Jan 11, 2020 •

edited

Loading

maxfelker commented May 19, 2020 •

edited

Loading

ShawnYcx commented Sep 1, 2020 •

edited

Loading

dbeck121 commented Nov 14, 2021 •

edited

Loading

glothos commented Jun 24, 2022 •

edited

Loading

charlie-ac commented Dec 5, 2022 •

edited

Loading

mrfrozen97 commented May 13, 2024 •

edited

Loading

mrfrozen97 commented May 13, 2024 •

edited

Loading

cortf commented May 31, 2024 •

edited

Loading