How do I serve a firebase site using the domain from another firebase site?

Viewed 137

I have a firebase site with a domain of gs-domain1.web.app. I have a second firebase site with a domain of gs-domain1.web.app.

Now, I want all traffic to go through the gs-domain1.web.app. However, when the path matches a specific route, like, /users/:id/pages, I want the site on gs-domain2.web.app to take over without switching the domain, but maintaining the path.

I believe a redirect will not work because it physically switches the domain. I believe a rewrite will not work because I can't recreate the path on the destination.

Both the application on domain1 and domain2 are single-page applications (react and vue respectfully).

2 Answers

I am not sure exactly what you mean by "take over without switching the domain, but maintaining the path". If you mean that you want the user to now see the page on gs-domain1.web.app when at this specific path, but still have gs-domain1.web.app as the domain in the url in their browser, I can only really think of two good ways to do this.

  1. You use an iFrame to display the page from gs-domain2.web.app as the entire contents of the page on gs-domain1.web.app at the specific path. This can potentially introduce weirdness if the second page is complex.

  2. You get rid of the second domain and instead move that codebase over to the first domain and write some middleware that serves from the first codebase whenever the user is requesting a path that should come from gs-domain1.web.app currently and serves from the second codebase whenever a user requests a path that should currently be coming from gs-domain2.web.app. I feel that this would be the more 'correct' approach if this is the desired behavior you want.

Alternatively, if you do not care what domain the user is seeing, I would suggest, as you mentioned, merely setting up some clever redirects to bounce users between the two based on which path they are requesting.

I hope this was helpful and goodluck!

In firebase, you could host more than one site in one project and that would solve your problem.

Host/Deploy the react code to firebase and link the site with the URL of gs-domain2.web.app and do another hosting in the same project as the react but vue on gs-domain2.web.app

After you have successfully linked the domain and hosted the sites... Link the URL together with or anyone you like.

PROS: Your sites would load separately and would be faster.

Also,

It would be great if you put all the code under one domain

Then you can use different paths for the 2 sites so they would be easily identifiable. so you have : gs-domain1.web.app/path1 and gs-domain1.web.app/path2

You will find the add another site function at the bottom of the hosting section below 1

Related