Dynamic inclusion of domain name in Firebase hosting

Question

I have an index.html file that is published via the Firebase hosting. I have setup a DEV(elopement) and PROD(uction) app in Firebase console. And successfully linked my own domains to it (https://firebase.google.com/docs/hosting/custom-domain)

This page includes opengraph meta data, and as part the og:url which should point either to the mydomain.dev.com (when published to DEV) or mydomain.prod.com (when published to PROD). I do not want to start duplicating the index.html file (code maintentabiliy) so how can I dynamically insert the correct domain via Firebase Hosting?

<!DOCTYPE html>
<html lang="en">
 <head>    
 <meta charset="utf-8">
 <meta property="og:url" content="mydomain.dev.com or mydomain.prod.com">
 <meta property="og:type" content="website" />  
 <meta property="og:title" content="Some title" />
 <meta property="og:description" content="some description" />      
 <meta property="og:image" content="/assets/img/og.jpg" />
 ...

abraham abraham · Accepted Answer · 2018-09-01T21:44:05

There are two ways you can handle this.

1) Build step before deploy

Have a single index.html template file that contains variables.

<meta property="og:url" content="{{domain}}">

You then use a build tool like gulp or webpack to replace the domain variable with the domain of the particular site you are deploying.

2) Function rendering

This will have a similar index.html template that lives in a Firebase Function. You then map your hosting to be backed by Function which will render the HTML with the correct domain on request.

Dynamic inclusion of domain name in Firebase hosting

1 Answers