are you fucking kidding me is that all it took

.env.example

@@ -1,4 +1,4 @@
 PB_ADMIN_EMAIL=admin@example.com
 PB_ADMIN_PASSWORD=secret-password
-PUBLIC_PB_URL=http://pb:8080
+PUBLIC_URL=http://your.domain.tld/
 PB_DATA_DIR=/pb/pb_data

Dockerfile

@@ -4,8 +4,10 @@ COPY package*.json ./
 RUN npm i
 COPY . .
 ENV PUBLIC_PB_URL=http://pb:8080
+ENV PUBLIC_URL=http://localhost:4321
 
 RUN npm run build
 
 EXPOSE 4321
-CMD ["npm", "run", "preview", "--", "--host"]
+CMD ["npm", "run", "dev", "--", "--host"]
+# CMD [ "node", "dist/sever/entry.mjs"]

astro.config.mjs

@@ -5,6 +5,10 @@ import node from '@astrojs/node';
 
 import tailwindcss from '@tailwindcss/vite';
 
+import { loadEnv } from "vite";
+
+const { PUBLIC_PB_URL } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
+
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
@@ -14,6 +18,17 @@ export default defineConfig({
   }),
 
   vite: {
-    plugins: [tailwindcss()]
+    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'),
+        },
+      }
+    }
   }
 });

docker-compose.yml

@@ -2,6 +2,7 @@ services:
   web:
     build: .
     env_file: .env
+    network_mode: host
     ports:
       - "4321:4321"
 

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "docker compose up pb -d; astro dev --host",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"

src/components/Card/OverviewCard.astro

@@ -0,0 +1,18 @@
+---
+import client from "@/data/pocketbase"
+const { recipe } = Astro.props;
+
+const headerImage = await client.collection("images").getOne(recipe.images[0])
+const image = await client.files.getURL(headerImage, headerImage.image)
+---
+
+<div class="relative z-0 flex h-60">
+    <img
+        class="w-full h-full object-cover rounded-xl"
+        src={ image }
+    />
+
+    <div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
+        <p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
+    </div>
+</div>

src/data/pocketbase.ts

@@ -1,4 +1,4 @@
 import Pocketbase from "pocketbase"
 
-export const client = new Pocketbase(import.meta.env.PUBLIC_PB_URL)
-// export const client = new Pocketbase("http://localhost:8080")
+const client = new Pocketbase(import.meta.env.PUBLIC_URL)
+export default client;

src/pages/index.astro

@@ -1,16 +1,24 @@
 ---
 import PageLayout from "@/layouts/base"
-import { client } from "@/data/pocketbase"
+import client from "@/data/pocketbase"
+import OverviewCard from "@/components/Card/OverviewCard"
 
-const reccies = await client.collection("recipes").getFullList()
+const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>
-	<p class="text-3xl font-medium">Recipie</p>
+	<p class="w-full bg-yellow-100 p-5 text-3xl font-medium">Recipie</p>
+	
+	<div id="content" class="p-5 pt-2">
+		<p class="pb-2">What would you like today?</p>
+
+		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+			{
+				recipies.map(r => (
+					<OverviewCard recipe={r} />
+				))
+			}
+		</div>
+	</div>
 
-	{
-		reccies.map(rec => (
-			<p>{rec.name}</p>
-		))
-	}
 </PageLayout>

src/styles/global.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 
 html {
-    @apply bg-[#fefefe];
-    @apply p-5;
+    @apply bg-yellow-50;
 }