Fixed environment variables to call localhost during dev and the cluster IP during production.

docker-compose.yml

@@ -18,11 +18,13 @@ services:
   frontend:
     build: ./frontend
     ports:
-      - "8080:80"
+      - "8080:3000"
     environment:
       - REACT_APP_API_URL=http://localhost:3000/api
+      - NODE_ENV=development
     depends_on:
       - backend
+    command: npm start # Ensure it runs in development mode
 
   mysql:
     image: mysql:8.0

frontend/.env.development

+REACT_APP_API_URL=http://localhost:3000/api
\ No newline at end of file

frontend/.env.production

+REACT_APP_API_URL=https://corpsdirectory.discovery.cs.vt.edu/api
\ No newline at end of file

frontend/src/components/Home.js

-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import axios from "axios";
 
 /*
@@ -11,9 +11,10 @@ function Home() {
 
   // always use the REACT_APP_API_URL instead of http://localhost:3000
   // bc our cluster has a different value for REACT_APP_API_URL
-  const url = `${process.env.API_URL}`;
+  const url = `${process.env.REACT_APP_API_URL}`;
 
-  console.log("URL: ", url);
+  console.log("URL after change: ", url);
+  console.log("Change");
 
   // async function to make the API call
   const fetchData = async () => {
@@ -28,7 +29,7 @@ function Home() {
   // useEffect to make the API call
   useEffect(() => {
     fetchData(); // Call the async function
-  }, []);
+  }, [fetchData]);
 
   return (
     <div>

frontend/src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const apiUrl = process.env.REACT_APP_API_URL;
+const environment = process.env.NODE_ENV;
+const serverUrl =
+  environment === "development" ? "http://localhost:3000" : apiUrl;
+
+console.log(`App started on ${serverUrl} in ${environment} mode`);
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />