From fe085b58a5f3c0152df12957aa150c0876c2a074 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Fri, 18 Oct 2024 16:07:32 +0200
Subject: [PATCH] fix: environment variable `API_URL` can't be changed

---
 frontend/next.config.js             |  3 ---
 frontend/src/pages/_app.tsx         | 14 ++++++--------
 frontend/src/pages/api/[...all].tsx |  3 +--
 reverse-proxy/Caddyfile             |  4 ++--
 reverse-proxy/Caddyfile.trust-proxy |  4 ++--
 5 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/next.config.js b/frontend/next.config.js
index 808c0d52..42e5a7c3 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -18,7 +18,4 @@ module.exports = withPWA({
   output: "standalone", env: {
     VERSION: version,
   },
-  serverRuntimeConfig: {
-    apiURL: process.env.API_URL ?? 'http://localhost:8080',
-  },
 });
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 28f86032..5c258df1 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -9,9 +9,10 @@ import { ModalsProvider } from "@mantine/modals";
 import { Notifications } from "@mantine/notifications";
 import axios from "axios";
 import { getCookie, setCookie } from "cookies-next";
+import moment from "moment";
+import "moment/min/locales";
 import { GetServerSidePropsContext } from "next";
 import type { AppProps } from "next/app";
-import getConfig from "next/config";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
@@ -29,8 +30,6 @@ import Config from "../types/config.type";
 import { CurrentUser } from "../types/user.type";
 import i18nUtil from "../utils/i18n.util";
 import userPreferences from "../utils/userPreferences.util";
-import "moment/min/locales";
-import moment from "moment";
 
 const excludeDefaultLayoutRoutes = ["/admin/config/[category]"];
 
@@ -44,7 +43,7 @@ function App({ Component, pageProps }: AppProps) {
   const [route, setRoute] = useState<string>(pageProps.route);
 
   const [configVariables, setConfigVariables] = useState<Config[]>(
-    pageProps.configVariables,
+    pageProps.configVariables
   );
 
   useEffect(() => {
@@ -54,7 +53,7 @@ function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     const interval = setInterval(
       async () => await authService.refreshAccessToken(),
-      2 * 60 * 1000, // 2 minutes
+      2 * 60 * 1000 // 2 minutes
     );
 
     return () => clearInterval(interval);
@@ -154,8 +153,6 @@ function App({ Component, pageProps }: AppProps) {
 // Fetch user and config variables on server side when the first request is made
 // These will get passed as a page prop to the App component and stored in the contexts
 App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
-  const { apiURL } = getConfig().serverRuntimeConfig;
-
   let pageProps: {
     user?: CurrentUser;
     configVariables?: Config[];
@@ -169,6 +166,7 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
   };
 
   if (ctx.req) {
+    const apiURL = process.env.API_URL || "http://localhost:8080";
     const cookieHeader = ctx.req.headers.cookie;
 
     pageProps.user = await axios(`${apiURL}/api/users/me`, {
@@ -182,7 +180,7 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
     pageProps.route = ctx.req.url;
 
     const requestLanguage = i18nUtil.getLanguageFromAcceptHeader(
-      ctx.req.headers["accept-language"],
+      ctx.req.headers["accept-language"]
     );
 
     pageProps.language = ctx.req.cookies["language"] ?? requestLanguage;
diff --git a/frontend/src/pages/api/[...all].tsx b/frontend/src/pages/api/[...all].tsx
index df7a7c4d..b8842e13 100644
--- a/frontend/src/pages/api/[...all].tsx
+++ b/frontend/src/pages/api/[...all].tsx
@@ -1,6 +1,5 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import httpProxyMiddleware from "next-http-proxy-middleware";
-import getConfig from "next/config";
 
 export const config = {
   api: {
@@ -9,7 +8,7 @@ export const config = {
   },
 };
 
-const { apiURL } = getConfig().serverRuntimeConfig;
+const apiURL = process.env.API_URL || "http://localhost:8080";
 
 // A proxy to the API server only used in development.
 // In production this route gets overridden by Caddy.
diff --git a/reverse-proxy/Caddyfile b/reverse-proxy/Caddyfile
index b8ea666e..66746bc9 100644
--- a/reverse-proxy/Caddyfile
+++ b/reverse-proxy/Caddyfile
@@ -1,7 +1,7 @@
 :3000 {
     # Reverse proxy for /api
-    reverse_proxy /api/* http://localhost:8080
+    reverse_proxy /api/* http://localhost:{$BACKEND_PORT:8080}
 
     # Reverse proxy for all other requests
-    reverse_proxy http://localhost:3333
+    reverse_proxy http://localhost:{$PORT:3333}
 }
diff --git a/reverse-proxy/Caddyfile.trust-proxy b/reverse-proxy/Caddyfile.trust-proxy
index cb405817..32b23590 100644
--- a/reverse-proxy/Caddyfile.trust-proxy
+++ b/reverse-proxy/Caddyfile.trust-proxy
@@ -1,9 +1,9 @@
 :3000 {
-    reverse_proxy /* http://localhost:3333  {
+    reverse_proxy /* http://localhost:{$PORT:3333}  {
             trusted_proxies 0.0.0.0/0
     }
 
-    reverse_proxy /api/* http://localhost:8080  {
+    reverse_proxy /api/* http://localhost:{$BACKEND_PORT:8080}  {
             trusted_proxies 0.0.0.0/0
     }