SSR

.env

@@ -5,3 +5,4 @@ UID=100
 GID=101
 RELEASE_ORG_SLUG=webmakers-gmbh
 RELEASE_PROJECT_SLUG=allkids_erfurt
+START_SCRIPT=:ssr

api/hooks/config.js

@@ -6,13 +6,10 @@ module.exports = {
         // / is de home
         if (path == "/") return 1
 
-        // all other sites are in db
-        path = path?.replace(/^\//, "")
-
         // filter for path or alternativePaths
         const resp = context.db.find("content", {
             filter: {
-                $or: [{ path }, { "alternativePaths.path": path }],
+                $or: [{ path }],
             },
             selector: { _id: 1 },
         })

api/hooks/ssr/get_read.js

@@ -71,6 +71,7 @@ const { obj2str, log } = require("../lib/utils")
             html = "<!-- NO SSR RENDERING -->"
         } else if (pNotfound) {
             status = 404
+            console.log("IS 404")
             html = "404 NOT FOUND"
         } else {
             // try rendering, if error output plain html
@@ -137,6 +138,7 @@ const { obj2str, log } = require("../lib/utils")
                 // @ts-ignore
                 if (context.is404) {
                     status = 404
+                    console.log("IS 404")
                 } else {
                     cacheIt = true
                 }
@@ -154,7 +156,7 @@ const { obj2str, log } = require("../lib/utils")
         tpl = tpl.replace("<!--HTML-->", html)
         tpl = tpl.replace("<!--SSR.ERROR-->", error ? "<!--" + error + "-->" : "")
         tpl = tpl.replace("<!--SSR.COMMENT-->", comment ? "<!--" + comment + "-->" : "")
-
+        console.log("CACHE", cacheIt, noCache)
         // save cache if adviced
         if (cacheIt && !noCache) {
             context.db.create("ssr", {

docker-compose-local.yml

@@ -30,7 +30,7 @@ services:
             - ./tmp/nonexistent:/nonexistent
             - ./tmp/.npm:/.npm
         working_dir: /data
-        command: sh -c "yarn install && API_BASE=http://tibiserver:8080/api/v1/_/${TIBI_NAMESPACE} yarn start"
+        command: sh -c "yarn install && API_BASE=http://tibiserver:8080/api/v1/_/${TIBI_NAMESPACE} yarn start${START_SCRIPT}"
         expose:
             - 3000
         labels:

esbuild.config.js

@@ -83,7 +83,7 @@ if (process.argv[2] == "start") {
     )
 
     // if SSR env variable is set
-    console.log(process.env)
+    console.log(process.env, "=========================ENV")
     if (process.env.SSR) {
         // read api/config.yml.env and read SSR_TOKEN variable from it
         const configEnv = fs.readFileSync(__dirname + "/api/config.yml.env", "utf8")

frontend/.htaccess

@@ -1,6 +1,7 @@
 AddType application/javascript .mjs
 
 #DirectoryIndex spa.html
+# notwendig, da sonst über normale url spa.html aufgerufen wird, muss nur datei name sei, der nicht existiert
 DirectoryIndex noindex
 
 <ifModule mod_rewrite.c>
@@ -11,6 +12,8 @@ DirectoryIndex noindex
 
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
+    # leitet initale request an backend und nicht an spa.html weiter
     RewriteRule ^/?(.*)$ http://tibi-server:8080/api/v1/_/allkids_erfurt/ssr?token=owshwerNwoa&url=/$1 [P,QSA,L]
+    # standardmäßig wegen deeplink aus google notwendig, da sonst 404
     #RewriteRule (.*) /spa.html [QSA,L]
 </ifModule>

frontend/src/App.svelte

@@ -64,34 +64,50 @@
     })
 
     let cookiesAllowed = false
-    window.addEventListener("ccAccept", (e) => {
-        // @ts-ignore test
-        if (e.detail[1] == cookieName) cookiesAllowed = true
-    })
-    //isCookieSet isnt really precise
-    function checkCookie(cookieName: string) {
-        // Get all cookies
-        var allCookies = decodeURIComponent(document.cookie)
-        // Split into individual cookies
-        var cookies = allCookies.split(";")
-        var ccTagCookies: string[] = []
-        cookies.forEach((e) => {
-            e.includes("ccTags") ? (ccTagCookies = e.split(",")) : void 0
+    if (typeof window !== "undefined") {
+        window.addEventListener("ccAccept", (e) => {
+            // @ts-ignore test
+            if (e.detail[1] == cookieName) cookiesAllowed = true
         })
-        for (var i = 0; i < ccTagCookies.length; i++) {
-            var c = ccTagCookies[i]
-            // Trim whitespace
-            while (c.charAt(0) == " ") c = c.substring(1)
-            // If the cookie's name matches the given name
-            if (c == cookieName) return true
+        //isCookieSet isnt really precise
+        function checkCookie(cookieName: string) {
+            // Get all cookies
+            var allCookies = decodeURIComponent(document.cookie)
+            // Split into individual cookies
+            var cookies = allCookies.split(";")
+            var ccTagCookies: string[] = []
+            cookies.forEach((e) => {
+                e.includes("ccTags") ? (ccTagCookies = e.split(",")) : void 0
+            })
+            for (var i = 0; i < ccTagCookies.length; i++) {
+                var c = ccTagCookies[i]
+                // Trim whitespace
+                while (c.charAt(0) == " ") c = c.substring(1)
+                // If the cookie's name matches the given name
+                if (c == cookieName) return true
+            }
+            return false
         }
-        return false
+        cookiesAllowed = checkCookie("googleAnalytics")
     }
-    cookiesAllowed = checkCookie("googleAnalytics")
 </script>
 
 <svelte:head>
     {#if cookiesAllowed}
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
+        <!-- Google tag (gtag.js) -->
         <!-- Google tag (gtag.js) -->
         <!-- Google tag (gtag.js) -->
         <!-- Google tag (gtag.js) -->

frontend/src/lib/components/cookieSet.svelte

@@ -9,11 +9,12 @@
         mitte: "center",
         unten: "flex-end",
     }
-
-    window.addEventListener("ccAccept", (e) => {
-        // @ts-ignore
-        if (e.detail[1] == cookieName) contentShown = true
-    })
+    if (typeof window !== "undefined") {
+        window.addEventListener("ccAccept", (e) => {
+            // @ts-ignore
+            if (e.detail[1] == cookieName) contentShown = true
+        })
+    }
     //isCookieSet isnt really precise
     function checkCookie(cookieName: string) {
         // Get all cookies

frontend/src/lib/components/header/Header.svelte

@@ -29,15 +29,16 @@
         // Initial check
         checkHomePage()
         checkScroll()
+        if (typeof window !== "undefined") {
+            // Listen for changes
+            window.addEventListener("scroll", checkScroll)
+            window.addEventListener("popstate", checkHomePage)
 
-        // Listen for changes
-        window.addEventListener("scroll", checkScroll)
-        window.addEventListener("popstate", checkHomePage)
-
-        return () => {
-            // Cleanup event listeners
-            window.removeEventListener("scroll", checkScroll)
-            window.removeEventListener("popstate", checkHomePage)
+            return () => {
+                // Cleanup event listeners
+                window.removeEventListener("scroll", checkScroll)
+                window.removeEventListener("popstate", checkHomePage)
+            }
         }
     })
     let show = false

frontend/src/lib/components/header/desktop.svelte

@@ -8,7 +8,6 @@
     function changeStateOfSite(menuOn: boolean) {
         let siteContainer = document.body
         show = menuOn
-        console.log("TEST")
         if (menuOn) siteContainer.style.overflow = "hidden"
         else siteContainer.style.overflow = "initial"
     }
@@ -59,8 +58,9 @@
             textElement.style.letterSpacing = `${letterSpacing}px`
         }*/
     }
-
-    window.addEventListener("resize", stretchText)
+    if (typeof window !== "undefined") {
+        window.addEventListener("resize", stretchText)
+    }
     onMount(stretchText)
 </script>
 
@@ -186,7 +186,7 @@
                             <div class="submenu-img">
                                 <img
                                     src="{`${apiBaseURL}navigation/${$navigation?.id}/${submenu.image?.src}?filter=${
-                                        window.innerWidth > 500 ? 'xl' : 'm'
+                                        window?.innerWidth > 500 ? 'xl' : 'm'
                                     }`}"
                                     alt="img"
                                 />

frontend/src/lib/components/header/mobile.svelte

@@ -30,13 +30,15 @@
     function imageSlide(images: HTMLImageElement[]) {
         let currentImage = 0
         images[0].classList.add("show-img")
-        let interval = setInterval(() => {
-            images[currentImage].classList.remove("show-img")
-            currentImage += 1
-            if (images.length == currentImage) currentImage = 0
-            images[currentImage].classList.add("show-img")
-        }, 4000)
-        return () => clearInterval(interval)
+        if (typeof window !== "undefined") {
+            let interval = setInterval(() => {
+                images[currentImage].classList.remove("show-img")
+                currentImage += 1
+                if (images.length == currentImage) currentImage = 0
+                images[currentImage].classList.add("show-img")
+            }, 4000)
+            return () => clearInterval(interval)
+        }
     }
 
     function pushImages(node: HTMLImageElement) {
@@ -44,11 +46,14 @@
     }
 
     $: {
-        const images = Array.from(document.getElementsByClassName("img-menu")) as HTMLImageElement[]
-        if (images.length !== 0) {
-            imageSlide(images)
+        if (typeof window !== "undefined") {
+            const images = Array.from(document.getElementsByClassName("img-menu")) as HTMLImageElement[]
+            if (images.length !== 0) {
+                imageSlide(images)
+            }
         }
     }
+
     function stretchText() {
         let container = document.getElementById("logo-container")
         let textElement = document.getElementById("upper")
@@ -83,9 +88,10 @@
             textElement.style.letterSpacing = `${newLetterSpacing}px`
         }
     }
-
-    window.addEventListener("resize", stretchText)
-    onMount(stretchText)
+    if (typeof window !== "undefined") {
+        window.addEventListener("resize", stretchText)
+        onMount(stretchText)
+    }
 </script>
 
 <ul>
@@ -111,7 +117,7 @@
         <button
             class="button-three"
             on:click="{(e) => {
-                let element = document.getElementById('menu')
+                let element = document?.getElementById('menu')
                 if (element) changeStateOfSite(element.classList.contains('show-menu'))
             }}"
             aria-controls="primary-navigation"
@@ -210,7 +216,7 @@
                                     <img
                                         use:pushImages
                                         src="{`${apiBaseURL}navigation/${$navigation.id}/${imgSrc}?filter=${
-                                            window.innerWidth > 500 ? 'xl' : 'm'
+                                            window?.innerWidth > 500 ? 'xl' : 'm'
                                         }`}"
                                         alt="img"
                                         class="img img-menu"

frontend/src/lib/components/pagebuilder/Homepage.svelte

@@ -31,13 +31,16 @@
                 firstSlideH1.classList.add("active")
             }
         }
-        const el = document.getElementById("HP")
-        let heightOfEl = el?.clientHeight
-        const hp = document.getElementById("Homepage")
-        const homepage_placeholder = document.getElementById("homepage-placeholder")
-        if (hp && window.innerHeight < 600) {
-            hp.style.minHeight = (heightOfEl || window.innerHeight) + 200 + "px"
-            homepage_placeholder.style.minHeight = (heightOfEl || window.innerHeight) + 350 + "px"
+        if (typeof window !== "undefined") {
+            const el = document.getElementById("HP")
+            let heightOfEl = el?.clientHeight
+            const hp = document.getElementById("Homepage")
+            const homepage_placeholder = document.getElementById("homepage-placeholder")
+
+            if (hp && window.innerHeight < 600) {
+                hp.style.minHeight = (heightOfEl || window.innerHeight) + 200 + "px"
+                homepage_placeholder.style.minHeight = (heightOfEl || window.innerHeight) + 350 + "px"
+            }
         }
     })
 

frontend/src/lib/components/pagebuilder/banner.svelte

@@ -13,11 +13,13 @@
     }
 
     onMount(() => {
-        interval = setInterval(() => {
-            currentIndex = (currentIndex + 1) % $banner.length
-        }, 7000)
+        if (typeof window !== "undefined") {
+            interval = setInterval(() => {
+                currentIndex = (currentIndex + 1) % $banner.length
+            }, 7000)
 
-        return () => clearInterval(interval)
+            return () => clearInterval(interval)
+        }
     })
 </script>
 

frontend/src/lib/components/pagebuilder/form/Formular.svelte

@@ -71,20 +71,22 @@
             sendForm(formObj)
         }
     }
-    let innerWidth = window.innerWidth
 
-    onMount(() => {
-        const handleResize = () => {
-            innerWidth = window.innerWidth
-        }
+    let innerWidth = window?.innerWidth || 0
+    if (typeof window !== "undefined") {
+        onMount(() => {
+            const handleResize = () => {
+                innerWidth = window.innerWidth
+            }
 
-        window.addEventListener("resize", handleResize)
+            window.addEventListener("resize", handleResize)
 
-        // Cleanup function
-        return () => {
-            window.removeEventListener("resize", handleResize)
-        }
-    })
+            // Cleanup function
+            return () => {
+                window.removeEventListener("resize", handleResize)
+            }
+        })
+    }
 </script>
 
 {#if formSend}

frontend/src/lib/components/pagebuilder/form/select.svelte

@@ -47,13 +47,15 @@
     }
 
     onMount(() => {
-        const inputEl = document.querySelector(".svelte-select input")
-        if (inputEl) {
-            inputEl.addEventListener("input", handleInputChange)
-        }
-        return () => {
+        if (typeof window !== "undefined") {
+            const inputEl = document.querySelector(".svelte-select input")
             if (inputEl) {
-                inputEl.removeEventListener("input", handleInputChange)
+                inputEl.addEventListener("input", handleInputChange)
+            }
+            return () => {
+                if (inputEl) {
+                    inputEl.removeEventListener("input", handleInputChange)
+                }
             }
         }
     })

frontend/src/lib/components/pagebuilder/image.svelte

@@ -50,7 +50,7 @@
                     <div class="image-container">
                         <img
                             src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
-                                window.innerWidth > 500 ? 'xl' : 'm'
+                                window?.innerWidth > 500 ? 'xl' : 'm'
                             }`}"
                             alt="Bild"
                         />
@@ -62,7 +62,7 @@
 {:else if image}
     <div class="image-container single flex">
         <img
-            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${window.innerWidth > 500 ? 'xl' : 'm'}`}"
+            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${window?.innerWidth > 500 ? 'xl' : 'm'}`}"
             alt="Bild"
         />
     </div>

frontend/src/lib/components/pagebuilder/infoBoard.svelte

@@ -22,7 +22,7 @@
         <div class="img-container">
             <img
                 src="{`${apiBaseURL}content/${siteId}/${col.image?.src}?filter=${
-                    window.innerWidth > 500 ? 'xl' : 'm'
+                    window?.innerWidth > 500 ? 'xl' : 'm'
                 }`}"
                 alt="img"
             />

frontend/src/lib/components/pagebuilder/mainPicture.svelte

@@ -9,7 +9,7 @@
     <div class="imgContainer">
         <img
             src="{`${apiBaseURL}content/${siteId}/${col.mainPicture?.src}?filter=${
-                window.innerWidth > 500 ? 'xl' : 'm'
+                window?.innerWidth > 500 ? 'xl' : 'm'
             }`}"
             alt="img"
         />

frontend/src/lib/components/pagebuilder/productPreview.svelte

@@ -48,7 +48,7 @@
                     <div class="img-container">
                         <img
                             src="{`${apiBaseURL}content/${siteId}/${product.image?.src}?filter=${
-                                window.innerWidth > 500 ? 'xl' : 'm'
+                                window?.innerWidth > 500 ? 'xl' : 'm'
                             }`}"
                             alt="img"
                         />

frontend/src/lib/components/pagebuilder/scrollDown.svelte

@@ -13,22 +13,25 @@
         // Jump down by 100vh
         window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
     }
+    if (typeof window !== "undefined") {
+        onMount(() => {
+            // Attach scroll event listener when component is mounted
+            window.addEventListener("scroll", checkScroll)
+        })
 
-    onMount(() => {
-        // Attach scroll event listener when component is mounted
-        window.addEventListener("scroll", checkScroll)
-    })
-
-    onDestroy(() => {
-        // Remove scroll event listener when component is destroyed
-        window.removeEventListener("scroll", checkScroll)
-    })
+        onDestroy(() => {
+            // Remove scroll event listener when component is destroyed
+            window.removeEventListener("scroll", checkScroll)
+        })
+    }
     let force = true
-    setInterval(() => {
-        if (location.pathname != "/") {
-            force = false
-        } else force = true
-    }, 1000)
+    if (typeof window !== "undefined") {
+        setInterval(() => {
+            if (location.pathname != "/") {
+                force = false
+            } else force = true
+        }, 1000)
+    }
     $: {
         /* if ($rerender) {
             if (location.pathname != "/") {

frontend/src/lib/components/pagebuilder/scrollTop.svelte

@@ -12,16 +12,17 @@
         // Scroll smoothly to the top
         window.scrollTo({ top: 0, behavior: "smooth" })
     }
+    if (typeof window !== "undefined") {
+        onMount(() => {
+            // Attach scroll event listener when component is mounted
+            window.addEventListener("scroll", checkScroll)
+        })
 
-    onMount(() => {
-        // Attach scroll event listener when component is mounted
-        window.addEventListener("scroll", checkScroll)
-    })
-
-    onDestroy(() => {
-        // Remove scroll event listener when component is destroyed
-        window.removeEventListener("scroll", checkScroll)
-    })
+        onDestroy(() => {
+            // Remove scroll event listener when component is destroyed
+            window.removeEventListener("scroll", checkScroll)
+        })
+    }
 </script>
 
 {#if showButton}

frontend/src/lib/components/pagebuilder/teaser.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <main class="teaser">
-    {#if index % 2 == 0 || window.innerWidth < 1023}
+    {#if index % 2 == 0 || window?.innerWidth < 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
     <div class="content">
@@ -14,7 +14,7 @@
         <p>{site?.teaserDescription}</p>
         <button on:click="{() => navigate(site.path)}">MEHR</button>
     </div>
-    {#if index % 2 == 1 && window.innerWidth > 1023}
+    {#if index % 2 == 1 && window?.innerWidth > 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
 </main>

frontend/src/routes/NotFound.svelte

@@ -1,5 +1,10 @@
 <script>
     import { navigate } from "svelte-routing"
+        // set 404 for ssr
+    if (typeof window === "undefined") {
+        // @ts-ignore
+        if (context) context.is404 = true
+    }
 </script>
 
 <svelte:head>

package.json

@@ -9,8 +9,10 @@
     "scripts": {
         "validate": "svelte-check && tsc --noEmit",
         "dev": "node scripts/esbuild-wrapper.js watch",
-        "start": "NAMESPACE=renz_shop node scripts/esbuild-wrapper.js start",
+        "start": "node scripts/esbuild-wrapper.js start",
+        "start:ssr": "SSR=1 node scripts/esbuild-wrapper.js start",
         "build": "node scripts/esbuild-wrapper.js build",
+        "build:admin": "node scripts/esbuild-wrapper.js build esbuild.config.admin.js",
         "build:legacy": "node scripts/esbuild-wrapper.js build esbuild.config.legacy.js && babel _temp/index.js -o _temp/index.babeled.js && esbuild _temp/index.babeled.js --outfile=frontend/dist/index.es5.js --target=es5 --bundle --minify --sourcemap",
         "build:server": "node scripts/esbuild-wrapper.js build esbuild.config.server.js && babel _temp/app.server.js -o _temp/app.server.babeled.js && esbuild _temp/app.server.babeled.js --outfile=api/hooks/lib/app.server.js --target=es5 --bundle --sourcemap --platform=node",
         "build:test": "node scripts/esbuild-wrapper.js build esbuild.config.test.js && babel --config-file ./babel.config.test.json _temp/hook.test.js -o _temp/hook.test.babeled.js && esbuild _temp/hook.test.babeled.js --outfile=api/hooks/lib/hook.test.js --target=es5 --bundle --sourcemap --platform=node",