easy-starter 1.2.1 → 2.1.0

package/template/src/services/api.ts

@@ -1,8 +1,11 @@
 import { useEffect } from "react";
 import { sendError } from "easy-analytics/client";
 import { setServerUrl, getUseAPIFrontend, getAPIFrontend, setHeaders } from "typed-client-server-api/hooks";
+
+// --- SSR START ---
 import { useSSRHook } from "ssr-hook/client";
 import { setSSROrigin } from "ssr-hook";
+// --- SSR END ---
 
 import { API } from "../../types";
 
@@ -14,13 +17,6 @@ export type UseSSRAPIType = {
 };
 
 
-if (process.env.NODE_ENV === "development") {
-    // In development mode, the frontend (Parcel) and backend (Express) run on different ports.
-    // We explicitly tell ssr-hook where the API backend is located.
-    setSSROrigin("http://localhost:1111");
-    setServerUrl("http://localhost:1111");
-}
-
 let authorization = "";
 
 setHeaders(() => ({
@@ -34,6 +30,7 @@ export function setAuthorizationHeader(newAuthorization: string) {
 
 export const api = getAPIFrontend<API>();
 export const useApi = getUseAPIFrontend<API>();
+// --- SSR START ---
 export const useSSRApi = new Proxy({}, {
     get(target, prop: string) {
         return (params: any) => {
@@ -42,6 +39,7 @@ export const useSSRApi = new Proxy({}, {
         };
     }
 }) as UseSSRAPIType;
+// --- SSR END ---
 
 export function handleError(error?: unknown, errorInfo?: any) {
     if (!error) return;

package/template/src/services/common.ts

@@ -1,6 +1,12 @@
+// --- SSR START ---
 import { useHeaders } from "ssr-hook";
+// --- SSR END ---
 import { useTitle } from "easy-page-router/react";
 
+// --- NO_SSR START ---
+import { useEffect } from "react";
+// --- NO_SSR END ---
+
 type UseHeadProps = {
     title: string;
     description: string;
@@ -10,12 +16,39 @@ type UseHeadProps = {
 };
 
 export function useHead({ title, description, image, canonical, lang }: UseHeadProps) {
+    // --- OGIMAGE START ---
+    const defaultOgImage = typeof window !== "undefined"
+        ? `${window.location.origin}/og-image.png?path=${encodeURIComponent(window.location.pathname)}`
+        : "/og-image.png";
+    const resolvedImage = image || defaultOgImage;
+    // --- OGIMAGE END ---
+    /* --- NO_OGIMAGE START --- */
+    const resolvedImage = image || "/images/icon.png";
+    /* --- NO_OGIMAGE END --- */
+
+    // --- SSR START ---
     useHeaders({
         title,
         description,
-        image: image || `/images/icon.png`, // Images must be placed in the public directory to be accessible
+        image: resolvedImage,
         canonical: canonical || (typeof window !== "undefined" ? window.location.origin + window.location.pathname : ""),
         lang,
     });
+    // --- SSR END ---
+    // --- NO_SSR START ---
+    useEffect(() => {
+        if (typeof document !== "undefined") {
+            const metaDesc = document.querySelector('meta[name="description"]');
+            if (metaDesc) {
+                metaDesc.setAttribute("content", description);
+            } else {
+                const meta = document.createElement("meta");
+                meta.name = "description";
+                meta.content = description;
+                document.head.appendChild(meta);
+            }
+        }
+    }, [description]);
+    // --- NO_SSR END ---
     useTitle(title);
 }