Question: Different results when using multiple proxies with react router.

[HappyZombies]

So I created my react app and added react router, I have the proxy property in my package.json as so

"proxy": "http://myurl:1000"

http://myurl:1000 has an endpoint /users (so http://myurl:1000/users) that returns json data. With react router, I can create my own endpoint of the same name (http://localhost:3000/users) and I will get my component/page of users, not the JSON data.

And if I use fetch, axios, ajax etc to the endpoint of http://localhost:3000/users, I will get the json data. This all makes sense as you state in the WebpackDevServerUtils.js. However, how should I go about this for multiple proxies ?

On that same file of WebpackDevServerUtils.js and the same line, the context method is different when I specify a string (a single proxy), and the method you give for context is different when I specify an object (multiple proxies). See the code.

So I created this...

"proxy": {
    "/apiv2": {target: "http://differenturl:1001"},
    "/": {target: "http://myurl:1000"}
 }

With this, if I try to go to http://localhost:3000/users, in fact, any endpoint, it will go to the http://myurl:1000 endpoint and return me either the json data or a 404 page from the myurl:1000, not the react router page/component I have setup.

Keep in mind that http://myurl:1000 has, let's say, 20 end points. Will I have to specify each and every single one ? Or is there something I am missing/need to specify in the proxy object ? Any help with this would be appreciated, thanks!

[Timer]

Multiple proxies do not abide by the same rules, they are custom in this nature for that reason.
Why aren't you namespacing your API calls, to say, /apiv1?

[HappyZombies]

So there is no way to have multiple proxies abide by the same rules as a single proxy in the package.json proxy property ? I tried looking for some property options in the node http proxy options but found nothing. If not it's no big deal, I can specify each endpoint in the package.json proxy property.

As for the namespacing, I was simply providing an example.

[Timer]

You'll have to specify each one unless if you can use some sort of globbing.

[Timer]

I'll close this as it's rare to have non-namespaced API (and question has been answered); if it's actually a different URL in production, you should be using an environment variable.

[HappyZombies]

Alright, thanks for the help, I appreciate the fast response.

[Timer]

No problem!

To expand on what I said earlier slightly, you can create an environment variable named REACT_APP_API_V1_URL and then prefix all of your API calls using process.env.REACT_APP_API_V1_URL.
e.g.

fetch(`${process.env.REACT_APP_API_V1_URL}/users`).then(...).catch(...)

If this doesn't fix your use case, I suggest namespacing your API because serving an API endpoint and then HTML page from the same route is super confusing (where you're toggling based on headers).