CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-functionsfirebase-hosting
Vipul Limbachiya
Vipul Limbachiya

Reputation: 131

Firebase rewrite path to function not working

I want to add dynamic meta tags to index.html, the app is created with create-react-app and hosted on firebase hosting. I referred to the post here: https://medium.com/@jalalio/dynamic-og-tags-in-your-statically-firebase-hosted-polymer-app-476f18428b8b

I have created a new cloud function:

const fs = require('fs');
const functions = require('firebase-functions');

exports.host = functions.https.onRequest((req, res) => {
 const userAgent = req.headers['user-agent'].toLowerCase();
 let indexHTML = fs.readFileSync('./hosting/index.html').toString();
 const path = req.path ? req.path.split('/') : req.path;
 const ogPlaceholder = '<meta name="functions-insert-dynamic-meta">';
 indexHTML = indexHTML.replace(ogPlaceholder, getOpenGraph());
 console.log(indexHTML);
 res.status(200).send(indexHTML);
});

const defaultDesc = 'Test Desc';
const defaultTitle = 'Test Title';
const defaultLogo = 'http://test-domain.com/logo.png';

const getOpenGraph = () => {
 let og = `<meta property="fb:app_id" content="123123123" />`;
 og += `<meta property="og:type" content="website" />`;
 og += `<meta property="og:title" content="${defaultTitle}" />`;
 og += `<meta property="og:description" content="${defaultDesc}" />`;
 og += `<meta property="og:image" content="${defaultLogo}" />`;
 og += `<meta property="og:url" content="https://gifmos-frontend-beta.firebaseapp.com/" />`;
 return og;
};

and changed rewrite rules as:

{
 "hosting": {
 "public": "build",
 "ignore": [
 "firebase.json",
 "**/.*",
 "**/node_modules/**"
 ],
 "rewrites": [
 {
 "source": "**",
 "function": "host"
 }
 ]
 }
}

Now the expected result is when we hit: https://my-app-4b3d0.firebaseapp.com/ the HTML should have replaced with dynamic meta tags from the function written above. But it does not seem to be working. Calling a cloud function returns value as expected: https://us-central1-my-app-4b3d0.cloudfunctions.net/host but we need this to work for "index.html" file call, so we can add dynamic OG tags based on page asked.

Upvotes: 4

Views: 2776

Answers (1)

SkrewEverything
SkrewEverything

Reputation: 2523

If you have a static index.html in your public directory, just delete it.

Still if you don't see your custom page, try to hard reload and empty cache in the browser(in chrome).

Firebase uses index.html if there is any in your public directory and ignores your function in the respective path/url.

Upvotes: 5

Related Questions