From eac42d515d3ee1bc5f628d4bc4c52d7454fe8c18 Mon Sep 17 00:00:00 2001
From: Federico Hurtado <fed_home@Federicos-Mac-mini.local>
Date: Wed, 9 Oct 2024 14:29:37 -0400
Subject: [PATCH] Fixed environment variables to call localhost during dev and
the cluster IP during production.
---
docker-compose.yml | 4 +++-
frontend/.env.development | 1 +
frontend/.env.production | 1 +
frontend/src/components/Home.js | 9 +++++----
frontend/src/index.js | 19 +++++++++++++------
5 files changed, 23 insertions(+), 11 deletions(-)
create mode 100644 frontend/.env.development
create mode 100644 frontend/.env.production
diff --git a/docker-compose.yml b/docker-compose.yml
index d47c559..ab60730 100644
--- a/docker-compose.yml
+++ b/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
diff --git a/frontend/.env.development b/frontend/.env.development
new file mode 100644
index 0000000..fe24afa
--- /dev/null
+++ b/frontend/.env.development
@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:3000/api
\ No newline at end of file
diff --git a/frontend/.env.production b/frontend/.env.production
new file mode 100644
index 0000000..a9c1827
--- /dev/null
+++ b/frontend/.env.production
@@ -0,0 +1 @@
+REACT_APP_API_URL=https://corpsdirectory.discovery.cs.vt.edu/api
\ No newline at end of file
diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
index 6443a49..a37cea1 100644
--- a/frontend/src/components/Home.js
+++ b/frontend/src/components/Home.js
@@ -1,4 +1,4 @@
-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>
diff --git a/frontend/src/index.js b/frontend/src/index.js
index d563c0f..7ae3d71 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,10 +1,17 @@
-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 />
--
GitLab