This is definitely a more theoretical architecture question, and I'll admit I'm not very familiar with either React or Kubernetes/Istio, so I request you ask me for clarification if I am being confusing.

I am working on setting up a React SPA (single page application). I've got it working great, actually, and it's being hosted statically on AWS S3, distributed via CloudFront, and registered with a domain (let's call it yuchensdomain.com for now) and backed with HTTPS.

I discovered the Kubeflow project a while back and stood up the cluster for fun, and tldr; after you deploy it on AWS EKS, you expose an Istio Ingress Gateway as an AWS ELB. I was able to deploy it to my subdomain kubeflow.yuchensdomain.com.

Kubeflow also exposes a React application that is pretty nifty (see screenshot below, although ignore the api.ychennay.com domain - I used that as a test domain for my deployments):

Kubeflow's setup is painful and uses a bunch of ksonnet files that are difficult to dig through, so I'd like to save the actual integration of the two frontend apps for a later day.

My question is: what is the best way to connect (route a user from) my React SPA to Kubeflow's frontend, given that my React SPA's CNAME is yuchensdomain.com and my Kubeflow's CNAME is kubeflow.yuchensdomain.com? Basically, I want in my React SPA to be able to do something like this:

<Route exact path="kubeflow.yuchensdomain.com" )/>

So if I had some React component, I could write something like

<Button onClick={()=> goToKubeFlowUrl()}/>

Obviously the above code does not work, from both this Reddit post and this SO post. I know that this is mostly a server-side issue, since the content is being served from different machines on the backend. However, I'm still curious to see if there are any best practices around this problem, since I'm new to both Kubernetes and React.

I'd also be happy if I could somehow configure AWS ELB to listen for a specific endpoint, like yuchensdomain.com/kubeflow and route that to kubeflow.yuchensdomain.com, however, I do not believe this is possible within AWS load balancing.

My initial guess is that I just need a direct href link to kubeflow.yuchensdomain.com, like this:

class Button extends Component {
  handleOnClick() {
    window.location.assign('https://kubeflow.yuchensdomain.com');
  }

  render() {
    return (
      <button onClick={this.handleOnClick.bind(this)} />
    );
  }
} 

However, I'm wondering if there is an easier/cleaner way to route between different subdomains and domains within React.