Merge pull request #30 from theoleuthardt/fix/tools-backend-error

fix: use conditionally the right url for backend in nextjs frontend

.env

@@ -3,5 +3,3 @@ NODE_ENV=development
 HOSTNAME=0.0.0.0
 FRONTEND_PORT=3000
 BACKEND_PORT=4000
-NEXT_PUBLIC_BACKEND_URL=http://localhost:4000
-CORS_ALLOWED_ORIGIN=http://localhost:3000

.github/workflows/deploy.yml

@@ -41,6 +41,7 @@ jobs:
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/werkzeugkiste-frontend:latest
           build-args: |
             NEXT_PUBLIC_BACKEND_URL=${{ secrets.NEXT_PUBLIC_BACKEND_URL }}
+            NODE_ENV=${{ secrets.NODE_ENV }}
 
       - name: Build and Push Backend
         uses: docker/build-push-action@v6
@@ -50,6 +51,7 @@ jobs:
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/werkzeugkiste-backend:latest
           build-args: |
             CORS_ALLOWED_ORIGIN=${{ secrets.CORS_ALLOWED_ORIGIN }}
+            NODE_ENV=${{ secrets.NODE_ENV }}
 
   deploy-on-server:
     needs: docker-build-push

backend/Dockerfile

@@ -48,7 +48,8 @@ RUN \
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV=production
+ARG NODE_ENV
+ENV NODE_ENV=$NODE_ENV
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 fastify

backend/server.ts

@@ -10,6 +10,10 @@ 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

@@ -6,6 +6,7 @@ services:
       dockerfile: Dockerfile
       args:
         NEXT_PUBLIC_BACKEND_URL: ${NEXT_PUBLIC_BACKEND_URL}
+        NODE_ENV: ${NODE_ENV}
     container_name: werkzeugkiste-frontend
     environment:
       - NODE_ENV=${NODE_ENV}
@@ -22,6 +23,7 @@ services:
       dockerfile: Dockerfile
       args:
         CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
+        NODE_ENV: ${NODE_ENV}
     container_name: werkzeugkiste-backend
     environment:
       - NODE_ENV=${NODE_ENV}

frontend/Dockerfile

@@ -24,6 +24,8 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+ARG NODE_ENV
+ENV NODE_ENV=$NODE_ENV
 ARG NEXT_PUBLIC_BACKEND_URL
 ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL
 
@@ -43,7 +45,8 @@ RUN \
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV=production
+ARG NODE_ENV
+ENV NODE_ENV=$NODE_ENV
 # Uncomment the following line in case you want to disable telemetry during runtime.
 # ENV NEXT_TELEMETRY_DISABLED=1
 
@@ -62,4 +65,4 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
 
-CMD echo "NEXT_PUBLIC_BACKEND_URL = $NEXT_PUBLIC_BACKEND_URL" && node server.js
+CMD node server.js

frontend/next.config.ts

@@ -1,9 +1,14 @@
 import type { NextConfig } from "next";
 
+const NEXT_PUBLIC_BACKEND_URL =
+  process.env.NODE_ENV === "production"
+    ? process.env.NEXT_PUBLIC_BACKEND_URL || ""
+    : "http://localhost:4000";
+
 const nextConfig: NextConfig = {
   output: "standalone",
   env: {
-    NEXT_PUBLIC_BACKEND_URL: process.env.NEXT_PUBLIC_BACKEND_URL,
+    NEXT_PUBLIC_BACKEND_URL: NEXT_PUBLIC_BACKEND_URL,
   },
 };