From daab7a25b687c7047ed9011b4f402729cc3f1f56 Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Wed, 13 Aug 2025 17:28:32 +1200
Subject: [PATCH 1/2] [PIE-14] More robust API proxy

---
 Dockerfile                  |  4 ++--
 astro.config.mjs            | 11 -----------
 docker-compose.yml          |  1 -
 src/pages/api/[...proxy].ts | 16 ++++++++++++++++
 4 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/api/[...proxy].ts

diff --git a/Dockerfile b/Dockerfile
index bc92931..c2755cc 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -9,5 +9,5 @@ ENV PUBLIC_URL=http://localhost:4321
 RUN npm run build
 
 EXPOSE 4321
-CMD ["npm", "run", "dev", "--", "--host"]
-# CMD [ "node", "dist/sever/entry.mjs"]
+# CMD ["npm", "run", "dev", "--", "--host"]
+CMD [ "npm", "run", "preview", "--", "--host" ]
diff --git a/astro.config.mjs b/astro.config.mjs
index 60f2bfa..58360f6 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,16 +19,5 @@ export default defineConfig({
 
   vite: {
     plugins: [tailwindcss()],
-    server: {
-      proxy: {
-        // The idea is to proxy the Pocketbase connection to the current domain so the user doesn't have to open two ports
-        // Currently works in dev (npm run dev -- --host) with the correct PUBLIC_URL var set but not through docker
-        '/api': {
-          target: PUBLIC_PB_URL,
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, '/api'),
-        },
-      }
-    }
   }
 });
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index a3d4d3b..7769074 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,6 @@ services:
   web:
     build: .
     env_file: .env
-    network_mode: host
     ports:
       - "4321:4321"
 
diff --git a/src/pages/api/[...proxy].ts b/src/pages/api/[...proxy].ts
new file mode 100644
index 0000000..c831988
--- /dev/null
+++ b/src/pages/api/[...proxy].ts
@@ -0,0 +1,16 @@
+import type { APIRoute } from "astro";
+
+// THANK YOU https://stackoverflow.com/a/77297521 !!!!!!!
+
+const getProxyUrl = (request: Request) => {
+  const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
+  const requestUrl = new URL(request.url);
+
+  return new URL(requestUrl.pathname, proxyUrl);
+};
+
+export const ALL: APIRoute = async ({ request }) => {
+  const proxyUrl = getProxyUrl(request);
+  const response = await fetch(proxyUrl.href, request);
+  return new Response(response.body);
+};
\ No newline at end of file
-- 
2.47.2


From 24e8c23291223007a20e027f29db32af9bf985d1 Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Wed, 13 Aug 2025 17:50:28 +1200
Subject: [PATCH 2/2] Custom function for getting relative url for files

---
 src/components/Card/OverviewCard.astro    | 2 +-
 src/components/Detail/ImageCarousel.astro | 2 +-
 src/data/pocketbase.ts                    | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Card/OverviewCard.astro b/src/components/Card/OverviewCard.astro
index 23618ee..8a73c9e 100644
--- a/src/components/Card/OverviewCard.astro
+++ b/src/components/Card/OverviewCard.astro
@@ -5,7 +5,7 @@ import TagRow from "./TagRow.astro"
 const { recipe } = Astro.props;
 
 const headerImage = await client.collection("images").getOne(recipe.images[0])
-const image = await client.files.getURL(headerImage, headerImage.image)
+const image = await client.files.getRelativeURL(headerImage, headerImage.image)
 ---
 
 <div class="relative z-0 flex h-50">
diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro
index ece401e..bbdc8c6 100644
--- a/src/components/Detail/ImageCarousel.astro
+++ b/src/components/Detail/ImageCarousel.astro
@@ -4,7 +4,7 @@ const { class: className, recipe } = Astro.props
 
 async function getLink(img: string) {
     const record = await client.collection("images").getOne(img)
-    const link = await client.files.getURL(record, record.image)
+    const link = await client.files.getRelativeURL(record, record.image)
     return link
 }
 
diff --git a/src/data/pocketbase.ts b/src/data/pocketbase.ts
index 0b05826..bc56688 100644
--- a/src/data/pocketbase.ts
+++ b/src/data/pocketbase.ts
@@ -1,5 +1,12 @@
 import Pocketbase from "pocketbase"
 
-const client = new Pocketbase(import.meta.env.PUBLIC_URL)
+const client = new Pocketbase("http://localhost:4321")
 client.autoCancellation(false)
+
+// Return a relative url for file instead of full path including localhost, which breaks external access
+client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
+    const res = client.files.getURL(record, filename)
+    return res.substring(21)
+}
+
 export default client;
\ No newline at end of file
-- 
2.47.2