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,6 +64,7 @@
     })
 
     let cookiesAllowed = false
+    if (typeof window !== "undefined") {
         window.addEventListener("ccAccept", (e) => {
             // @ts-ignore test
             if (e.detail[1] == cookieName) cookiesAllowed = true
@@ -88,10 +89,25 @@
             return false
         }
         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",
     }
-
+    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,7 +29,7 @@
         // Initial check
         checkHomePage()
         checkScroll()
-
+        if (typeof window !== "undefined") {
             // Listen for changes
             window.addEventListener("scroll", checkScroll)
             window.addEventListener("popstate", checkHomePage)
@@ -39,6 +39,7 @@
                 window.removeEventListener("scroll", checkScroll)
                 window.removeEventListener("popstate", checkHomePage)
             }
+        }
     })
     let show = false
     $: console.log(show)

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`
         }*/
     }
-
+    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,6 +30,7 @@
     function imageSlide(images: HTMLImageElement[]) {
         let currentImage = 0
         images[0].classList.add("show-img")
+        if (typeof window !== "undefined") {
             let interval = setInterval(() => {
                 images[currentImage].classList.remove("show-img")
                 currentImage += 1
@@ -38,17 +39,21 @@
             }, 4000)
             return () => clearInterval(interval)
         }
+    }
 
     function pushImages(node: HTMLImageElement) {
         images[0] = node
     }
 
     $: {
+        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`
         }
     }
-
+    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,14 +31,17 @@
                 firstSlideH1.classList.add("active")
             }
         }
+        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"
             }
+        }
     })
 
     function handleSlideChange() {

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

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

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

@@ -71,8 +71,9 @@
             sendForm(formObj)
         }
     }
-    let innerWidth = window.innerWidth
 
+    let innerWidth = window?.innerWidth || 0
+    if (typeof window !== "undefined") {
         onMount(() => {
             const handleResize = () => {
                 innerWidth = window.innerWidth
@@ -85,6 +86,7 @@
                 window.removeEventListener("resize", handleResize)
             }
         })
+    }
 </script>
 
 {#if formSend}

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

@@ -47,6 +47,7 @@
     }
 
     onMount(() => {
+        if (typeof window !== "undefined") {
             const inputEl = document.querySelector(".svelte-select input")
             if (inputEl) {
                 inputEl.addEventListener("input", handleInputChange)
@@ -56,6 +57,7 @@
                     inputEl.removeEventListener("input", handleInputChange)
                 }
             }
+        }
     })
     $: if (!valueStorage) {
         valueStorage = []

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,7 +13,7 @@
         // 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)
@@ -23,12 +23,15 @@
             // Remove scroll event listener when component is destroyed
             window.removeEventListener("scroll", checkScroll)
         })
+    }
     let force = true
+    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,7 +12,7 @@
         // 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)
@@ -22,6 +22,7 @@
             // 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",