fix: frontend and backend now get variables at build time not runtime

.github/workflows/deploy.yml

@@ -39,6 +39,8 @@ jobs:
           context: ./frontend
           push: true
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/werkzeugkiste-frontend:latest
+          build-args: |
+            NEXT_PUBLIC_BACKEND_URL=${{ secrets.NEXT_PUBLIC_BACKEND_URL }}
 
       - name: Build and Push Backend
         uses: docker/build-push-action@v6
@@ -46,6 +48,8 @@ jobs:
           context: ./backend
           push: true
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/werkzeugkiste-backend:latest
+          build-args: |
+              CORS_ALLOWED_ORIGIN=${{ secrets.CORS_ALLOWED_ORIGIN }}
 
   deploy-on-server:
     needs: docker-build-push

backend/Dockerfile

@@ -61,7 +61,11 @@ USER fastify
 
 EXPOSE 4000
 
+ARG CORS_ALLOWED_ORIGIN
+ENV CORS_ALLOWED_ORIGIN=$CORS_ALLOWED_ORIGIN
+
 ENV PORT=4000
 ENV HOSTNAME="0.0.0.0"
 
+
 CMD ["node", "dist/server.js"]

backend/server.ts

@@ -10,10 +10,6 @@ import { generateQRCode } from "./src/routes/generateqrcode.route";
 import { wordCounter } from "./src/routes/wordcounter.route";
 import { videoToAudio } from "./src/routes/videotoaudio.route";
 import { removeBG } from "./src/routes/removebg.route";
-import dotenv from "dotenv";
-import path from "node:path";
-
-dotenv.config({ path: path.resolve(__dirname, "../.env") });
 
 const app = Fastify({ logger: true });
 

docker-compose.yaml

@@ -1,30 +1,32 @@
 services:
   frontend:
+    env_file: .env
     build:
       context: ./frontend
       dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_BACKEND_URL: ${NEXT_PUBLIC_BACKEND_URL}
     container_name: werkzeugkiste-frontend
-    env_file: .env
     environment:
       - NODE_ENV=${NODE_ENV}
       - HOSTNAME=${HOSTNAME}
       - PORT=${FRONTEND_PORT}
-      - NEXT_PUBLIC_BACKEND_URL=${NEXT_PUBLIC_BACKEND_URL}
     ports:
       - "${FRONTEND_PORT}:3000"
     restart: unless-stopped
 
   backend:
+    env_file: .env
     build:
       context: ./backend
       dockerfile: Dockerfile
+      args:
+        CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
     container_name: werkzeugkiste-backend
-    env_file: .env
     environment:
       - NODE_ENV=${NODE_ENV}
       - HOSTNAME=${HOSTNAME}
       - PORT=${BACKEND_PORT}
-      - CORS_ALLOWED_ORIGIN=${CORS_ALLOWED_ORIGIN}
     ports:
       - "${BACKEND_PORT}:4000"
     restart: unless-stopped

frontend/Dockerfile

@@ -24,6 +24,9 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+ARG NEXT_PUBLIC_BACKEND_URL
+ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.

frontend/next.config.ts

@@ -1,7 +1,4 @@
 import type { NextConfig } from "next";
-import dotenv from "dotenv";
-
-dotenv.config({ path: "../.env" });
 
 const nextConfig: NextConfig = {
   output: "standalone",