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.
Related
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.
I wanted to deploy a react application which is a simple auth0 login page and on localhost:3000, eveything works fine, I can click the login button and everything works, it sends me to the auth0 login page.
Here is the part im stuck at:
When I push to Github and deploy to netlify and try to open it using the link netlify gave me, I click the login button and I get this in the URL bar: https://undefined/authorize?redirect_uri=
I have checked both the .env file in the app and on Netlify in the environments section and everything has the proper env variables. here is where I am testing it: https://reactjssample-324hz.netlify.app/
Here are the URIs I have setup:
Allowed Callback URLs:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Allowed Logout URLs:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Allowed Web Origins:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Please tell me if I need to include anything such as code snippets.
EDIT: 06/01/2022
I have added the domain and clientID to the index.js file but now I am getting this when I click the login button:
Netlify 404 page not found although I have this in the URL bar now: https://tubular-klepon-a1d5fc.netlify.app/authorize?client_id= which I assume is better than what I had before.
EDIT: 06/02/2022
Here are the endpoint settings I have for my application
endpoint settings
Thanks
324hz
win1H2
he/him
Look like you have not configured the YOUR_DOMAIN in the application. Let try to configure it with value reactjssample-324hz.netlify.app
And do not forget to configure the customer domain reactjssample-324hz.netlify.app in Auth0 platform.
configure YOUR_DOMAIN
Hope it can help.
I have this case where when clicked a link I redirect the user to the app using deep linking (made with RN) if the app is installed.
However, if the app is not installed instead of displaying error or a popup, I need to navigate to another route in the web, example: /web-login. I created the link for my app and it works, how do I test if the user has the app installed in the device, so then I can navigate to the other route if the user does't have it.
If the app is not installed I get something like: Browser cannot open the page because the address is invalid.
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.
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