1

I want to load React Component based on host name , Example , let say We have React application 'Frontend' and URL to access this app is <base_url>/test/login or <base_url>/test/home. Now I want to access this app from 2 different host name.

  1. test.abc.com/test/login , test.abc.com/test/home
  2. test.xyz.com/test/login , test.xyz.com/test/home

Now If user use #1 then it will show the login/home/logout page for test.abc.com only and for #2 login/home/logout page is different. Basically I need to customized the UI based o hostname.

Can anyone tell me , How can I achieve this scenario or is there any other way to do that?

SubrataG
  • 137
  • 1
  • 12

4 Answers4

1
  1. Test the value of location.hostname
  2. Select your component based on that
  3. Pass it to your route

For example:

import { ABCLogin, XYZLogin } from "./LoginComponents";
const Login = location.hostname === "test.abc.com" ? ABCLogin : XYZLogin;

const App = () => {
    /* ... */
    <Route path="login" element={<Login />}>
    /* ... */
}

From a comment on another answer:

If the app is running from 100 hostnames and the login/home/logut and others are different based on host name , then in this case whether this approach is applicable too?

Going from 2 (as specified in the question) to 100 is something of a goalpost move, but…

Since including 100 different Login components would bloat the application, I would do the selection at build time. The specifics would depend on which toolchain you were using to build your production app.

For example, if you were using Webpack you could do something like:

resolve: {  
    alias: {
        components: path.resolve(__dirname, 'src/components/'),
        'components/Login': path.resolve(__dirname, `src/components/${process.env.TARGETHOSTNAME}Login`)
    }
}

This would require that you set the TARGETHOSTNAME environment variable before building.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks for your response. If the app is running from 100 hostnames and the login/home/logout and others are different based on host name, in this case whether this approach is good go? – SubrataG Jul 04 '22 at 11:10
  • I am not using the webpack. So how can I handle this scenario? – SubrataG Jul 04 '22 at 11:16
  • "The specifics would depend on which toolchain you were using to build your production app." — Telling me you don't use webpack doesn't tell me what you do use. – Quentin Jul 04 '22 at 11:16
  • I just create the react app using create-react-app cmd and build using npm run build cmd.I am not using any toolchain. – SubrataG Jul 04 '22 at 11:20
  • @SubrataGhosh — create-react-app generates a webpack based toolchain for you. See https://stackoverflow.com/a/48395890/19068 for how to configure it. – Quentin Jul 04 '22 at 11:25
  • Thanks for your reference. But I have 1 question since it needs to be modified in the node_modules folder. So every time if npm I cmd invokes then in that case it will be removed – SubrataG Jul 04 '22 at 11:40
  • @SubrataGhosh — Read the second half of the answer I linked to which tells you not to modify the files in node_modules. – Quentin Jul 04 '22 at 11:41
  • are u saying the answer from stackoverflow.com/a/48395890/19068 url? – SubrataG Jul 04 '22 at 11:44
  • Yes, it gives the paths in `node_modules` then says "Now, the purpose of CRA is not to worry about these." and then tells you what you can do instead. – Quentin Jul 04 '22 at 11:45
  • That means I need to use CRACO right! Is there any other way to do that? – SubrataG Jul 04 '22 at 13:46
  • You could use eject instead. – Quentin Jul 04 '22 at 13:47
  • what will be the major problem if I use eject. – SubrataG Jul 04 '22 at 13:48
  • https://spin.atomicobject.com/2020/01/28/eject-create-react-app-drawbacks/ – Quentin Jul 04 '22 at 13:50
  • https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741 – Quentin Jul 04 '22 at 13:50
  • https://sebhastian.com/create-react-app-eject/ – Quentin Jul 04 '22 at 13:50
  • resolve: { alias: { components: path.resolve(__dirname, 'src/components/'), 'components/Login': path.resolve(__dirname, `src/components/${process.env.TARGETHOSTNAME}Login`) } } Here what does this 'components/Login' indicating? I think there will 2 login component if I have 2 host name then what does this meant for? – SubrataG Jul 04 '22 at 14:44
0

Use window.location.hostname and useEffect to achieve desired behaviour. Basically check the url inside useEffect and redirect using ReactRouterDOM library or something similar.

Ali Beyit
  • 431
  • 1
  • 6
  • 19
  • If the app is running from 100 hostnames and the login/home/logut and others are different based on host name , then in this case whether this approach is applicable too? – SubrataG Jul 04 '22 at 11:06
  • Depends on where you implement this logic. There are bunch of other useful information you can extract from window.location object so it is not limited by hostname only. If I were you I would implement my routing logic on the App component or whatever it is the entry point of your application and build up the logic from there. – Ali Beyit Jul 04 '22 at 11:08
-1

get the hostname with the javascript function location.hostname; if the hostname is test.abc.com redirect to test.abc.com/logout else redirect to test.xyz.com/logout

Alessio
  • 24
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 05 '22 at 09:56
-1

Use window.location.hostname to get the hostname and split at '.'

const subdomain = window.location.hostname.split('.')[1]

if(subdomain === "abc") {
  // ... do something
} else {
  // ... do something
}
JaswanthSriram
  • 194
  • 1
  • 8