<p>Not sure if this is a Kubernetes, <code>ingress-nginx</code>, or ReactJS (<code>create-react-app</code>) issue...</p>

<p><strong>Project Structure</strong></p>

<pre><code>new-app/
  client/
    src/
      App.js
      index.js
      Test.js
    package.json
  k8s/
    client.yaml
    ingress.yaml
  server/
  skaffold.yaml
</code></pre>

<p><strong>Issue</strong></p>

<ul>
<li>ReactJS front-end should be running at <code>192.168.64.5/client</code> when the cluster is spun up with Skaffold</li>
<li>Navigate to <code>192.168.64.5/client</code> and blank screen</li>
<li>Developer Console shows:</li>
</ul>

<p><a href="https://i.stack.imgur.com/5TE2g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5TE2g.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/PYarq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PYarq.png" alt="enter image description here"></a></p>

<p>Basically, it is trying to serve static files from <code>/static</code>, but I need them to come from <code>/client/static</code></p>

<p><strong>Propsed Solutions</strong></p>

<p>Assuming this is a ReactJS issue, the solutions have been the following:</p>

<ul>
<li>Setting <code>homepage</code> in the <code>package.json</code></li>
<li>Setting <code>basename</code> in the <code>react-router-dom</code></li>
<li>Following <a href="https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/" rel="nofollow noreferrer">this "elegant" solution</a></li>
</ul>

<p>None seem to work in my case. Still shows assets trying to be served from <code>/static</code> instead of <code>/client/static</code>.</p>

<p><strong>ReactJS App Code</strong></p>

<pre><code>// App.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';

import Test from './Test';

const App = () =&gt; {
  return (
    &lt;BrowserRouter
      basename='/client'&gt;
        &lt;&gt;
          &lt;Route exact path='/' component={Test} /&gt;
        &lt;/&gt;
    &lt;/BrowserRouter&gt;

  );
}

export default App;
</code></pre>

<pre><code>// Test.js

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

const Test = () =&gt; {

  const [data, setData] = useState('');

  useEffect(() =&gt; {
    const fetchData = async () =&gt; {
      const result = await axios('/api/auth/test/');
      setData(result.data);
    };
    fetchData();
  }, []);

  return (
    &lt;div className='App'&gt;
    &lt;header className='App-header'&gt;
      &lt;img src={logo} className='App-logo' alt='logo' /&gt;
      &lt;p&gt;
        Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload!
      &lt;/p&gt;
      &lt;p&gt;
        {data}
      &lt;/p&gt;
      &lt;a
        className='App-link'
        href='https://reactjs.org'
        target='_blank'
        rel='noopener noreferrer'
      &gt;
        Learn React
      &lt;/a&gt;
    &lt;/header&gt;
    &lt;/div&gt;    
  )

};

export default Test;
</code></pre>

<pre><code>{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "homepage": "/client",
  "dependencies": {
    "axios": "^0.19.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
</code></pre>

<p><strong>Kubernetes/Skaffold and Docker Manifests</strong></p>

<pre><code># Dockerfile.dev

FROM node:alpine
EXPOSE 3000
WORKDIR '/app'
COPY ./client/package.json ./
RUN npm install
COPY ./client .
CMD ["npm", "run", "start"]
</code></pre>

<pre><code># ingress.yaml

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/add-base-url: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  rules:
    - http:
        paths:
          - path: /client/?(.*)
            backend:
              serviceName: client-cluster-ip-service
              servicePort: 3000
</code></pre>

<pre><code># client.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: client-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      component: client
  template:
    metadata:
      labels:
        component: client
    spec:
      containers:
        - name: client
          image: clientappcontainers.azurecr.io/client
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: client-cluster-ip-service
spec:
  type: ClusterIP
  selector:
    component: client
  ports:
    - port: 3000
      targetPort: 3000
</code></pre>

<pre><code># skaffold.yaml

apiVersion: skaffold/v1beta15
kind: Config
build:
  local:
    push: false
  artifacts:
    - image: clientappcontainers.azurecr.io/client
      docker:
        dockerfile: ./client/Dockerfile.dev
      sync:
        manual:
          - src: "***/*.js"
            dest: .
          - src: "***/*.html"
            dest: .
          - src: "***/*.css"
            dest: .
deploy:
  kubectl:
    manifests:
      - manifests/ingress.yaml 
      - manifests/client.yaml
</code></pre>

<p>So what am I doing wrong here?</p>

<p><strong>EDIT:</strong></p>

<p>I should note that things work fine when doing this though:</p>

<pre><code>- path: /?(.*)
  backend:
    serviceName: client-cluster-ip-service
    servicePort: 3000
</code></pre>

<p>Repo to demo the issue:</p>

<p><a href="https://github.com/eox-dev/subdir-issue" rel="nofollow noreferrer">https://github.com/eox-dev/subdir-issue</a></p>

cjones
<p>Apparently, this is not possible currently in CRA in a dev environment:</p>

<p><a href="https://github.com/facebook/create-react-app/issues/8222#issuecomment-568308139" rel="nofollow noreferrer">https://github.com/facebook/create-react-app/issues/8222#issuecomment-568308139</a></p>
