I've got a portfolio called example.com and a small app, both hosted on netlify independently of each other - but I want the app accessable under the same domain my portfolio is on.
So I want to redirect the path /sandwich-maker to my app https://sandwich-example-4bbo00.netlify.app so that the site is accessable at example.com/sandwichmaker. All while people can still see my portfolio at example.com.
My first attempt was creating a _redirects file and forcefully redirecting it.
/sandwich-maker https://sandwich-example-4bbo00.netlify.app 200!
My second attempt was using the netlify.toml feature and using a redirect.
[[redirects]]
from = "/sandwich-maker"
to = "https://sandwich-example-4bbo00.netlify.app"
status = 200
force = true
headers = {X-From = "Netlify"}
I've been able to get redirects to work between two past-project gatsby sites but not between a gatsby site and a react app.
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.".
I've tried forcefully redirecting and not, nothing seems to work. Please help.
Finally found a workaround for it!
The solution I found was to use the <base> tag in my React application.
<head>
<base href="https://sandwich-example-4bbo00.netlify.app/">
...
</head>
The issue was that relatively referenced resources didn't exist on the main domain, so setting the context with <base> should fix all the missing files.