Have React App Accessable under the same Domain as my Gatsby Portfolio

Objective

I want to be able to have my projects accessible under the same domain as my portfolio.

So my portfolio (which uses Gatsby) accessible at example.com.

My React App accessible at example.com/app.

So I want to redirect the path /app to my app https://snazzy-lamington-d3ba72.netlify.app so that the site is accessible at example.com/app. All while people can still see my portfolio at example.com.

Attempts

My first attempt was creating a _redirects file and forcefully redirecting it.

/app  https://snazzy-lamington-d3ba72.netlify.app 200!

My second attempt was using the netlify.toml feature and using a redirect.

[[redirects]]
  from = "/app"
  to = "https://snazzy-lamington-d3ba72.netlify.app"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

When I try to access the app I just keep getting a white screen and if I inspect the body it says “You need to enable JavaScript to run this app” additionally resources can’t be accessed because they don’t exist on the domain.

I’ve tried forcefully redirecting and not, nothing seems to work. Please help.

Example

I’ve built a quick example. My portfolio (Gatsby) is viewable at: Portfolio (“/”)

But the react app redirect has a white screen and missing resources: React App (“/app”)

Replication

You can replicate this issue by just building the Gatsby template and React App templates to Netlify, then redirecting from a URL in Gatsby to React (This is what I did in the example).

Try using the <base> tag in your React application.