Firebase hosting dynamic index.html based on domain

Question

Our application supports multiple domains. Is there a way to serve a different index.html file based on a domain in the request?

It doesn't look like firebase rewrites support that https://firebase.google.com/docs/hosting/full-config#rewrites

Business requirement: is to be able to serve different meta tags based on the domain

Current approach: have a separate hosting bucket for each domain that requires custom meta tags. This generally works but it has a problem of scale and we are simply duplicating resources as we need to upload the same files to every bucket.

Reviewed solution: to have 1 bucket and serve entry point (index.html) dynamically via firebase functions. Cons:

• Function needs to be redeployed every time we deploy new version
• Creates dependency between hosting and functions We need to make sure that new index.html is served only after files are deployed. When you do firebase deploy it actually takes care of the order but wouldn't be surprised if there are some edge cases
• Makes it harder to do rollbacks as we would need to rollback file that function serves

Reviewed solution 2: Similar to reviewed solution above but instead of storing a file in functions folder we could download it via.network request from the latest version of hosting folder

Answer 1

Firebase supports dynamic rendering by rewriting paths to Cloud Functions. You could simply rewrite every path to a Cloud Function which generates a dynamic index.html file based on the domain the request comes from.

Here is the Firebase documentation for rewrites to Cloud Functions:

"hosting": {
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben",
    "region": "us-central1"
  } ]
}

Configuring Firebase Hosting behaviour

Here is another question which has a similar problem: Dynamic rendering with Firebase Functions and Firebase Hosting

You could use a template engine like EJS for generating dynamic HTML files. Your Cloud Function would prepare the HTML file and serve it when it's done. EJS - Embedded JavaScript