Amplify-js: Amplify Console 200 (Rewrite) fails on SPA React (Router) Application

[wizawuza]

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]

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]

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

@powerful23

[swaminator]

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:
target: /index.html
type: 200

[wizawuza]

Even with the following rule:
[
{
"source": "",
"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]

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]

@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]

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]

@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]

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]

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]

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]

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]

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]

This worked for me

source:

target address:
/index.html

type:
200 (Rewrite)

[chrisfowler]

@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]

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]

This worked for me too

source:

target address:
/index.html

type:
200 (Rewrite)

[tylerjvollick]

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]

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]

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 they stop loading.

Any Ideas?

[wataruoguchi]

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]

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

[adiaz-dev]

The parameters that worked immediately for me were:
""

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

Regards,

[r-moore]

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:

1. 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)
2. 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]

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]

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]

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

[scolestock]

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]

This worked for me

source:

target address:
/index.html

type:
200 (Rewrite)

Thanks! this worked for me!

[tomyitav]

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

[mw-felker]

@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]

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]

I added 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]

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]

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