<p>Im having problems when trying to access webapp frontends through Istio Gateway in minikube. I've configured ingress gateway to serve Angular frontend (minikube_ip:31380/home) and to serve React frontend (minikube_ip:31380/app) but when I try to access I get 404 files not found (css, assets, main.js, bundle.js, etc) --> <a href="https://i.stack.imgur.com/SAUTq.png" rel="nofollow noreferrer">404 Error Screenshot</a></p>

<p>I've tried to write --base-href /app in build command, "homepage": "." in package.json, "homepage": "/app" in package.json and nothing changed.</p>

<p>The only thing that changed the http response was the following tag in index.html (Angular):</p>

<pre><code>  &lt;base href="/home/"&gt;
</code></pre>

<p>index.html (React):</p>

<pre><code>  &lt;base href="/app/"&gt;
</code></pre>

<p>And the result was the next one:
   Angular App --> <a href="https://i.stack.imgur.com/W8d6t.png" rel="nofollow noreferrer">Angular project error</a>
   React App --> <a href="https://i.stack.imgur.com/heFJW.png" rel="nofollow noreferrer">React project error</a></p>

<p><strong>nginx.conf:</strong></p>

<pre><code>server {

  listen 80;

  sendfile on;

  default_type application/octet-stream;


  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   1100;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;


  root /usr/share/nginx/html;


  location / {
    try_files $uri $uri/ /index.html =404;
  }

}
</code></pre>

<p><strong>My Istio-Ingress-Rules:</strong></p>

<pre><code>apiVersion: networking.istio.io/v1alpha3
kind: Gateway
metadata:
  name: ingress-gateway-configuration
spec:
  selector:
    istio: ingressgateway
  servers:
  - port:
      number: 80
      name: http
      protocol: HTTP
    hosts:
    - "*" 
---
kind: VirtualService
apiVersion: networking.istio.io/v1alpha3
metadata:
  name: virtual-service
  namespace: default
spec:
  hosts:  
    - "*"
  gateways:
    - ingress-gateway-configuration

  http:

  - match:
    - uri:
        prefix: /app
    route:
    - destination:
        host: webapp-service
        subset: app

  - match:
    - uri:
        prefix: /home
    route:
    - destination:
        host: webapp-service
        subset: home


---
kind: DestinationRule
apiVersion: networking.istio.io/v1alpha3
metadata:
  name: destination-rule
  namespace: default
spec:
  host: webapp-service
  subsets:
    - labels:
        version: home
      name: home
    - labels:
        version: app
      name: app
</code></pre>

<p><strong>MAIN PROBLEM:</strong>
<a href="https://i.stack.imgur.com/bvMGU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bvMGU.png" alt="MAIN PROBLEM"></a></p>

<p>Finally, add that I've changed the mode of showing both frontends from Ingress Gateway to NodePort and accessing by NodePort they show well (e.g: minikube_ip:31040).</p>

<p>Thanks in advance.</p>

<p>Try modifying your ingress objects rewrite-target &amp; path as below:</p>

<pre><code>   nginx.ingress.kubernetes.io/rewrite-target: /$1
          path: /(.*)
</code></pre>

<p>and make sure you checked this <a href="https://kubernetes.github.io/ingress-nginx/examples/rewrite/#rewrite-target" rel="nofollow noreferrer">documentation</a></p>

<p>Once you tried this let me know.</p>
