AWS Amplify defaults cause Google Search Console to get Not Found 404 for page that loads fine - reactjs

My site just started being indexed by Google. It was telling me that a subpage was throwing 404s. When I copy/paste the page into the URL bar, it loads fine. The issue was Amplify defaults for "Rewrites and redirects", which didn't work for my React/Router app.

The defaults Amplify gave me were 404's for <> and a regex that redirects non-html pages. I removed the <> and changed the other one to a 200 instead of 404, and now it works correctly. Screenshots of Amplify (broken and fixed, respectively):

Related

path loaded with query string giving 404 in NextJS

In my Next Application a url contains query string.
It works fine in local development sever.
But when it is getting deployed to production it is throwing 404 and application is redirected back to url.
For Example:
url => www.domain.com?data=1
In Local - Works Fine
In Production - Throws 404 and redirect to www.domain.com
And I've confirmed that trainlingSlash is set to true in my nextConfig.
It would be great if someone have any info regarding this.

Rewrites/Redirects for AWS Amplify

Can anyone help me with setting up rewrites/redirects?
I have a route that is /privacy_policy
With no rewrite, I get access denied only on the hosted app.
Then I found this solution for it: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Added this to Amplify settings, and the page works fine. However, I have custom fonts in the directory that weren't loading in production.
I followed this: React images load locally but not on AWS Amplify
And changed the redirect from 200 to 404 rewrite. However, this then broke my fb login because fb curls my privacy policy and it returned a 404. How can I get both to work?

Safari Issue with Single Page Application React with AWS (Cloudfront/S3)

I am hosting a single page application based in React in S3 and served up in a CloudFront distribution (AWS). Everything works fine in production and The CloudFront error handling is setup correctly like shown below:
I did this for 404 and 403 responses. When I attempt open a link to a non root path (e.g. /settings), it works fine in Chrome and Firefox. However, in Safari I get redirected to the root path. I don't know how to resolve this Safari specific issue, any help is appreciated, thank you.
Similar problem without an answer here Safari Issue with Single Page Application AngularJS in HTML5mode with AWS (Cloudfront/S3)

React app SPA on S3 AWS while refreshing the page shows 404 page

I have a SPA made with React JS on a S3 Bucket and I’m using Cloud Front to work through HTTPS and with a custom domain. When I refresh the page - if I have another Route that is not the BASE_URL (for example domain.com/something), S3 sends me a 404 error.
I also tried redirecting the error page to BASE_URL but it doesn’t work, it redirects me to the Http default domain that S3 provides me and again, it gives me an 404 error page.
I don’t know if there exists an alternative way to keep the URL without any change (domain.com/page) and avoid the 404 error the way a web server (apache) handles.
If you are using CloudFront to host s3 website, the effective way to get rid of 404 on reload of non-index route like www.google.com/about or similar non / is by the following steps:
Go to your CloudFront distribution
Go to Error Pages
Create a new error page with the following params:
HTTP Error Code: 404
TTL: 0
Custom Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200
enjoy
credits going to this article https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff
You have two options. Either use CloudFront error page as a catch-all that redirects to / (you mentioned you tried setting an error page but did not detail what you did. This should work). The downside is that it will respond with the HTML page for all not found paths, even for mistyped CSS paths, for example.
The other solution is to use Lambda#Edge to rewrite the origin request path. This is a more customizable solution and you can define which paths you want to redirect to the root.

React apps have stopped working on Github Pages - 404 Error

My React Apps were working perfectly on Github Pages until a few days ago, now they are all giving me 404 errors.
I'm not sure what to try, I haven't changed anything so I'm not sure why they're suddenly not working.
Here is a link to an example: https://github.com/paulmartin91/WikiSearch
It used to host a wikipedia search page, but now I'm getting the following...
"
404
File not found
The site configured at this address does not contain the requested file.
If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file.
Read the full documentation for more information about using GitHub Pages.
GitHub Status — #githubstatus
"
It is working locally.
Thanks!
All fixed, I was using the github url 'https://github.com/paulmartin91/WikiSearch' as the package.json.homepage instead of the gh-pages url.

Resources