Combining routes of frontend and backend

I have a React front-end and Flask API as back-end. I wish to have both front-end and back-end routes accessible at same address. E.g frontend at myapp.web.com and backend at myapp.web.com/api. It will have different deployments for them. I want to know how to do this.

Yes, you can have the same domain that can point to multiple services based on the path. Normally this can help you to resolve the CORS issue.

API

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: nginx
    kubernetes.io/tls-acme: "true"
  name: backend-ingress
  namespace: backend-api
spec:
  rules:
  - host: myapp.web.com
    http:
      paths:
      - backend:
          service:
            name: backend-service-name
            port:
              number: 80
        path: /api
        pathType: Prefix
  tls:
  - hosts:
    - myapp.web.com
    secretName: my-secret-tls

Frontend ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations: 
    kubernetes.io/ingress.class: nginx
    kubernetes.io/tls-acme: "true"
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
  name: frontend-service
  namespace: frontend-service
spec:
  rules:
  - host: myapp.web.com
    http:
      paths:
      - backend:
          service:
            name: frontend-service-name
            port:
              number: 80
        path: /
        pathType: Prefix
  tls:
  - hosts:
    - myapp.web.com
    secretName: my-secret-tls

so in this case, all the requests that start with /api will route to the backend app and rest of the requests will route to frontend.