<p>I am deploying a Jhipster app to a Kubernetes environment, and am using Istio for the networking. </p>

<p>Below is my VirtualService. Note that when the <code>prefix</code> is set to <code>/</code>, everything works fine. However I have several apps running on this cluster, so I need to map it to <code>/mywebsite</code>. </p>

<pre><code>apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
 name: ingress
spec:
 hosts:
 - "*"
 gateways:
 - mywebsite-gateway
 http:
 - match:
   - uri:
       prefix: /mywebsite
   route:
   - destination:
       host: mywebsite
       port:
         number: 80
   websocketUpgrade: true
</code></pre>

<p>When I access the app, I get these set of errors:</p>

<pre><code>mywebsite:3 GET http://mywebsite.com:31380/app/vendor.bundle.js net::ERR_ABORTED 404 (Not Found)

manifest.bundle.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.bundle.js:55)
    at eval (app.main.ts?3881:1)
    at Object../src/main/webapp/app/app.main.ts (main.bundle.js:447)
    at __webpack_require__ (manifest.bundle.js:55)
    at webpackJsonpCallback (manifest.bundle.js:26)
    at main.bundle.js:1
__webpack_require__ @ manifest.bundle.js:55
eval @ app.main.ts?3881:1
./src/main/webapp/app/app.main.ts @ main.bundle.js:447
__webpack_require__ @ manifest.bundle.js:55
webpackJsonpCallback @ manifest.bundle.js:26
(anonymous) @ main.bundle.js:1

manifest.bundle.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.bundle.js:55)
    at eval (global.css?ca77:1)
    at Object../node_modules/css-loader/index.js!./src/main/webapp/content/css/global.css (global.bundle.js:6)
    at __webpack_require__ (manifest.bundle.js:55)
    at eval (global.css?0a39:4)
    at Object../src/main/webapp/content/css/global.css (global.bundle.js:13)
    at __webpack_require__ (manifest.bundle.js:55)
    at webpackJsonpCallback (manifest.bundle.js:26)
    at global.bundle.js:1
__webpack_require__ @ manifest.bundle.js:55
eval @ global.css?ca77:1
./node_modules/css-loader/index.js!./src/main/webapp/content/css/global.css @ global.bundle.js:6
__webpack_require__ @ manifest.bundle.js:55
eval @ global.css?0a39:4
./src/main/webapp/content/css/global.css @ global.bundle.js:13
__webpack_require__ @ manifest.bundle.js:55
webpackJsonpCallback @ manifest.bundle.js:26
(anonymous) @ global.bundle.js:1

mywebsite:1 Unchecked runtime.lastError: The message port closed before a response was received.
</code></pre>

<p>I'm not sure why it is trying to go <code>/app/vendor.bundle.js</code>. I think it should go to <code>/mywebsite/app/vendor.bundle.js</code>. Although when I go to this page manually, I get a <code>Your request cannot be processed</code></p>

<p>Also in my <code>index.html</code>, I have <code>&lt;base href="./" /&gt;</code>, which had always been there ,as I read that as a possible solution.</p>

Mike K.
<p>As you mentioned in comments</p>

<blockquote>
  <p>I set new HtmlWebpackPlugin({ baseUrl: '/myapp/' }) in the webpack ... and  in the index.html. I get some new errors (ie. can't find favicon), but still the site doesn't load as doesn't seem to find the javascript or soemthing – Mike K</p>
</blockquote>

<p>That's how it supposed to work. It doesn't load javascript and probably css/img's because you didn't show istio uri for this.</p>

<p>So the solution here is </p>

<ul>
<li>Make new baseUrl and basehref, for example /myapp</li>
<li>Create virtual service with /myapp prefix or any prefix and /myapp rewrite</li>
<li>Create additional uri's for your javascript/css/img's folder path</li>
</ul>

<p>Take a look at this <a href="https://rinormaloku.com/istio-practice-routing-virtualservices/" rel="nofollow noreferrer">example</a></p>

<blockquote>
  <p>Let’s break down the requests that should be routed to Frontend:</p>
  
  <p><strong>Exact path</strong> / should be routed to Frontend to get the Index.html</p>
  
  <p><strong>Prefix path</strong> /static/* should be routed to Frontend to get any static files needed by the frontend, like <strong>Cascading Style Sheets</strong> and <strong>JavaScript files</strong>.</p>
  
  <p><strong>Paths matching the regex ^.*.(ico|png|jpg)$</strong> should be routed to Frontend as it is an image, that the page needs to show.</p>
</blockquote>

<pre><code>http:
  - match:
    - uri:
        exact: /
    - uri:
        exact: /callback
    - uri:
        prefix: /static
    - uri:
        regex: '^.*\.(ico|png|jpg)$'
    route:
    - destination:
        host: frontend             
        port:
          number: 80
</code></pre>
