fix: environment variable API_URL can't be changed

Author: stonith404

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

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;

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.

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}
 }

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
     }