Able to get successful api call in the cluster.

README.md

-# Notes
+# Steps to run the full stack in local environment:
 
-1. run docker-compose up
-2. should be able to find servers using localhost 8080 and 3000
+docker-compose down -> Will delete old containers
+docker-compose build --no-cache -> Build new containers and copy updated files to containers
+docker-compose up -> run new containers
 
-# Steps to run in local environment:
+note: If you only edit the frontend, you only need to rebuild the frontend. So to make the
+process faster you can do "docker-compose build --no-cache frontend". The same applies to backend.
 
-docker-compose down -> Will delete old container
-docker-compose build --no-cache -> Build new container and copy updated files
-docker-compose up -> run new container
+# Steps to commit backend docker image to cluster
+
+cd ./backend
+docker build --platform=linux/amd64 -t container.cs.vt.edu/fhurtado14/corps-directory/backend:latest .
+docker push container.cs.vt.edu/fhurtado14/corps-directory/backend:latest
+Go to CS Launch and scale down backend deployment to 0, then scale back up to 1.
+
+# Steps to commit frontend docker image to cluster
+
+cd ./frontend
+docker build --platform=linux/amd64 -t container.cs.vt.edu/fhurtado14/corps-directory/frontend:latest .
+docker push container.cs.vt.edu/fhurtado14/corps-directory/frontend:latest
+Go to CS Launch and scale down backend deployment to 0, then scale back up to 1.

docker-compose.yml

@@ -19,6 +19,8 @@ services:
     build: ./frontend
     ports:
       - "8080:80"
+    environment:
+      - REACT_APP_API_URL=http://localhost:3000/api
     depends_on:
       - backend
 

frontend/.env

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

frontend/src/components/Home.js

@@ -9,8 +9,11 @@ function Home() {
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
 
-  // url for API, need to use env variables before deploying
-  const url = "http://localhost:3000/api";
+  // 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.REACT_APP_API_URL}`;
+
+  console.log("URL: ", url);
 
   // async function to make the API call
   const fetchData = async () => {
@@ -31,12 +34,12 @@ function Home() {
     <div>
       <h1>Home Page</h1>
 
-      {/* Display "Data: [data]" or an empty space if data is null */}
+      {/* Display data if it exists */}
       <p>
         Data: {data ? <span>{JSON.stringify(data)}</span> : <span>&nbsp;</span>}
       </p>
 
-      {/* Display "Error: [error]" or an empty space if no error */}
+      {/* display error if there is an error*/}
       <p>Error: {error ? <span>{error}</span> : <span>&nbsp;</span>}</p>
     </div>
   );