1

I am new to deployment, networking, routing, handling DNS records, etc. and I'm currently working on a project which requires several subdomains to point to a same React app. This front-end app serves a template, to which all subdomains point. However, said template is supposed to be rendered with different elements (images, fonts, etc.) depending on which subdomain it was accessed from, so for example, accessing www.sub1.example.com would render the template filled with elements corresponding subdomain sub1. The goal is to have a web app that works like this this:

  • Front-end is accessible (say IPv4 X.X.X.X, port YYYY) only through subdomains. A user goes to www.sub1.example.com, and the template with specific elements for subdomain sub1 is rendered. This subdomain specifies (in some way that I haven't figured out yet) that it is fetching the url with the specific route X.X.X.X:YYYY/login/sub1, indicating that the template must be rendered with the elements corresponding to subdomain sub1.

Another way to put it is this: the goal is to have the subdomain records behave as if they each could point to a specific route on the app (which is not possible), like:

www.sub1.example.com -> X.X.X.X:YYYY/sub1

www.sub2.example.com -> X.X.X.X:YYYY/sub2

www.sub3.example.com -> X.X.X.X:YYYY/sub3

The idea is to "generate" different web pages while only hosting one front-end. Also, it is necessary to use subdomains, because it is required that users access each webpage through different subdomains, so I can't just use the same domain with different routes like www.example.com/sub1 or www.example.com/sub2 for each webpage.

What is a possible way in which this could be accomplished? Also, I'm not entirely sure that pointing several subdomains to a single app is the best way to go, but I think the idea is to only host one app which renders several web pages based on a template. Is this something that is commonly done? If not, why? Anyway, any suggestions would be greatly appreciated :)

As of now, I have just recently started working on this, so I haven't really tried anything yet. However, this question looks kind of like what I am looking for, except that I'm working on React and I won't have separate files for each company because the amount of companies could potentially grow.

kelos
  • 15
  • 5
  • Off the top of my head (might be wrong) you can use an express server as middleware to handle the routing. Your frontend can hit the express server with different paths, then the server can hit the appropriate endpoints and serve the right webpage as the response – bcstryker Jan 16 '23 at 22:15
  • does this help at all? https://stackoverflow.com/questions/39491834/how-to-run-two-react-js-applications-in-same-domain – bcstryker Jan 16 '23 at 22:19
  • @bcstryker Thanks, I'll probably do that. The thing is that I wanted to be able to add more and more pages/companies periodically without the need to code new handlers for each new subdomain, but right now I don't see a way around it. If I could do something like translating a subdomain into a full url including a route with parameters, I think it would be quite simple to make my app automatically request data from any company/page with the same handler. – kelos Jan 16 '23 at 23:55
  • @bcstryker Also, regarding the question you sent me, I think they were trying to have several apps on one domain, I'm kinda looking for the opposite, several domains pointing to one app. Thanks anyway :) – kelos Jan 16 '23 at 23:56
  • idk anything about your infrastructure but if you have some db or api where data about the pages is or could be served maybe you could generate the handlers programmatically :) There's also this thing called an ` – bcstryker Jan 17 '23 at 01:36

0 Answers0