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
+    build: 
-    env_file: ./.env
+      context: ./frontend
+      args:
+        VITE_API_URL: ${API_URL}
+
     ports:
       - "3000:80"
     depends_on:

frontend/Dockerfile

@@ -1,15 +1,14 @@
-# Build stage
+FROM node:20 AS builder
-FROM node:20 AS build
 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
+FROM node:20-alpine
-FROM nginx:alpine
+WORKDIR /app
-COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /app ./
-COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 3000
-
+CMD ["npx", "vite", "--port", "3000"]
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -1,28 +0,0 @@
-worker_processes 1;
-
-events { worker_connections 1024; }
-
-http {
-  include       mime.types;
-  default_type  application/octet-stream;
-  sendfile        on;
-  keepalive_timeout  65;
-
-  server {
-    listen       80;
-    server_name  _;
-
-    root   /usr/share/nginx/html;
-    index  index.html;
-
-    location / {
-      # try to serve file directly, otherwise fallback to index.html
-      try_files $uri $uri/ /index.html;
-    }
-
-    # optional: block .git, .env, etc
-    location ~ /\.(?!well-known).* {
-      deny all;
-    }
-  }
-}

frontend/src/App.tsx

@@ -31,9 +31,7 @@ import {
 } from "react-icons/fa";
 import type { Blog } from "./utils/types";
 import { countWords } from "./utils/countWords";
-
+import { API_URL } from "./utils/constants";
-// Base API URL from env
-const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000";
 
 // Auth Context
 interface AuthContextProps {

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);
   }, []);