Gateway - stop hard coding urls (#651)

labdao · Sep 14, 2023 · 7627833 · 7627833
1 parent 2978e8b
commit 7627833
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 10 deletions.
diff --git a/gateway/README.md b/gateway/README.md
@@ -3,6 +3,8 @@
 * Install [docker](https://docs.docker.com/engine/install/)
 * Define necessary env variables
 ```
+NEXT_PUBLIC_BACKEND_URL=http://localhost:8080
+FRONTEND_URL=http://localhost:3000
 POSTGRES_PASSWORD=MAKE_UP_SOMETHING_RANDOM
 POSTGRES_USER=labdao
 POSTGRES_DB=labdao

diff --git a/gateway/app.go b/gateway/app.go
@@ -43,7 +43,7 @@ func main() {
 
 	// Set up CORS
 	corsMiddleware := cors.New(cors.Options{
-		AllowedOrigins:   []string{"http://localhost:3000"},
+		AllowedOrigins:   []string{os.Getenv("FRONTEND_URL")},
 		AllowCredentials: true,
 		AllowedMethods:   []string{"GET", "POST"},
 	})

diff --git a/gateway/frontend/app/datafile/list/page.tsx b/gateway/frontend/app/datafile/list/page.tsx
@@ -8,6 +8,8 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 
+import backendUrl from 'lib/backendUrl'
+
 export default function ListDataFiles() {
   interface DataFile {
     CID: string;
@@ -20,7 +22,7 @@ export default function ListDataFiles() {
   const [datafiles, setDataFiles] = useState<DataFile[]>([]);
 
   useEffect(() => {
-    fetch('http://localhost:8080/get-datafiles')
+    fetch(`${backendUrl()}/get-datafiles`)
       .then(response => {
         if (!response.ok) {
           throw new Error(`HTTP error ${response.status}`);

diff --git a/gateway/frontend/app/job/init/page.tsx b/gateway/frontend/app/job/init/page.tsx
@@ -3,6 +3,8 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import backendUrl from 'lib/backendUrl';
+
 
 export default function InitJob() {
     const dispatch = useDispatch();
@@ -28,12 +30,12 @@ export default function InitJob() {
     const [selectedDataFiles, setSelectedDataFiles] = useState([]);
 
     useEffect(() => {
-        fetch('http://localhost:8080/get-tools')
+        fetch(`${backendUrl()}/get-tools`)
             .then(response => response.json())
             .then(data => setTools(data))
             .catch(error => console.error('Error fetching tools:', error));
 
-        fetch('http://localhost:8080/get-datafiles')
+        fetch(`${backendUrl()}/get-datafiles`)
             .then(response => response.json())
             .then(data => setDataFiles(data))
             .catch(error => console.error('Error fetching data files:', error));
@@ -58,7 +60,7 @@ export default function InitJob() {
 
         console.log('Sending request with data:', data)
 
-        fetch('http://localhost:8080/init-job', {
+        fetch(`${backendUrl()}/init-job`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',

diff --git a/gateway/frontend/app/tool/list/page.tsx b/gateway/frontend/app/tool/list/page.tsx
@@ -8,6 +8,8 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 
+import backendUrl from 'lib/backendUrl'
+
 export default function ListToolFiles() {
   interface Tool {
     CID: string;
@@ -18,7 +20,7 @@ export default function ListToolFiles() {
   const [tools, setTools] = useState<Tool[]>([]);
 
   useEffect(() => {
-    fetch('http://localhost:8080/get-tools')
+    fetch(`${backendUrl()}/get-tools`)
       .then(response => {
         if (!response.ok) {
           throw new Error(`HTTP error ${response.status}`);

diff --git a/gateway/frontend/lib/backendUrl.ts b/gateway/frontend/lib/backendUrl.ts
@@ -0,0 +1,6 @@
+export default function backendUrl() {
+  if(!process.env.NEXT_PUBLIC_BACKEND_URL) {
+    throw new Error("The environment variable NEXT_PUBLIC_BACKEND_URL must be defined.");
+  }
+  return process.env.NEXT_PUBLIC_BACKEND_URL
+}
diff --git a/gateway/frontend/lib/redux/slices/dataFileAddSlice/actions.ts b/gateway/frontend/lib/redux/slices/dataFileAddSlice/actions.ts
@@ -1,3 +1,5 @@
+import backendUrl from "lib/backendUrl";
+
 export const saveDataFileToServer = async (
     file: File,
     metadata: { [key: string]: any }
@@ -12,7 +14,7 @@ export const saveDataFileToServer = async (
       formData.append(key, metadata[key]);
     }
 
-    const response = await fetch('http://localhost:8080/add-datafile', {
+    const response = await fetch(`${backendUrl()}/add-datafile`, {
       method: 'POST',
       body: formData,
     })

diff --git a/gateway/frontend/lib/redux/slices/jobSlice/actions.ts b/gateway/frontend/lib/redux/slices/jobSlice/actions.ts
@@ -1,7 +1,9 @@
+import backendUrl from "lib/backendUrl"
+
 export const initJobOnServer = async (
     jobData: { [key: string]: any }
 ): Promise<any> => {
-    const response = await fetch('http://localhost:8080/init-job', {
+    const response = await fetch(`${backendUrl()}/init-job`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',

diff --git a/gateway/frontend/lib/redux/slices/toolAddSlice/actions.ts b/gateway/frontend/lib/redux/slices/toolAddSlice/actions.ts
@@ -1,7 +1,9 @@
+import backendUrl from "lib/backendUrl"
+
 export const addToolToServer = async (
     payload: { toolData: { [key: string]: any }, walletAddress: string }
 ): Promise<any> => {
-    const response = await fetch('http://localhost:8080/add-tool', {
+    const response = await fetch(`${backendUrl()}/add-tool`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',

diff --git a/gateway/frontend/lib/redux/slices/userSlice/actions.ts b/gateway/frontend/lib/redux/slices/userSlice/actions.ts
@@ -1,8 +1,10 @@
+import backendUrl from "lib/backendUrl"
+
 export const saveUserDataToServer = async (
   username: string,
   walletAddress: string
 ): Promise<{ username: string, walletAddress: string }> => {
-  const response = await fetch('http://localhost:8080/user', {
+  const response = await fetch(`${backendUrl()}/user`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ username, walletAddress }),