ui: fails to load due to "require is undefined"

[coopernetes]

Via #379 , the React frontend is no longer able to load correctly. Upon visiting the Git Proxy UI, the following error is logged in the console:

git-push.js:4 Uncaught ReferenceError: require is not defined
    at git-push.js:4:39

Offending lines are the requires, attempting to reuse the same environment variable between the backend API and the UI.

const { GIT_PROXY_UI_PORT: uiPort } = require('../../config/env').Vars;
const baseUrl = `http://localhost:${uiPort}/api/v1`;

Since Vite/React cannot access Node's process.env, have to use another way to configure backend API in a way that the port can be shared with the frontend. This may also require moving the backend to ESM (#276) before being able to import from React.

@JamieSlome I have a basic patch for this but it does involve the use Vite environment variables via VITE_<customVar> in place of GIT_PROXY_UI_PORT. See below.

diff --git a/src/config/env.js b/src/config/env.js
index c78bb3e..a3374ef 100644
--- a/src/config/env.js
+++ b/src/config/env.js
@@ -1,3 +1,3 @@
-const { GIT_PROXY_SERVER_PORT = 8000, GIT_PROXY_UI_PORT = 8080 } = process.env;
+const { GIT_PROXY_SERVER_PORT = 8000, VITE_BACKEND_PORT = 8080 } = process.env;
 
-exports.Vars = { GIT_PROXY_SERVER_PORT, GIT_PROXY_UI_PORT };
+exports.Vars = { GIT_PROXY_SERVER_PORT, GIT_PROXY_UI_PORT: VITE_BACKEND_PORT };
diff --git a/src/ui/services/git-push.js b/src/ui/services/git-push.js
index 8cdace5..3d0a89a 100644
--- a/src/ui/services/git-push.js
+++ b/src/ui/services/git-push.js
@@ -1,15 +1,17 @@
 /* eslint-disable max-len */
 /* eslint-disable require-jsdoc */
 import axios from 'axios';
-const { GIT_PROXY_UI_PORT: uiPort } = require('../../config/env').Vars;
-const baseUrl = `http://localhost:${uiPort}/api/v1`;
+
+const baseUrl = `http://localhost:${import.meta.env.VITE_BACKEND_PORT}/api/v1`;
 
 const config = {
   withCredentials: true,
 };
 
 const getUser = async (setIsLoading, setData, setAuth, setIsError) => {
-  const url = new URL(`http://localhost:${uiPort}/auth/success`);
+  const url = new URL(
+    `http://localhost:${import.meta.env.VITE_BACKEND_PORT}/auth/success`,
+  );
   await axios(url.toString(), config)
     .then((response) => {
       const data = response.data;
diff --git a/src/ui/services/repo.js b/src/ui/services/repo.js
index 71c861c..6f9a59e 100644
--- a/src/ui/services/repo.js
+++ b/src/ui/services/repo.js
@@ -1,8 +1,7 @@
 /* eslint-disable max-len */
 /* eslint-disable require-jsdoc */
 import axios from 'axios';
-const { GIT_PROXY_UI_PORT: uiPort } = require('../../config/env').Vars;
-const baseUrl = `http://localhost:${uiPort}/api/v1`;
+const baseUrl = `http://localhost:${import.meta.env.VITE_BACKEND_PORT}/api/v1`;
 
 const config = {
   withCredentials: true,
diff --git a/src/ui/services/user.js b/src/ui/services/user.js
index 35e8fda..8229858 100644
--- a/src/ui/services/user.js
+++ b/src/ui/services/user.js
@@ -1,8 +1,7 @@
 /* eslint-disable max-len */
 /* eslint-disable require-jsdoc */
 import axios from 'axios';
-const { GIT_PROXY_UI_PORT: uiPort } = require('../../config/env').Vars;
-const baseUrl = `http://localhost:${uiPort}/api/v1`;
+const baseUrl = `http://localhost:${import.meta.env.VITE_BACKEND_PORT}/api/v1`;
 
 const config = {
   withCredentials: true,
diff --git a/src/ui/views/Login/Login.jsx b/src/ui/views/Login/Login.jsx
index 5c948c2..0b8116a 100644
--- a/src/ui/views/Login/Login.jsx
+++ b/src/ui/views/Login/Login.jsx
@@ -37,8 +37,8 @@ const styles = {
   },
 };
 
-const { GIT_PROXY_UI_PORT: uiPort } = require('../../config/env').Vars;
-const baseUrl = `http://localhost:${uiPort}`;
+const baseUrl = `http://localhost:${import.meta.env.VITE_BACKEND_PORT}`;
+console.log(baseUrl);
 
 const useStyles = makeStyles(styles);

[JamieSlome]

@coopernetes - we have used the same pattern in #335. Also, I think it is time for some UI tests.

[JamieSlome]

Addressed in #335. Closing this issue 👍