pass dynamic port to frontend

marhaupe · Sep 12, 2024 · 66daca5 · 66daca5
1 parent 0a452bb
commit 66daca5
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/packages/cli/app/cmd/root.go b/packages/cli/app/cmd/root.go
@@ -52,8 +52,11 @@ type Root struct {
 func New(command string) *Root {
 	logsService := logs.New()
 	return &Root{
-		logService:   logsService,
-		staticServer: static.New(),
+		logService: logsService,
+		staticServer: &static.Static{
+			Command: command,
+			Port:    port,
+		},
 		executor: &executor.Executor{
 			Command: command,
 			Out:     logsService,

diff --git a/packages/cli/internal/static/static.go b/packages/cli/internal/static/static.go
@@ -2,20 +2,21 @@ package static
 
 import (
 	"embed"
+	"encoding/json"
 	"fmt"
 	"io/fs"
 	"net/http"
+	"strings"
 
 	"github.com/kataras/iris/v12"
 )
 
 //go:embed all:dist
 var dist embed.FS
 
-type Static struct{}
-
-func New() *Static {
-	return &Static{}
+type Static struct {
+	Command string
+	Port    int
 }
 
 func (s *Static) Handler() iris.Handler {
@@ -28,8 +29,38 @@ func (s *Static) Handler() iris.Handler {
 		}
 	}
 
-	return iris.FileServer(http.FS(assets), iris.DirOptions{
-		IndexName: "index.html",
-		ShowList:  true, // Enable directory listing for debugging
-	})
+	return func(ctx iris.Context) {
+		path := ctx.Request().URL.Path
+		if path == "/" || path == "/index.html" {
+			content, err := fs.ReadFile(assets, "index.html")
+			if err != nil {
+				ctx.StatusCode(http.StatusInternalServerError)
+				ctx.WriteString("Error reading index.html")
+				return
+			}
+			config := struct {
+				Command string `json:"command"`
+				Port    int    `json:"port"`
+			}{
+				Command: s.Command,
+				Port:    s.Port,
+			}
+			configJSON, err := json.Marshal(config)
+			if err != nil {
+				ctx.StatusCode(http.StatusInternalServerError)
+				ctx.WriteString("Error marshalling config")
+				return
+			}
+			configScript := fmt.Sprintf("<script>window.config = %s;</script>", configJSON)
+			modifiedContent := strings.ReplaceAll(string(content), "<!--#echo var=\"configscript\" -->", configScript)
+
+			ctx.ContentType("text/html")
+			ctx.WriteString(modifiedContent)
+			return
+		}
+
+		iris.FileServer(http.FS(assets), iris.DirOptions{
+			IndexName: "index.html",
+		})(ctx)
+	}
 }
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>uitail</title>
+    <!--#echo var="configscript" -->
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -20,9 +20,19 @@ export function App() {
 
   const logListRef = useRef<LogListRef>(null);
 
+  useEffect(() => {
+    const prevTitle = document.title;
+    if (config.command) {
+      document.title = "uitail - " + config.command;
+    }
+    return () => {
+      document.title = prevTitle;
+    };
+  }, []);
+
   async function handleClear() {
     try {
-      const response = await fetch(`${config.backendUrl}${config.routes.clear}`, {
+      const response = await fetch(`http://localhost:${config.port}${config.routes.clear}`, {
         method: "POST",
       });
       if (response.ok) {
@@ -36,7 +46,7 @@ export function App() {
 
   async function handleRestart() {
     try {
-      const response = await fetch(`${config.backendUrl}${config.routes.restart}`, {
+      const response = await fetch(`http://localhost:${config.port}${config.routes.restart}`, {
         method: "POST",
       });
       if (response.ok) {
@@ -48,7 +58,7 @@ export function App() {
   }
 
   useEffect(() => {
-    const url = new URL(config.backendUrl + config.routes.events);
+    const url = new URL(`http://localhost:${config.port}${config.routes.events}`);
     url.searchParams.set("stream", nanoid());
     if (filterState.message) {
       url.searchParams.set("filter", filterState.message);

diff --git a/packages/frontend/src/config.ts b/packages/frontend/src/config.ts
@@ -1,8 +1,20 @@
+declare global {
+  interface Window {
+    config: {
+      port: number;
+      command: string;
+    };
+  }
+}
+
 export const config = {
-  backendUrl: "http://localhost:8787",
   routes: {
     events: "/events",
     restart: "/restart",
     clear: "/clear",
   },
+  ...(window.config || {
+    port: 8765,
+    command: "",
+  }),
 };