I have a simple application composed with Express.js as backend API and React.js as Frontend client.

I create a singles image container with frontend and backend Application repo: https://github.com/vitorvr/list-users-kubernetes

Dockerfile:

FROM node:13

WORKDIR /usr/app/listusers

COPY . .

RUN yarn
RUN yarn client-install
RUN yarn client-build

EXPOSE 8080

CMD ["node", "server.js"]

server.js

const express = require('express');
const cors = require('cors');
const path = require('path');

const app = express();
const ip = process.env.IP || '0.0.0.0';
const port = process.env.PORT || 8080;

app.use(express.json());
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));

app.get('/users', (req, res) => {
  res.json([
    { name: 'Jhon', id: 1 },
    { name: 'Ashe', id: 2 }
  ]);
});

app.listen(port, ip, () =>
  console.log(`Server is running at http://${ip}:${port}`)
);

React call:

const api = axios.create({
  baseURL: 'http://0.0.0.0:8080'
});

useEffect(() => {
  async function loadUsers() {
    const response = await api.get('/users');
    if (response.data) {
      setUsers(response.data);
    }
  }
  loadUsers();
}, []);

To deploy and run this image in minikube I use these follow commands:

kubectl run list-users-kubernetes --image=list-users-kubernetes:1.0 --image-pull-policy=Never
kubectl expose pod list-users-kubernetes --type=LoadBalancer --port=8080
minikube service list-users-kubernetes

The issue occurs when the front end try to access the localhost:

I don't know where I need to fix this, if I have to do some fix in React, or do some settings in Kubernetes or even this is the best practice to deploy small applications as a Container Image at Kubernetes.

Thanks in advance.