Getting domain in React application

Question

How to host React app in a way, that it uses the domain of the husk HTML instead of having it configured in some config.js as suggested in another answer ( Dynamic configuration variables in Javascript / React )?

The react JS is hosted under same domain as the application API. It is assumed root is always used per application, not subdirectory, so just https://some.domain can be baseUrl. Dev setup for React is not of interest for PROD, and can be set up separately.

For example, there can be many domains, which the same JavaScript code should serve.

Why it is so simple with the normal js code, which can be ignorant of domain, and a problem with React?

Backend is not Node.js, but even backend gets it's domain from HTTP headers, so having to configure React seems very odd.

Is there any way better than having some configuration transponder on the backend?

The idea is that React code is stored without any lists of possible domains as is suggested everywhere. At the moment it needs to be specially build for each domain separately, which is not convenient, and in described scenario of same domain it should be avoided. What can be put into src/config/index.js to make it sense the domain dynamically?

The React works with API only.

Answer 1

Create-React-App doesn't care about the domain, so it's unclear why that's giving you issues. The only thing I can think of is that someone other than yourself has developed the application you're working on and you've decided it needs to be different.

To figure out the domain you can use window.location.origin assuming you're not using ports anywhere (it will include :<port-number> if you're running react on a port).

If ports are involved you can use `${window.location.protocol}//${window.location.hostname}` . Might be safer to use this anyway..

---

To use this in multiple places it makes sense to retrieve it in one place like this src/config/index.js that you've referred to (not a default product of create-react-app btw, if you have one of these already it's because the previous guy created it).

in that file you might have something like

export default {
  baseUrl: `${window.location.protocol}//${window.location.hostname}`
};

and then to use that in one of your API calls you'd do something like:

import config from 'config/index.js'; // or whatever path to get to that file

...

const url = `${config.baseUrl}/api/getStuff`;
const response = await fetch(url);

...

---

As @NickCox mentioned in the comments though, you should be able to use relative urls and skip the whole config thing. (assuming your react app isn't running on a port AND you don't have a <base..> tag in your page)

for example, /api/getStuff will be treated as same url as in the code above ( `${config.baseUrl}/api/getStuff` )