feat: fix vite url using env var

.gitignore

@@ -26,3 +26,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

docker-compose.yaml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   db:
     image: postgres:15
@@ -37,8 +35,11 @@ services:
       - app-network
 
   frontend:
-    build: ./frontend
-    env_file: ./.env
+    build: 
+      context: ./frontend
+      args:
+        VITE_API_URL: ${API_URL}
+
     ports:
       - "3000:80"
     depends_on:

frontend/Dockerfile

@@ -4,6 +4,10 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
+
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
+
 RUN npm run build
 
 # Production stage

frontend/src/utils/BlogList.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
+import { API_URL } from "./constants";
 
 export function BlogList() {
   const [content, setContent] = useState("");
   useEffect(() => {
-    fetch(`localhost:8000/get-blogs`)
+    fetch(`${API_URL}/get-blogs`)
       .then((res) => res.text())
       .then(setContent);
   }, []);