Use environment variables for ports in web app

2025-11-22 10:51:36 +01:00 · 2024-08-10 22:20:57 +02:00
parent 0866e2631d
commit 162118bb56
23 changed files with 347 additions and 223 deletions
--- a/web-app/src/routes/(anonymous)/login/+page.server.ts
+++ b/web-app/src/routes/(anonymous)/login/+page.server.ts
@@ -4,7 +4,7 @@ export const actions: Actions = {
  default: async ({ request, cookies, fetch }) => {
    const data = await request.formData();

-    const res = await fetch("http://localhost:3000/rpc/login", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/login`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
--- a/web-app/src/routes/(anonymous)/register/+page.server.ts
+++ b/web-app/src/routes/(anonymous)/register/+page.server.ts
@@ -4,7 +4,7 @@ export const actions: Actions = {
  default: async ({ request, fetch }) => {
    const data = await request.formData();

-    const res = await fetch("http://localhost:3000/rpc/register", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/register`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
--- a/web-app/src/routes/(authenticated)/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/+page.server.ts
@@ -6,7 +6,7 @@ export const load: PageServerLoad = async ({ fetch, cookies, url }) => {

  const params = new URLSearchParams();

-  const baseFetchUrl = "http://localhost:3000/website";
+  const baseFetchUrl = `http://localhost:${process.env.ARCHTIKA_API_PORT}/website`;

  if (searchQuery) {
    params.append("title", `ilike.*${searchQuery}*`);
@@ -63,17 +63,20 @@ export const actions: Actions = {
  createWebsite: async ({ request, fetch, cookies }) => {
    const data = await request.formData();

-    const res = await fetch("http://localhost:3000/rpc/create_website", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        content_type: data.get("content-type"),
-        title: data.get("title")
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/create_website`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          content_type: data.get("content-type"),
+          title: data.get("title")
+        })
+      }
+    );

    if (!res.ok) {
      const response = await res.json();
@@ -85,16 +88,19 @@ export const actions: Actions = {
  updateWebsite: async ({ request, cookies, fetch }) => {
    const data = await request.formData();

-    const res = await fetch(`http://localhost:3000/website?id=eq.${data.get("id")}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        title: data.get("title")
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/website?id=eq.${data.get("id")}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          title: data.get("title")
+        })
+      }
+    );

    if (!res.ok) {
      const response = await res.json();
@@ -106,13 +112,16 @@ export const actions: Actions = {
  deleteWebsite: async ({ request, cookies, fetch }) => {
    const data = await request.formData();

-    const res = await fetch(`http://localhost:3000/website?id=eq.${data.get("id")}`, {
-      method: "DELETE",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/website?id=eq.${data.get("id")}`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        }
      }
-    });
+    );

    if (!res.ok) {
      const response = await res.json();
--- a/web-app/src/routes/(authenticated)/account/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/account/+page.server.ts
@@ -15,16 +15,19 @@ export const actions: Actions = {
  deleteAccount: async ({ request, fetch, cookies }) => {
    const data = await request.formData();

-    const res = await fetch("http://localhost:3000/rpc/delete_account", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        password: data.get("password")
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/delete_account`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          password: data.get("password")
+        })
+      }
+    );

    const response = await res.json();

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts
@@ -1,23 +1,29 @@
 import type { LayoutServerLoad } from "./$types";

 export const load: LayoutServerLoad = async ({ params, fetch, cookies }) => {
-  const websiteData = await fetch(`http://localhost:3000/website?id=eq.${params.websiteId}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
-      Accept: "application/vnd.pgrst.object+json"
+  const websiteData = await fetch(
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/website?id=eq.${params.websiteId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
    }
-  });
+  );

-  const homeData = await fetch(`http://localhost:3000/home?website_id=eq.${params.websiteId}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
-      Accept: "application/vnd.pgrst.object+json"
+  const homeData = await fetch(
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/home?website_id=eq.${params.websiteId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
    }
-  });
+  );

  const website = await websiteData.json();
  const home = await homeData.json();
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts
@@ -2,7 +2,7 @@ import type { Actions, PageServerLoad } from "./$types";

 export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
  const globalSettingsData = await fetch(
-    `http://localhost:3000/settings?website_id=eq.${params.websiteId}`,
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/settings?website_id=eq.${params.websiteId}`,
    {
      method: "GET",
      headers: {
@@ -13,23 +13,29 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
    }
  );

-  const headerData = await fetch(`http://localhost:3000/header?website_id=eq.${params.websiteId}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
-      Accept: "application/vnd.pgrst.object+json"
+  const headerData = await fetch(
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/header?website_id=eq.${params.websiteId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
    }
-  });
+  );

-  const footerData = await fetch(`http://localhost:3000/footer?website_id=eq.${params.websiteId}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
-      Accept: "application/vnd.pgrst.object+json"
+  const footerData = await fetch(
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/footer?website_id=eq.${params.websiteId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
    }
-  });
+  );

  const globalSettings = await globalSettingsData.json();
  const header = await headerData.json();
@@ -47,37 +53,43 @@ export const actions: Actions = {
    const data = await request.formData();
    const faviconFile = data.get("favicon") as File;

-    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/octet-stream",
-        Authorization: `Bearer ${cookies.get("session_token")}`,
-        Accept: "application/vnd.pgrst.object+json",
-        "X-Website-Id": params.websiteId,
-        "X-Mimetype": faviconFile.type,
-        "X-Original-Filename": faviconFile.name
-      },
-      body: await faviconFile.arrayBuffer()
-    });
+    const uploadedImageData = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/upload_file`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/octet-stream",
+          Authorization: `Bearer ${cookies.get("session_token")}`,
+          Accept: "application/vnd.pgrst.object+json",
+          "X-Website-Id": params.websiteId,
+          "X-Mimetype": faviconFile.type,
+          "X-Original-Filename": faviconFile.name
+        },
+        body: await faviconFile.arrayBuffer()
+      }
+    );

    const uploadedImage = await uploadedImageData.json();

-    if (!uploadedImageData.ok) {
+    if (!uploadedImageData.ok && faviconFile.size > 0) {
      return { success: false, message: uploadedImage.message };
    }

-    const res = await fetch(`http://localhost:3000/settings?website_id=eq.${params.websiteId}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        accent_color_light_theme: data.get("accent-color-light"),
-        accent_color_dark_theme: data.get("accent-color-dark"),
-        favicon_image: uploadedImage.file_id
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/settings?website_id=eq.${params.websiteId}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          accent_color_light_theme: data.get("accent-color-light"),
+          accent_color_dark_theme: data.get("accent-color-dark"),
+          favicon_image: uploadedImage.file_id
+        })
+      }
+    );

    if (!res.ok) {
      const response = await res.json();
@@ -93,37 +105,43 @@ export const actions: Actions = {
    const data = await request.formData();
    const logoImage = data.get("logo-image") as File;

-    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/octet-stream",
-        Authorization: `Bearer ${cookies.get("session_token")}`,
-        Accept: "application/vnd.pgrst.object+json",
-        "X-Website-Id": params.websiteId,
-        "X-Mimetype": logoImage.type,
-        "X-Original-Filename": logoImage.name
-      },
-      body: await logoImage.arrayBuffer()
-    });
+    const uploadedImageData = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/upload_file`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/octet-stream",
+          Authorization: `Bearer ${cookies.get("session_token")}`,
+          Accept: "application/vnd.pgrst.object+json",
+          "X-Website-Id": params.websiteId,
+          "X-Mimetype": logoImage.type,
+          "X-Original-Filename": logoImage.name
+        },
+        body: await logoImage.arrayBuffer()
+      }
+    );

    const uploadedImage = await uploadedImageData.json();

-    if (!uploadedImageData.ok) {
+    if (!uploadedImageData.ok && logoImage.size > 0) {
      return { success: false, message: uploadedImage.message };
    }

-    const res = await fetch(`http://localhost:3000/header?website_id=eq.${params.websiteId}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        logo_type: data.get("logo-type"),
-        logo_text: data.get("logo-text"),
-        logo_image: uploadedImage.file_id
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/header?website_id=eq.${params.websiteId}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          logo_type: data.get("logo-type"),
+          logo_text: data.get("logo-text"),
+          logo_image: uploadedImage.file_id
+        })
+      }
+    );

    if (!res.ok) {
      const response = await res.json();
@@ -138,16 +156,19 @@ export const actions: Actions = {
  updateHome: async ({ request, fetch, cookies, params }) => {
    const data = await request.formData();

-    const res = await fetch(`http://localhost:3000/home?website_id=eq.${params.websiteId}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        main_content: data.get("main-content")
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/home?website_id=eq.${params.websiteId}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          main_content: data.get("main-content")
+        })
+      }
+    );

    if (!res.ok) {
      const response = await res.json();
@@ -159,16 +180,19 @@ export const actions: Actions = {
  updateFooter: async ({ request, fetch, cookies, params }) => {
    const data = await request.formData();

-    const res = await fetch(`http://localhost:3000/footer?website_id=eq.${params.websiteId}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        additional_text: data.get("additional-text")
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/footer?website_id=eq.${params.websiteId}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          additional_text: data.get("additional-text")
+        })
+      }
+    );

    if (!res.ok) {
      const response = await res.json();
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -56,7 +56,7 @@
        {#if data.globalSettings.favicon_image}
          <Modal id="preview-favicon-global-{data.globalSettings.website_id}" text="Preview">
            <img
-              src={`http://localhost:3000/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
+              src={`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
              alt=""
            />
          </Modal>
@@ -110,7 +110,7 @@
        {#if data.header.logo_image}
          <Modal id="preview-logo-header-{data.header.website_id}" text="Preview">
            <img
-              src={`http://localhost:3000/rpc/retrieve_file?id=${data.header.logo_image}`}
+              src={`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${data.header.logo_image}`}
              alt=""
            />
          </Modal>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
@@ -6,7 +6,7 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent

  const parameters = new URLSearchParams();

-  const baseFetchUrl = `http://localhost:3000/article?website_id=eq.${params.websiteId}&select=id,title`;
+  const baseFetchUrl = `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?website_id=eq.${params.websiteId}&select=id,title`;

  if (searchQuery) {
    parameters.append("title", `ilike.*${searchQuery}*`);
@@ -66,7 +66,7 @@ export const actions: Actions = {
  createArticle: async ({ request, fetch, cookies, params, locals }) => {
    const data = await request.formData();

-    const res = await fetch("http://localhost:3000/article", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/article`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -89,13 +89,16 @@ export const actions: Actions = {
  deleteArticle: async ({ request, fetch, cookies }) => {
    const data = await request.formData();

-    const res = await fetch(`http://localhost:3000/article?id=eq.${data.get("id")}`, {
-      method: "DELETE",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?id=eq.${data.get("id")}`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        }
      }
-    });
+    );

    if (!res.ok) {
      const response = await res.json();
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
@@ -1,14 +1,17 @@
 import type { Actions, PageServerLoad } from "./$types";

 export const load: PageServerLoad = async ({ parent, params, cookies, fetch }) => {
-  const articleData = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
-      Accept: "application/vnd.pgrst.object+json"
+  const articleData = await fetch(
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?id=eq.${params.articleId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
    }
-  });
+  );

  const article = await articleData.json();
  const { website } = await parent();
@@ -21,40 +24,46 @@ export const actions: Actions = {
    const data = await request.formData();
    const coverFile = data.get("cover-image") as File;

-    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/octet-stream",
-        Authorization: `Bearer ${cookies.get("session_token")}`,
-        Accept: "application/vnd.pgrst.object+json",
-        "X-Website-Id": params.websiteId,
-        "X-Mimetype": coverFile.type,
-        "X-Original-Filename": coverFile.name
-      },
-      body: await coverFile.arrayBuffer()
-    });
+    const uploadedImageData = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/upload_file`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/octet-stream",
+          Authorization: `Bearer ${cookies.get("session_token")}`,
+          Accept: "application/vnd.pgrst.object+json",
+          "X-Website-Id": params.websiteId,
+          "X-Mimetype": coverFile.type,
+          "X-Original-Filename": coverFile.name
+        },
+        body: await coverFile.arrayBuffer()
+      }
+    );

    const uploadedImage = await uploadedImageData.json();

-    if (!uploadedImageData.ok) {
+    if (!uploadedImageData.ok && coverFile.size > 0) {
      return { success: false, message: uploadedImage.message };
    }

-    const res = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        title: data.get("title"),
-        meta_description: data.get("description"),
-        meta_author: data.get("author"),
-        cover_image: uploadedImage.file_id,
-        publication_date: data.get("publication-date"),
-        main_content: data.get("main-content")
-      })
-    });
+    const res = await fetch(
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?id=eq.${params.articleId}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          title: data.get("title"),
+          meta_description: data.get("description"),
+          meta_author: data.get("author"),
+          cover_image: uploadedImage.file_id,
+          publication_date: data.get("publication-date"),
+          main_content: data.get("main-content")
+        })
+      }
+    );

    if (!res.ok) {
      const response = await res.json();
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
@@ -69,7 +69,7 @@
        {#if data.article.cover_image}
          <Modal id="preview-cover-article-{data.article.id}" text="Preview">
            <img
-              src={`http://localhost:3000/rpc/retrieve_file?id=${data.article.cover_image}`}
+              src={`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${data.article.cover_image}`}
              alt=""
            />
          </Modal>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
@@ -4,7 +4,7 @@ export const load: PageServerLoad = async ({ parent, params, fetch, cookies }) =
  const { website, home } = await parent();

  const collabData = await fetch(
-    `http://localhost:3000/collab?website_id=eq.${params.websiteId}&select=*,user!user_id(*)`,
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/collab?website_id=eq.${params.websiteId}&select=*,user!user_id(*)`,
    {
      method: "GET",
      headers: {
@@ -27,7 +27,7 @@ export const actions: Actions = {
  addCollaborator: async ({ request, fetch, cookies, params }) => {
    const data = await request.formData();

-    const res = await fetch("http://localhost:3000/collab", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/collab`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -51,7 +51,7 @@ export const actions: Actions = {
    const data = await request.formData();

    const res = await fetch(
-      `http://localhost:3000/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
      {
        method: "PATCH",
        headers: {
@@ -75,7 +75,7 @@ export const actions: Actions = {
    const data = await request.formData();

    const res = await fetch(
-      `http://localhost:3000/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
      {
        method: "DELETE",
        headers: {
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
@@ -5,7 +5,7 @@ import type { Actions, PageServerLoad } from "./$types";

 export const load: PageServerLoad = async ({ params, fetch, cookies, locals }) => {
  const websiteOverviewData = await fetch(
-    `http://localhost:3000/website_overview?id=eq.${params.websiteId}`,
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/website_overview?id=eq.${params.websiteId}`,
    {
      method: "GET",
      headers: {
@@ -20,17 +20,22 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, locals }) =

  generateStaticFiles(websiteOverview);

+  const websitePreviewUrl = `http://localhost:${process.env.ARCHTIKA_NGINX_PORT}/previews/${websiteOverview.user_id}/${websiteOverview.id}/index.html`;
+
  return {
-    websiteOverview
+    websiteOverview,
+    websitePreviewUrl
  };
 };

 export const actions: Actions = {
-  publishWebsite: async ({ request, params, locals }) => {
+  publishWebsite: async ({ request }) => {
    const data = await request.formData();
    const websiteOverview = JSON.parse(data.get("website-overview") as string);

    generateStaticFiles(websiteOverview, false);
+
+    return { success: true, message: "Successfully published website" };
  }
 };

@@ -46,6 +51,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
  const articleFile = await readFile(join(templatePath, "article.html"), {
    encoding: "utf-8"
  });
+  const stylesFile = await readFile(join(templatePath, "styles.css"), { encoding: "utf-8" });

  const indexFileContents = indexFile
    .replace(
@@ -88,7 +94,15 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
  let uploadDir = "";

  if (isPreview) {
-    uploadDir = join(process.cwd(), "static", "user-websites", websiteData.user_id, websiteData.id);
+    uploadDir = join(
+      "/",
+      "var",
+      "www",
+      "archtika-websites",
+      "previews",
+      websiteData.user_id,
+      websiteData.id
+    );
  } else {
    uploadDir = join("/", "var", "www", "archtika-websites", websiteData.user_id, websiteData.id);
  }
@@ -109,7 +123,10 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
          ? `<strong>${websiteData.logo_text}</strong>`
          : `<img src="https://picsum.photos/32/32" />`
      )
-      .replace("{{cover_image}}", `<img src="https://picsum.photos/600/200" />`)
+      .replace(
+        "{{cover_image}}",
+        `<img src="${article.cover_image ? `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${article.cover_image}` : "https://picsum.photos/600/200"}" />`
+      )
      .replace("{{title}}", `<h1>${article.title}</h1>`)
      .replace("{{publication_date}}", `<p>${article.publication_date}</p>`)
      .replace("{{main_content}}", md.render(article.main_content ?? ""))
@@ -117,4 +134,6 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)

    await writeFile(join(uploadDir, "articles", `${articleFileName}.html`), articleFileContents);
  }
+
+  await writeFile(join(uploadDir, "styles.css"), stylesFile);
 };
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
@@ -12,8 +12,7 @@
 <WebsiteEditor
  id={data.website.id}
  title={data.website.title}
-  previewContent="http://localhost:5173/user-websites/{data.websiteOverview.user_id}/{data
-    .websiteOverview.id}/index.html"
+  previewContent={data.websitePreviewUrl}
  fullPreview={true}
 >
  <section>