I made a react project with create-react-app and deployed it via AWS Amplify.
I was trying to rewrites several routes under the same domain to open the other web sites. It seems like using the way of reverse-proxy.
So, through Rewrites and redirects console, I added a rule like below.
Source address
Target Address
Type
/test/<*>
(a different origin which is deployed in the amplify, too)
200 (Rewrite)
However, when the /test has been routed, the rewrites is not working. Looking into the Network tab in devtools, the browser tried to fetch static files from the Target address domain, but it fails.
Related
so this is my react app hosted at:
https://subdomain.example.com/
for apple pay integration we need to host a file at:
https://subdomain.example.com/.well-known/apple-developer-merchantid-domain-association
I created a folder in public called .well-known and kept that file there. but the varication is not completed by apple. so it is not able to get the static file with that url path.What can I do now
I have followed those two post:
How to serve apple-app-site-association file on /apple-app-site-association page in ReactJS
How to verify my domain with Apple in a React App
but I think aws amplify has different way of handling things.
Please help
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?
When running my spring app from my IDE and running the React app from within VSCode, everything worked perfectly. I used the build script to build my React project, and then put the output into my /static folder of Spring. Then I used mvn clean install to build the .jar file. After running the entire app from the .jar file, I can access my homepage with localhost:5000. I can also use my navbar links to access different parts of the website, like the Home page and the About page... But if I try to manually enter the url localhost:5000/about I get a 404 Not found error.. What am I doing wrong?
My guess is that your Spring (webmvc?) application is not configured to listen to different URLs other than /. And while it may seem as if the navbar successfully redirects to http://localhost:5000/about, in reality the single page application uses JavaScript client-side routing to change the URL in the browser, unload the currently rendered page, and load another page.
If you are indeed using Spring MVC, you could (among other options) modify your Spring static resource configuration, modify your #RequestMapping to listen to multiple endpoints, or use a ViewControllerRegistry.
I uploaded the export directory of a Svelte app using Sapper to example.com. In the /routes directory I created a page called foo.svelte. When I click on a link in the app that forwards me to /foo, I see that page, both locally and on example.com.
But when I go to example.com/foo directly in the browser, I get a 404. Understandable, because nothing is hosted on that address.
So what do I need to change on example.com so that the routing works not just from within the app, but also by typing in the URL directly in the address bar of the browser?
The site runs on Apache and I have Plesk as management tool.
How is routing handled in a built react app?
Specifically, in a development environment, we can simply hit <host>:<port>/<some-path> and the corresponding component is loaded, but once the app is built, we get a bunch of static files and single index.html file, which are then served by some server.
Now, upon hitting the url <server-host>:<server-port>, the app works as intended, but upon entering the path, say <server-host>:<server-port>/<component-path>, a 404 error is returned.
If there is, say a button, upon clicking which, the same /<component-path> is to be redirected, the app works, but then again upon refreshing that page, 404 error occurs.
How can this be solved? What is the correct way to serve such apps having many components at different routes?
approach1:(recommended)
In server config you should point all urls ( http://ipaddress:port/<* any url pattern>) to index.html of react-app . this is known as fallback-mechanism.
And when any request comes,index.html of React app will take care of that automatically because it is single page application.
approach2:
Use HashRouter in React app. So You will not have to configure anything.
Depending on which server you are deploying to, you should redirect all errors to the index.html look for the configuration maybe htaccess or for example if it an AWS S3 bucket you just specify the error page to the same index.html file that is served. Then you handle actual error in your code using a routing library like maybe react-router-dom to take care of actual error. Your failure is because in normal circumstances in a static host when you provide a URL like <server-port>/<component-path> the assumption the server makes is that there is a folder with name component-path in your root directory which has an index file from where to load and display but in the case of React single page application, everything is managed by the index.html. So every request has to pass via the index.html