Moved frontend directory to the root and updated frontend dockerfile … (

#122) * Moved frontend directory to the root and updated frontend dockerfile and also added this in the release workflow * Fixing JS linting * Fix linting
shaharia-lab · Jan 29, 2024 · 67f45bf · 67f45bf
1 parent 02a86ca
commit 67f45bf
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 23 deletions.
diff --git a/.github/workflows/Release.yaml b/.github/workflows/Release.yaml
@@ -35,4 +35,13 @@ jobs:
           version: latest
           args: release --rm-dist
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      # Step to build and push Docker image
+      - name: Build and Push Docker Image
+        if: startsWith(github.ref, 'refs/tags/')
+        run: |
+          TAG="${GITHUB_REF#refs/tags/v}"
+          IMAGE_NAME="ghcr.io/${{ github.repository }}/frontend:$TAG"
+          docker build -f frontend.dockerfile -t "$IMAGE_NAME" .
+          docker push "$IMAGE_NAME"
diff --git a/cmd/discover.go b/cmd/discover.go
@@ -3,9 +3,7 @@ package cmd
 
 import (
 	"context"
-	"embed"
 	"errors"
-	"io/fs"
 	"net/http"
 	"time"
 
@@ -24,12 +22,6 @@ import (
 	"github.com/spf13/cobra"
 )
 
-// Embed the entire static directory. frontend/static directory is located under `cmd` directory
-// because go:embed doesn't support relative path
-//
-//go:embed frontend/static/*
-var webStaticFiles embed.FS
-
 // NewDiscoverCommand build "discover" command
 func NewDiscoverCommand() *cobra.Command {
 	var cfgFile string
@@ -98,19 +90,6 @@ func (s *Server) setupAPIServer(port string) {
 		})
 	})
 
-	// Serve static files
-	r.Get("/app/*", func(w http.ResponseWriter, r *http.Request) {
-		// Create a subdirectory for the embedded files
-		staticFS, err := fs.Sub(webStaticFiles, "frontend/static")
-		if err != nil {
-			http.Error(w, "Internal server error", http.StatusInternalServerError)
-			return
-		}
-
-		// Strip the "/app" prefix and serve the files
-		http.StripPrefix("/app", http.FileServer(http.FS(staticFS))).ServeHTTP(w, r)
-	})
-
 	r.Get("/ping", func(w http.ResponseWriter, r *http.Request) {
 		w.Write([]byte("pong"))
 	})

diff --git a/cmd/frontend/static/set-backend.html b/cmd/frontend/static/set-backend.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Set terediX Backend</title>
+    <style>
+        body {
+            text-align: center;
+            font-family: Arial, sans-serif;
+            background-color: #f7f7f7;
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .container {
+            background-color: white;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 300px;
+        }
+        .input-field, .submit-button {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+        .submit-button {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .submit-button:hover {
+            background-color: #45a049;
+        }
+        .input-field:focus {
+            outline: none;
+            border-color: #4CAF50;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <input id="backend-url" type="text" class="input-field" value="http://localhost:8080">
+    <button onclick="setBackendUrl()" class="submit-button">Set Backend</button>
+</div>
+<script>
+    function setBackendUrl() {
+        var backendUrl = document.getElementById('backend-url').value;
+        if(backendUrl) {
+            document.cookie = "backend_endpoint=" + backendUrl + ";path=/";
+            window.location.href = 'index.html';
+        } else {
+            alert('Please enter a URL.');
+        }
+    }
+</script>
+</body>
+</html>
diff --git a/frontend.dockerfile b/frontend.dockerfile
@@ -0,0 +1,11 @@
+# Use the Nginx image
+FROM nginx:alpine
+
+# Copy the static files to the Nginx server directory
+COPY ./frontend/static /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start Nginx and keep it running
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/cmd/frontend/static/index.html → frontend/static/index.html b/cmd/frontend/static/index.html → frontend/static/index.html
diff --git a/cmd/frontend/static/script.js → frontend/static/script.js b/cmd/frontend/static/script.js → frontend/static/script.js
@@ -1,5 +1,23 @@
+function getCookie (name) {
+  const cookieArr = document.cookie.split(';')
+  for (let i = 0; i < cookieArr.length; i++) {
+    const cookiePair = cookieArr[i].split('=')
+    if (name === cookiePair[0].trim()) {
+      return decodeURIComponent(cookiePair[1])
+    }
+  }
+  return null
+}
+
 document.addEventListener('DOMContentLoaded', function () {
-  const apiUrl = 'http://localhost:8080/api/v1/resources'
+  let apiUrl = getCookie('backend_endpoint')
+  if (!apiUrl) {
+    window.location.href = 'set-backend.html'
+    return
+  }
+
+  apiUrl = `${apiUrl}/api/v1/resources`
+
   const currentPage = 1
 
   // Moved this event listener inside DOMContentLoaded