Enhance SEO handling and public host resolution for improved metadata accuracy

- Updated .env.example to include SEO_PUBLIC_HOST for better SEO configuration.
- Refactored server.js to utilize a new getPublicHost function for accurate host resolution in metadata generation.
- Improved apiForwardHeaders and handleSeoRoute functions to ensure correct headers are forwarded based on the public host.
- Enhanced seo-core.js to resolve API base URL using the public site host, improving API integration in production environments.
- Adjusted vite-seo-plugin.js to leverage public host for metadata fetching, ensuring consistency across requests.

Author: danbaruka

.env.example

@@ -31,6 +31,8 @@ SITE_NAME=DevCommunity
 NODE_ENV=development
 # Optional explicit API for SEO fetches (overrides VITE_* when not on a production host):
 # SEO_API_URL=https://api.devcommunity.io/api
+# Public hostname for SEO when the Node server sees an internal Host header (Docker/nginx):
+# SEO_PUBLIC_HOST=devcommunity.io
 
 # Production examples (uncomment when deploying):
 # VITE_API_BASE_URL=https://api.devcommunity.io/api

seo/seo-core.js

@@ -70,12 +70,23 @@ function isLocalApiUrl(url) {
     return /localhost|127\.0\.0\.1/i.test(String(url || ''));
 }
 
