I'm currently working on a full-stack project mainly using ReactJS and AWS Amplify. I've successfully deployed the website but the URL routings only seem to work if I redirect from the home page. I can only load the home page www.website.com but I try to manually type in www.website.com/login/, it gives me this message
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>B2173BDEE0658858</RequestId>
<HostId>
TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
</HostId>
</Error>
I've looked up solutions from other StackOverflow pages but it didn't seem to solve the issue.
I have tried adding a redirect rule in the AWS console provided (Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify) but the issue persists. Is there a way to fix this?
You have to set up a 404 (page not found) redirect on the AWS Amplify to point on the index.html.
React App is SPA (Single Page App) it has its own routing, and on the AWS side, all other routes except base path will return 404, because they don't exist on the server-side.
Once you setup 404 to points on your React application again, React router will handle the routing.
Check: docs.aws.amazon.com/amplify/latest/userguide/redirects.html and pay attention to 404 redirections.
Related
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?
I've created a website using create-react-app and react router. I am able to load the website from https://www.example.com/reactapp but I get a 404 error when I try to access a page like https://www.example.com/reactapp/somePage
The website is running on port 8080, https connection is working, inside my package.json I've defined my homepage as: "https://example.net/reactapp". In my BrowserRouter I've defined my basename as "/reactapp" and links are working and loading the pages just fine.
The thing also is that https://example.net/ displays a wordpress website, when I try to access https://www.example.net/reactapp/somePage I get a 404 error from the wordpress website. How can I properly fetch data when calling for a specific page?
Redirect all requests coming to the server to index.html
I have a React App that is deployed on an S3 bucket.
When deploying a React Router app to S3, going directly to a React route will produce a 403 Access Denied error because S3 will try to look for an object in the bucket at that path.
Right now, we are redirecting all traffic to the index.html file, all the routes load fine, but first, we are receiving a 403 response, before the page loads. Which is causing a headache for Search Engines and SEO.
This can be solved by creating a custom error response in CloudFront that handles the HTTP 403 Response by responding with the index page and a 200 OK.
We are using Cloudflare as our CDN and switching to cloudfront at this point is not an option.
Is there a way to solve this problem using CloudFlare or S3 Configuration settings?
I have hosted my react app on AWS Amplify. On trying to access a protected route of the application I am getting the following error on screen This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3C8377104116CA48</RequestId>
<HostId>nL3bDs+kXEWE8uBFPTLkFLpRg6CCmKfejftWs5wmTWYO6K6WDzpwsDXJCFTK0EFhjJdaHECfuos=</HostId>
</Error>
How do I resolve this?
Route redirects and rewrites has special configuration for a deployed AWS Amplify app. Check the
AWS Amplify Console > App Settings > Rewrites and Redirects
Configuring a rewrite rule fixed this issue for me.
My rule looks like so:
Source -
</^[^.]+$|\.(?!(css|yaml|gif|ico|jpg|js|png|txt|svg|woff2|woff|ttf|map|json)$)([^.]+$)/>
Target -
/index.html
Type -
200 (Rewrite)
Detailed description is here - https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html
I have a React app which is created by create-react-app command.
And I also have the blog system which is based on Wordpress.
Directory structure is like this.
*/index.html
/service-workder.js
/manifect.json
/index.html
/favicon.ico
/asset-manifest.json
/static/media
/js
/css
/blog <--------------------- Wordpress*
When I access the URL by http:mydomain/blog/,
Firefox show React page instead of Wordpress page.
Firefox even show React page for http:mydomain/blog/nonexisting ,
which I think is supposed to provide 404 not found from web server.
I was struggling to find a way NOT to let React take wildcard paths.
Safari use React only for index.html, which is good.
Chrome, Firefox use React for entire wildcard paths, even for not existing paths.
http://myserver/ ---> should show React app
http://myserver/nonexistence ---> should show 404 from server
Please help me to figure out isolate React app only for exact index.html.
Thanks in advance.
Like I wrote here, the root cause was service worker which seems to be HTML5 feature to make a web site to a web app.
Unregistering service worker was the solution.