We are trying to implement path-based routing using Istio virtual service. Our application is react based SPA and it expects “/” instead of the path. We want to have a single host and we pass the app name as a parameter along with the URL and expect to reach the applications like
https://digital.example.com/app1 and https://digital.example.com/app2
we tried to define “/app1 or /app2” in virtual service as a routing rule instead of “/”, but SPA is not getting loaded and we are getting 404.
and tried the below configuration.
http:
- match:
- uri:
prefix: /
route:
- destination:
host: app1
port:
number: 80
Reference used: Istio Ingress routing fails with 404 for Nginx/Angular app
This is working for app1 and tried the same rule for app2.and it is not working, getting a blank page. / should be routed to Frontend to get the Index.html.how do we handle this issue? Any help is much appreciated.
Related
We try to serve an UI via Kong Gateway.
Example:
services:
- name: portal-homepage
url: http://host.docker.internal:8080
routes:
- name: portal-homepage
paths:
- /portal-homepage
methods:
- GET
- OPTIONS
This works fine, but the React UI is trying to fetch statics like js, images, favicon from "localhost:8000/js/" instead of "localhost:8000/portal-homepage/js/".
If I change the base path for React, to "/portal-homepage" everything runs like expected, but we do not want to modify the existing application.
Is there any chance to tell "Kong" to handle this?
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.
I have an Electron App, which uses Angular 2 - in order to work i needed to modify <base href="/"> to <base href="./">, which is a relative path in the file system. But now the API doesn't work anymore (Webclient on localhost works fine, but not Electron Client).
I access the API via proxy.conf.json
{
"/api": {
"target": "http://127.0.0.1:4747/Ticketsale",
"secure": false
}
}
And the error message in the JavaScript Console of Chromium / Electron is:
file:///Users/myusername/folder/apps/officeclient_electron/office-client-darwin-x64/office-client.app/Contents/Resources/app/api/1/initialData
Failed to load resource: net::ERR_FILE_NOT_FOUND
How can i tell Electron to access the local resources via relative Path and consume the API via HTTP?
We enabled CORS on the Webserver and this setting allowed us to consume the REST-API from a different URL.
See https://en.wikipedia.org/wiki/Cross-origin_resource_sharing for details.
I've been having troubles trying to connect a module to my custom domain.
I works perfectly on the appspot domain but not on my custom domain.
E.G.
http://m.myappname.appspot.com calls the dispatch.yaml file which routes the request to my mobile frontend
BUT
http://m.myappcustomdomain.com serves the default module (app.yaml)
Any help will be highly appreciated.
Thanks
You could an entry like this in your dispatch.yaml file:
- url: "m.myappcustomdomain.com/*"
module: your_mobile_module
How can I configure an Amazon S3 static webpage to properly route Angular ui.router html5Mode routes? On page refresh, it will make a request for a file that doesn't exist, and angular can't handle it. In the docs, they recommend changing your URL rewrites on the server.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
However, S3 is storage, and doesn't offer the same redirection options
I have been trying to use the built in redirection rules such as
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>[[ your application's domain name ]]</HostName>
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
However, this just leads to a redirect loop.
Any suggestions?
In the Frequently Asked Questions, they rewrite almost everything to serve the index.html page. For HTML5 fallback mode you need to use #!/ (hashbang).
You could change this:
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
with
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
More details on this answer: https://stackoverflow.com/a/16877231/1733117
You may also need to configure your app for using that prefix:
angular.module(...)
...
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
Make sure you have the index route configured for your website. Mostly it is index.html
Remove routing rules from S3 configurations
Put a Cloudfront in front of your S3 bucket.
Configure error page rules for your Cloudfront instance.
In the error rules specify:
Http error code: 404 (and 403 or other errors as per need)
Error Caching Minimum TTL (seconds) : 0
Customize response: Yes
Response Page Path : /index.html
HTTP Response Code: 200
Basically there are 3 options, use an EC2 instance to perform the actual server rewrites to the configured HTML5 routes, or, like dnozay suggested, use the fallback mode and re-write requests to use the #! hashbang. Finally, you could just use the standard angular routes, which is the option I went with. Less hassle, and when Angular 2.0 rolls around, you can update to that.
https://stackoverflow.com/a/16877231/1733117
Doesn't really address the routing issue here.
here is another option using nginx proxy_pass, it also allows you to have multiple projects in subfolders and use subdomains
S3 Static Website Hosting Route All Paths to Index.html