Issue with proxy to a React app

Hello everyone,

I have a single page React app running on Netlify at this url:

As I needed some static marketing pages I decided to build them with Gatsby on a separate app running on Netlify at this url:

Now I’d like to have the React app proxied on a subfolder of the Gatsby website. Something like this:

So on the Gatsby site I created a _redirects file (inside static folder) with this content:
/editor/* https://zwiftworkout.netlify.app/editor/:splat 200!

Unfortunately the proxy doesn’t work. I only get a blank page with a bunch 404s. What am I doing wrong?
Link to proxy

Thanks for your help!

It’s probably because the content from your https://elegant-jennings-cc78bd.netlify.app/editor/:splat is getting redirected to https://zwiftworkout.netlify.app/editor/:splat, but, the CSS, JS content is located at https://elegant-jennings-cc78bd.netlify.app/...path-to-files and thus, they’re unaffected by the redirect rule as it only targets /editor/*. You’d probably have to make the files relative to the /editor/ directory and not relative to the domain.

I’m confused.

Let’s assume i want this situation:

www.siteA.com/editor to show content from www.siteB.com.

If I understand correctly I just need to write a _redirects on siteA with the following:
/editor/* www.siteB.com/:slug 200!

Now this is not working as the page www.siteA.com/editor is looking for assets in www.siteA.com that are simply not there. What am I missing here?

If you check the source of your webpage at https://elegant-jennings-cc78bd.netlify.app/editor/new, you’ll understand the situation in a better way.

The problem is, the assets in the source website (that is, zwiftworkout) are linked relative to that domain. So, when you are redirect from elegant-jeggings to zwiftworkout, you’re just rendering the contents of the page at zwiftworkout on the elegant-jeggings page. Since the URL in the address bar of the browser is elegant-jeggings, the browser is looking for those relative files in elegant-jeggings domain, which, don’t exist.

I would suggest to switch to absolute URLs as they would make it much easier. You don’t even need to do anything, just enable assets optimization for your websites and Netlify should take care of the rest.

That’s wonderful. Enabling asset optimisation did the trick!

Thank you so much!

1 Like