Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wizawuza opened this issue Jan 8, 2019 · 28 comments
Closed

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

wizawuza opened this issue Jan 8, 2019 · 28 comments

Comments

@wizawuza
Copy link

@wizawuza wizawuza commented Jan 8, 2019

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
image

Desktop (please complete the following information):

  • OS: Windows/all
  • Browser Chrome/MS Edge

Thank you!

@wizawuza

This comment has been minimized.

Copy link
Author

@wizawuza wizawuza commented Jan 8, 2019

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

This comment has been minimized.

Copy link

@lisandrolan lisandrolan commented Jan 15, 2019

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

@powerful23

@swaminator

This comment has been minimized.

Copy link

@swaminator swaminator commented Jan 15, 2019

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

This comment has been minimized.

Copy link
Author

@wizawuza wizawuza commented Jan 16, 2019

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

This comment has been minimized.

Copy link

@elsenhuc elsenhuc commented Jan 17, 2019

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

This comment has been minimized.

Copy link
Author

@wizawuza wizawuza commented Jan 17, 2019

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

@wizawuza wizawuza closed this Jan 17, 2019
@elsenhuc

This comment has been minimized.

Copy link

@elsenhuc elsenhuc commented Jan 17, 2019

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

This comment has been minimized.

Copy link
Author

@wizawuza wizawuza commented Jan 17, 2019

@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

This comment has been minimized.

Copy link

@elsenhuc elsenhuc commented Jan 17, 2019

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

This comment has been minimized.

Copy link
Author

@wizawuza wizawuza commented Jan 17, 2019

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

This comment has been minimized.

Copy link

@elsenhuc elsenhuc commented Jan 17, 2019

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

This comment has been minimized.

Copy link
Author

@wizawuza wizawuza commented Jan 17, 2019

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

This comment has been minimized.

Copy link

@elsenhuc elsenhuc commented Jan 17, 2019

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 comment has been minimized.

Copy link

@mike-casey-easyknock mike-casey-easyknock commented Feb 26, 2019

This worked for me

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

target address:
/index.html

type:
200 (Rewrite)

@chrisfowler

This comment has been minimized.

Copy link

@chrisfowler chrisfowler commented Mar 21, 2019

@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

This comment has been minimized.

Copy link

@elsenhuc elsenhuc commented Mar 25, 2019

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 comment has been minimized.

Copy link

@artista7 artista7 commented Mar 25, 2019

This worked for me too

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

target address:
/index.html

type:
200 (Rewrite)

@tylerjvollick

This comment has been minimized.

Copy link

@tylerjvollick tylerjvollick commented Apr 13, 2019

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

This comment has been minimized.

Copy link

@tylerjvollick tylerjvollick commented Apr 13, 2019

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

This comment has been minimized.

Copy link

@javieraldape javieraldape commented Apr 17, 2019

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

This comment has been minimized.

Copy link

@wataruoguchi wataruoguchi commented Jun 21, 2019

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

This comment has been minimized.

Copy link

@mgavaudan mgavaudan commented Aug 10, 2019

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

@adiaz-dev

This comment has been minimized.

Copy link

@adiaz-dev adiaz-dev commented Oct 22, 2019

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

This comment has been minimized.

Copy link

@r-moore r-moore commented Dec 3, 2019

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

This comment has been minimized.

Copy link

@r-moore r-moore commented Dec 3, 2019

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

image

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

@fisheke

This comment has been minimized.

Copy link

@fisheke fisheke commented Dec 10, 2019

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

This comment has been minimized.

Copy link

@ilyador ilyador commented Jan 11, 2020

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

Screen Shot 2020-01-11 at 20 36 16

@scolestock

This comment has been minimized.

Copy link

@scolestock scolestock commented Feb 7, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.