From d3b36a6716461670f93d3e5ba472f0d67fb46504 Mon Sep 17 00:00:00 2001 From: robin Date: Wed, 6 Dec 2023 20:11:49 +0000 Subject: [PATCH] SSR --- .env | 1 + api/hooks/config.js | 5 +- api/hooks/ssr/get_read.js | 4 +- docker-compose-local.yml | 2 +- esbuild.config.js | 2 +- frontend/.htaccess | 3 + frontend/src/App.svelte | 58 ++++++++++++------- frontend/src/lib/components/cookieSet.svelte | 11 ++-- .../src/lib/components/header/Header.svelte | 17 +++--- .../src/lib/components/header/desktop.svelte | 8 +-- .../src/lib/components/header/mobile.svelte | 36 +++++++----- .../components/pagebuilder/Homepage.svelte | 17 +++--- .../lib/components/pagebuilder/banner.svelte | 10 ++-- .../pagebuilder/form/Formular.svelte | 24 ++++---- .../components/pagebuilder/form/select.svelte | 14 +++-- .../lib/components/pagebuilder/image.svelte | 4 +- .../components/pagebuilder/infoBoard.svelte | 2 +- .../components/pagebuilder/mainPicture.svelte | 2 +- .../pagebuilder/productPreview.svelte | 2 +- .../components/pagebuilder/scrollDown.svelte | 31 +++++----- .../components/pagebuilder/scrollTop.svelte | 19 +++--- .../lib/components/pagebuilder/teaser.svelte | 4 +- frontend/src/routes/NotFound.svelte | 5 ++ package.json | 4 +- 24 files changed, 166 insertions(+), 119 deletions(-) diff --git a/.env b/.env index 7e5f200..834d176 100644 --- a/.env +++ b/.env @@ -5,3 +5,4 @@ UID=100 GID=101 RELEASE_ORG_SLUG=webmakers-gmbh RELEASE_PROJECT_SLUG=allkids_erfurt +START_SCRIPT=:ssr \ No newline at end of file diff --git a/api/hooks/config.js b/api/hooks/config.js index 50301c9..86fa44d 100644 --- a/api/hooks/config.js +++ b/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 }, }) diff --git a/api/hooks/ssr/get_read.js b/api/hooks/ssr/get_read.js index 0899f03..13c78cc 100644 --- a/api/hooks/ssr/get_read.js +++ b/api/hooks/ssr/get_read.js @@ -71,6 +71,7 @@ const { obj2str, log } = require("../lib/utils") html = "" } 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) tpl = tpl.replace("", error ? "" : "") tpl = tpl.replace("", comment ? "" : "") - + console.log("CACHE", cacheIt, noCache) // save cache if adviced if (cacheIt && !noCache) { context.db.create("ssr", { diff --git a/docker-compose-local.yml b/docker-compose-local.yml index aee6710..7d51d3d 100644 --- a/docker-compose-local.yml +++ b/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: diff --git a/esbuild.config.js b/esbuild.config.js index 7a474e7..03c25e5 100644 --- a/esbuild.config.js +++ b/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") diff --git a/frontend/.htaccess b/frontend/.htaccess index b1409a7..d21be7e 100644 --- a/frontend/.htaccess +++ b/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 @@ -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] diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 4f3c170..4c2997b 100644 --- a/frontend/src/App.svelte +++ b/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") {#if cookiesAllowed} + + + + + + + + + + + + + + diff --git a/frontend/src/lib/components/cookieSet.svelte b/frontend/src/lib/components/cookieSet.svelte index bdb21a5..4374048 100644 --- a/frontend/src/lib/components/cookieSet.svelte +++ b/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 diff --git a/frontend/src/lib/components/header/Header.svelte b/frontend/src/lib/components/header/Header.svelte index f4339db..6e48ad2 100644 --- a/frontend/src/lib/components/header/Header.svelte +++ b/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 diff --git a/frontend/src/lib/components/header/desktop.svelte b/frontend/src/lib/components/header/desktop.svelte index 9ff4964..2e98396 100644 --- a/frontend/src/lib/components/header/desktop.svelte +++ b/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) @@ -186,7 +186,7 @@
img diff --git a/frontend/src/lib/components/header/mobile.svelte b/frontend/src/lib/components/header/mobile.svelte index e17daea..c276184 100644 --- a/frontend/src/lib/components/header/mobile.svelte +++ b/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) + }
    @@ -111,7 +117,7 @@
- {#if index % 2 == 1 && window.innerWidth > 1023} + {#if index % 2 == 1 && window?.innerWidth > 1023} {/if} diff --git a/frontend/src/routes/NotFound.svelte b/frontend/src/routes/NotFound.svelte index 6afe7c8..e35e4ea 100644 --- a/frontend/src/routes/NotFound.svelte +++ b/frontend/src/routes/NotFound.svelte @@ -1,5 +1,10 @@ diff --git a/package.json b/package.json index cbae1b3..dcc048f 100644 --- a/package.json +++ b/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",