chore: more changes related to reverse proxy

Author: karl-cardenas-coding

Dockerfile

@@ -13,8 +13,9 @@ WORKDIR /app
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV PORT 8080
-ENV API_URI "/"
+ENV API_URI  ""
 ENV API_VERSION 1
+ENV REVERSE_PROXY false
 
 COPY --from=modules /etc/passwd /etc/passwd
 COPY --from=modules /etc/group /etc/group
@@ -27,5 +28,5 @@ RUN apk update && apk upgrade && apk add --no-cache curl ca-certificates bash
 USER appuser
 EXPOSE 8080
 
-CMD ["/bin/bash", "-c", "REACT_APP_API_URI=$API_URI REACT_APP_API_VERSION=$API_VERSION npx react-inject-env set && \
+CMD ["/bin/bash", "-c", "REACT_APP_API_URI=$API_URI REACT_APP_API_VERSION=$API_VERSION REACT_APP_REVERSE_PROXY=$REVERSE_PROXY npx react-inject-env set && \
 npm run server-prod"]

Dockerfile.Caddy

@@ -14,8 +14,9 @@ WORKDIR /app
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV PORT 8080
-ENV API_URI http://localhost:3000
+ENV API_URI ""
 ENV API_VERSION 1
+ENV REVERSE_PROXY true
 
 COPY --from=modules /etc/passwd /etc/passwd
 COPY --from=modules /etc/group /etc/group
@@ -32,5 +33,5 @@ chmod -R 700 /var/log/caddy/
 
 USER appuser
 EXPOSE 8080 3000
-CMD ["/bin/bash", "-c", "REACT_APP_API_URI=$API_URI REACT_APP_API_VERSION=$API_VERSION npx react-inject-env set && \
+CMD ["/bin/bash", "-c", "REACT_APP_API_URI=$API_URI REACT_APP_API_VERSION=$API_VERSION REACT_APP_REVERSE_PROXY=$REVERSE_PROXY npx react-inject-env set && \
 caddy run --config /etc/caddy/Caddyfile --adapter caddyfile"]

src/.DS_Store

@@ -12,29 +12,28 @@ import { getCounter, postCounter } from "./utilities/requests";
 import Menu from "./components/Animated/Menu/Menu";
 
 function App() {
-  const countapiKey = "f3dceeba-1841-42cf-b76c-26e9026dc0cf";
+  const countapiKey = "f3dceeba-1841-42cf-b76c-26e9026dc0cf"; // Yes, it's an API key but it's not a secret. It's used to identify the counter. 
   const countapiNamespace = "spectrocloud.com";
   const [isLogoVisible, setIsLogoVisible] = useState(false);
   const [clickCount, setClickCount] = useState(0);
   const [connected, setConnected] = useState(false);
   const [firstLoad, setFirstLoad] = useState(true);
   let API_URI = env.REACT_APP_API_URI;
   let API_VERSION = env.REACT_APP_API_VERSION;
-
-  // This is the default value for the API_URI env variable
-  // In this scenario, either the global API is used OR local storage is used
-  if (API_URI === "/") {
+  let REVERSE_PROXY = env.REACT_APP_REVERSE_PROXY;
+  
+  if (API_URI == "undefined") {
       API_URI = ""
   }
 
-  // If no API_URI is provided, then assume the user is running the API locally
-  if (API_URI === "") {
-    API_URI = "http://localhost:3000"
-}
+  if (REVERSE_PROXY) {
+      API_URI = "http://0.0.0.0:3000"
+  }
 
   if (API_VERSION === "" || API_VERSION == "undefined") {
       API_VERSION = 1
   }
+
   useEffect(() => {
     // Checks if internet is connected by attempting to load an image
     const image = new Image();
@@ -47,18 +46,8 @@ function App() {
   }, [connected])
 
   async function loadCount() {
-    // If not connected to the internet, fallback to using local storage for count
-    // Otherwise, use Count API
-    if (connected && !API_URI || API_URI === "undefined") {
-      try {
-        const count = await countapi.get(countapiNamespace, countapiKey);
-        setClickCount(count?.value || clickCount); 
-      } catch (error) {
-        setClickCount(clickCount + 1);
-        localStorage.setItem("clickCount", clickCount);
-      }
-    }
-    
+
+    // If an API URI is provided, use that to get the count
     if (API_URI) {
       try {
         const databaseCount = await getCounter(API_URI, API_VERSION);
@@ -69,6 +58,20 @@ function App() {
       }
     }
 
+
+    // If connected to the internet, and no API URI is provided then use the Global Counter API.
+    // Fallback to using local storage for count if the Global Counter API is unavailable.
+    if (connected && !API_URI || API_URI === "undefined") {
+      try {
+        const count = await countapi.get(countapiNamespace, countapiKey);
+        setClickCount(count?.value || clickCount); 
+      } catch (error) {
+        setClickCount(clickCount + 1);
+        localStorage.setItem("clickCount", clickCount);
+      }
+    }
+    
+    // If not connected to the internet, and no API URI is provided then use local storage for count.
     if (!connected && !API_URI || API_URI === "undefined") {
       const count = localStorage.getItem("clickCount");
       setClickCount(parseInt(count) || 0);
@@ -77,25 +80,28 @@ function App() {
   }
 
   async function countUp() {
-    if (connected && !API_URI || API_URI === "undefined") {
-      try {
-        await countapi.update(countapiNamespace, countapiKey, +1);
-        await loadCount();
-      } catch(error) {
-        console.log(error);
-      }
-    } 
 
+    // If an API URI is provided, use that to update the count
     if (API_URI) {
       try {
         const databaseCount = await postCounter(API_URI, API_VERSION);
         setClickCount(databaseCount);
       } catch (error) {
         alert(`Error: Unable to connect to database on ${API_URI}. Please try again later. 😢`)
       }
-
     }
-    
+
+    // If connected to the internet, and no API URI is provided then use the Global Counter API.
+    if (connected && !API_URI || API_URI === "undefined") {
+      try {
+        await countapi.update(countapiNamespace, countapiKey, +1);
+        await loadCount();
+      } catch(error) {
+        console.log(error);
+      }
+    } 
+
+    // If not connected to the internet, and no API URI is provided then use local storage for count.
     if(!connected && !API_URI || API_URI === "undefined") {
       setClickCount(clickCount + 1);
       localStorage.setItem("clickCount", clickCount);