+function hostFromAppUrl(env = {}) {
+    const candidate = env.SEO_PUBLIC_HOST || env.VITE_APP_URL || env.FRONTEND_URL || '';
+    if (!candidate) return '';
+    try {
+        const parsed = candidate.includes('://') ? new URL(candidate) : new URL(`https://${candidate}`);
+        return parsed.hostname;
+    } catch {
+        return String(candidate).split('/')[0].split(':')[0];
+    }
+}
+
 /**
  * Resolve the API base URL from env (and optionally the request host).
  * When the public site is served on a production domain, always use the
  * matching api.<domain> host — even if VITE_API_BASE_URL points at localhost.
  * @param {object} env  process.env
- * @param {string} [host]  request host header
+ * @param {string} [host]  public site host (x-forwarded-host preferred)
  */
 export function resolveApiBaseUrl(env = {}, host = '') {
     const hostOnly = host ? host.split(':')[0].toLowerCase() : '';
@@ -84,11 +95,22 @@ export function resolveApiBaseUrl(env = {}, host = '') {
         return `https://api.${baseDomain}/api`;
     }
 
+    const appHost = hostFromAppUrl(env);
+    if (isProductionPublicHost(appHost)) {
+        const baseDomain = appHost.replace(/^www\./, '');
+        return `https://api.${baseDomain}/api`;
+    }
+
     const order = [env.SEO_API_URL, env.SEO_API_BASE_URL, env.VITE_API_BASE_URL, env.VITE_API_URL];
     for (const candidate of order) {
         const normalized = normalizeApiBase(candidate);
         if (normalized && !isLocalApiUrl(normalized)) return normalized;
     }
+
+    if (env.NODE_ENV === 'production') {
+        return 'https://api.devcommunity.io/api';
+    }
+
     for (const candidate of order) {
         const normalized = normalizeApiBase(candidate);
         if (normalized) return normalized;

seo/vite-seo-plugin.js

@@ -26,18 +26,23 @@ export function seoDevPlugin(env = {}) {
             const apiBaseUrl = resolveApiBaseUrl(env);
             const siteName = env.VITE_SITE_NAME || env.SITE_NAME || 'DevCommunity';
 
+            const publicHostOf = (req) => {
+                const forwarded = req.headers['x-forwarded-host'];
+                if (forwarded) return String(forwarded).split(',')[0].trim();
+                return req.headers.host || 'localhost';
+            };
             const baseUrlOf = (req) => {
-                const host = req.headers.host || 'localhost';
+                const host = publicHostOf(req);
                 const proto = req.headers['x-forwarded-proto'] || 'http';
                 return `${proto}://${host}`;
             };
             const fwd = (req) => {
-                const h = {};
-                if (req.headers.host) {
-                    h['x-forwarded-host'] = req.headers.host;
-                    h['x-forwarded-proto'] = req.headers['x-forwarded-proto'] || 'http';
-                }
-                return h;
+                const host = publicHostOf(req);
+                if (!host) return {};
+                return {
+                    'x-forwarded-host': host,
+                    'x-forwarded-proto': req.headers['x-forwarded-proto'] || 'http',
+                };
             };
 
             server.middlewares.use(async (req, res, next) => {
@@ -69,12 +74,18 @@ export function seoDevPlugin(env = {}) {
                         // Apply Vite's HTML transforms so the SPA still boots (HMR, @vite/client …)
                         template = await server.transformIndexHtml(req.url, template, req.originalUrl);
 
-                        const metadata = await fetchSeoMetadata({ apiBaseUrl, type, identifier, headers: fwd(req) });
+                        const publicHost = publicHostOf(req);
+                        const metadata = await fetchSeoMetadata({
+                            apiBaseUrl: resolveApiBaseUrl(env, publicHost) || apiBaseUrl,
+                            type,
+                            identifier,
+                            headers: fwd(req),
+                        });
                         const baseUrl = baseUrlOf(req);
                         const html = injectMetaTags(
                             template,
                             metadata || getFallbackMetadata({ baseUrl, siteName, currentPath: pathname }),
-                            { baseUrl, currentPath: pathname, host: req.headers.host }
+                            { baseUrl, currentPath: pathname, host: publicHost }
                         );
                         res.setHeader('Content-Type', 'text/html; charset=utf-8');
                         return res.end(html);

server.js

@@ -55,23 +55,35 @@ app.set('trust proxy', true);
 
 const SITE_NAME = process.env.SITE_NAME || process.env.VITE_SITE_NAME || 'DevCommunity';
 
+/** Public site hostname — prefer proxy headers over internal bind address. */
+function getPublicHost(req) {
+    const forwarded = req.get('x-forwarded-host');
+    if (forwarded) return forwarded.split(',')[0].trim();
+    return req.get('host') || '';
+}
+
 /** Base URL of the public site, from the incoming request. */
 function getBaseUrl(req) {
-    const protocol = req.protocol || (req.secure ? 'https' : 'http');
-    const host = req.get('host') || `localhost:${PORT}`;
+    const host = getPublicHost(req) || `localhost:${PORT}`;
+    const protocol =
+        req.get('x-forwarded-proto') ||
+        req.protocol ||
+        (req.secure ? 'https' : 'http');
     return `${protocol}://${host}`;
 }
 
 /** Headers forwarded to the API so it builds URLs with the public host. */
 function apiForwardHeaders(req) {
-    const headers = {};
-    const host = req.get('host');
-    const proto = req.protocol || (req.secure ? 'https' : 'http');
-    if (host) {
-        headers['x-forwarded-host'] = host;
-        headers['x-forwarded-proto'] = proto;
-    }
-    return headers;
+    const host = getPublicHost(req);
+    const proto =
+        req.get('x-forwarded-proto') ||
+        req.protocol ||
+        (req.secure ? 'https' : 'http');
+    if (!host) return {};
+    return {
+        'x-forwarded-host': host,
+        'x-forwarded-proto': proto,
+    };
 }
 
 function readDistIndex() {
@@ -102,12 +114,13 @@ async function handleSeoRoute(req, res, type) {
     }
 
     try {
-        const apiBaseUrl = resolveApiBaseUrl(process.env, req.get('host')) || DEFAULT_API_BASE_URL;
+        const publicHost = getPublicHost(req);
+        const apiBaseUrl = resolveApiBaseUrl(process.env, publicHost) || DEFAULT_API_BASE_URL;
         const metadata = await fetchSeoMetadata({
             apiBaseUrl, type, identifier, headers: apiForwardHeaders(req),
         });
 
-        const ctx = { baseUrl: getBaseUrl(req), currentPath: req.originalUrl || req.url || '', host: req.get('host') };
+        const ctx = { baseUrl: getBaseUrl(req), currentPath: req.originalUrl || req.url || '', host: publicHost };
         html = injectMetaTags(
             html,
             metadata || getFallbackMetadata({ baseUrl: ctx.baseUrl, siteName: SITE_NAME, currentPath: ctx.currentPath }),
@@ -119,7 +132,7 @@ async function handleSeoRoute(req, res, type) {
         res.setHeader('X-Content-Type-Options', 'nosniff');
         return res.send(html);
     } catch {
-        const ctx = { baseUrl: getBaseUrl(req), currentPath: req.originalUrl || '', host: req.get('host') };
+        const ctx = { baseUrl: getBaseUrl(req), currentPath: req.originalUrl || '', host: getPublicHost(req) };
         const fallback = getFallbackMetadata({ baseUrl: ctx.baseUrl, siteName: SITE_NAME, currentPath: ctx.currentPath });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
         res.setHeader('Cache-Control', 'public, max-age=300');