Pretty much as the title says.
But the file is definitely there:
So I am stumped :(
I'm following this: https://almog.io/blog/dynamic-open-graph-meta-tags-flutter-web to set up dynamic open graph meta tags, the function as below:
const functions = require("firebase-functions");
const fs = require("fs");
const admin = require("firebase-admin");
const BotDetector = require("device-detector-js/dist/parsers/bot");
const DEBUG_BOT = false;
admin.initializeApp();
// Main firebase function called on firebase.json rewrites rules
exports.dynamicMetaTagsUpdate = functions.https.onRequest(async (request, response) => {
// console.log("dynamicMetaTagsUpdate Called");
let html = fs.readFileSync("build/web/index.html", "utf8");
const {id} = request.query;
const botDetector = new BotDetector();
const userAgent = request.headers["user-agent"].toString();
const bot = botDetector.parse(userAgent);
const url = "https://voiceofrenewables.com/post/"+ id;
// If bot get chat data from Firebase database
if (bot || DEBUG_BOT) {
try {
// console.log("running try");
const ref = admin.database().ref("Posts");
const chartData = ref.child(id).get().then((snapshot) => {
if (snapshot.exists()) {
const object = {title: snapshot.child("title").val(), description: snapshot.child("title").val(), imageUrl: snapshot.child("imageUrl").val()};
return object;
} else {
console.log("No data available");
}
}).catch((error) => {
console.error(error);
});
const htmlData = await chartData;
// HTML to return with updated open graph meta tags
html = `
<!doctype html>
<html lang="en">
<head>
<title>"The Voice of Renewables"</title>
<meta name="description" content="${htmlData.description}">
<meta name="title" content="${htmlData.title}">
<meta property="og:title" content="${htmlData.title}" />
<meta property="og:description" content="${htmlData.description}" />
<meta property="og:image" content="${htmlData.imageUrl}" />
<meta property="og:image:secure" content="${htmlData.imageUrl}" />
<meta property="og:url" content="${url}" />
</head>
<body>
<h1>The Voice of Renewables</h1>
<h2>${htmlData.title}</h2>
<p>${htmlData.description}</p>
<img src="${htmlData.imageUrl}" />
</body>
</html>
`;
return response.send(html);
} catch (e) {
console.log(e);
return response.send(html);
}
}
return response.send(html);
});
and then in firebase.json
"rewrites": [
{
"source": "post/**",
"function": "dynamicMetaTagsUpdate"
},
{
"source": "**",
"destination": "/index.html"
}
]
I have tried using both the index.html from the build/web folder and the web folder itself, neither are working, neither using relative or absolute route. I'm utterly stuck now. Please help :)