khairul169/garage-webui
1
0
Fork 0
mirror of https://github.com/khairul169/garage-webui.git synced 2025-04-27 22:39:31 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add base path configuration

Browse Source
This commit is contained in:
Khairul Hidayat 2025-03-19 05:32:08 +07:00
parent 04a10eadfd
commit 2aaaf87dfd
11 changed files with 125 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -139,6 +139,7 @@ metrics_token = "YOUR_METRICS_TOKEN_HERE"
However, if it fails to load, you can set these environment variables instead: However, if it fails to load, you can set these environment variables instead:
- `CONFIG_PATH`: Path to the Garage `config.toml` file. Defaults to `/etc/garage.toml`. - `CONFIG_PATH`: Path to the Garage `config.toml` file. Defaults to `/etc/garage.toml`.
- `BASE_PATH`: Base path or prefix for Web UI.
- `API_BASE_URL`: Garage admin API endpoint URL. - `API_BASE_URL`: Garage admin API endpoint URL.
- `API_ADMIN_KEY`: Admin API key. - `API_ADMIN_KEY`: Admin API key.
- `S3_REGION`: S3 Region. - `S3_REGION`: S3 Region.
@ -146,7 +147,9 @@ However, if it fails to load, you can set these environment variables instead:
### Authentication ### Authentication
Enable authentication by setting `AUTH_USER_PASS` environment variable. Generate the username and password hash using the following command: Enable authentication by setting the `AUTH_USER_PASS` environment variable in the format `username:password_hash`, where `password_hash` is a bcrypt hash of the password.
Generate the username and password hash using the following command:
```bash ```bash
htpasswd -nbBC 10 "YOUR_USERNAME" "YOUR_PASSWORD" htpasswd -nbBC 10 "YOUR_USERNAME" "YOUR_PASSWORD"

6
backend/.env.example Normal file
View File

@ -0,0 +1,6 @@
#
BASE_PATH=""
AUTH_USER_PASS='username:$2y$10$DSTi9o0uQPEHSNlf66xMEOgm9KgVNBP3vHxA3SK0Xha2EVMb3mTXm'
API_BASE_URL="http://garage:3903"
S3_ENDPOINT_URL="http://garage:3900"
API_ADMIN_KEY=""

14
backend/main.go
View File

@ -7,6 +7,7 @@ import (
"khairul169/garage-webui/utils" "khairul169/garage-webui/utils"
"log" "log"
"net/http" "net/http"
"os"
"github.com/joho/godotenv" "github.com/joho/godotenv"
) )
@ -21,10 +22,21 @@ func main() {
log.Println("Cannot load garage config!", err) log.Println("Cannot load garage config!", err)
} }
basePath := os.Getenv("BASE_PATH")
mux := http.NewServeMux() mux := http.NewServeMux()
mux.Handle("/api/", http.StripPrefix("/api", router.HandleApiRouter()))
// Serve API
apiPrefix := basePath + "/api"
mux.Handle(apiPrefix+"/", http.StripPrefix(apiPrefix, router.HandleApiRouter()))
// Static files
ui.ServeUI(mux) ui.ServeUI(mux)
// Redirect to UI if BASE_PATH is set
if basePath != "" {
mux.Handle("/", http.RedirectHandler(basePath, http.StatusMovedPermanently))
}
host := utils.GetEnv("HOST", "0.0.0.0") host := utils.GetEnv("HOST", "0.0.0.0")
port := utils.GetEnv("PORT", "3909") port := utils.GetEnv("PORT", "3909")

35
backend/ui/ui_prod.go
View File

@ -7,7 +7,10 @@ import (
"embed" "embed"
"io/fs" "io/fs"
"net/http" "net/http"
"os"
"path" "path"
"regexp"
"strings"
) )
//go:embed dist //go:embed dist
@ -16,19 +19,45 @@ var embeddedFs embed.FS
func ServeUI(mux *http.ServeMux) { func ServeUI(mux *http.ServeMux) {
distFs, _ := fs.Sub(embeddedFs, "dist") distFs, _ := fs.Sub(embeddedFs, "dist")
fileServer := http.FileServer(http.FS(distFs)) fileServer := http.FileServer(http.FS(distFs))
basePath := os.Getenv("BASE_PATH")
mux.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { mux.Handle(basePath+"/", http.StripPrefix(basePath, http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
_path := path.Clean(r.URL.Path)[1:] _path := path.Clean(r.URL.Path)[1:]
// Rewrite non-existing paths to index.html // Rewrite non-existing paths to index.html
if _, err := fs.Stat(distFs, _path); err != nil { if _, err := fs.Stat(distFs, _path); err != nil {
index, _ := fs.ReadFile(distFs, "index.html") index, _ := fs.ReadFile(distFs, "index.html")
html := string(index)
// Set base path for the UI
html = strings.ReplaceAll(html, "%BASE_PATH%", basePath)
html = addBasePath(html, basePath)
w.Header().Add("Content-Type", "text/html") w.Header().Add("Content-Type", "text/html")
w.WriteHeader(http.StatusOK) w.WriteHeader(http.StatusOK)
w.Write(index) w.Write([]byte(html))
return
}
// Add prefix to each /assets strings in js
if len(basePath) > 0 && strings.HasSuffix(_path, ".js") {
data, _ := fs.ReadFile(distFs, _path)
html := string(data)
html = strings.ReplaceAll(html, "assets/", basePath[1:]+"/assets/")
w.Header().Add("Content-Type", "text/javascript")
w.WriteHeader(http.StatusOK)
w.Write([]byte(html))
return return
} }
fileServer.ServeHTTP(w, r) fileServer.ServeHTTP(w, r)
})) })))
}
func addBasePath(html string, basePath string) string {
re := regexp.MustCompile(`(href|src)=["'](/[^"'>]+)["']`)
return re.ReplaceAllStringFunc(html, func(match string) string {
return re.ReplaceAllString(match, `$1="`+basePath+`$2"`)
})
} }

3
index.html
View File

@ -10,6 +10,9 @@
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<title>Garage Web UI</title> <title>Garage Web UI</title>
<script>
window.__BASE_PATH = "%BASE_PATH%";
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

78
src/app/router.tsx
View File

@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { lazy, Suspense } from "react"; import { lazy, Suspense } from "react";
import AuthLayout from "@/components/layouts/auth-layout"; import AuthLayout from "@/components/layouts/auth-layout";
import MainLayout from "@/components/layouts/main-layout"; import MainLayout from "@/components/layouts/main-layout";
import { BASE_PATH } from "@/lib/consts";
const LoginPage = lazy(() => import("@/pages/auth/login")); const LoginPage = lazy(() => import("@/pages/auth/login"));
const ClusterPage = lazy(() => import("@/pages/cluster/page")); const ClusterPage = lazy(() => import("@/pages/cluster/page"));
@ -10,43 +11,48 @@ const BucketsPage = lazy(() => import("@/pages/buckets/page"));
const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page")); const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
const KeysPage = lazy(() => import("@/pages/keys/page")); const KeysPage = lazy(() => import("@/pages/keys/page"));
const router = createBrowserRouter([ const router = createBrowserRouter(
[
{
path: "/auth",
Component: AuthLayout,
children: [
{
path: "login",
Component: LoginPage,
},
],
},
{
path: "/",
Component: MainLayout,
children: [
{
index: true,
Component: HomePage,
},
{
path: "cluster",
Component: ClusterPage,
},
{
path: "buckets",
children: [
{ index: true, Component: BucketsPage },
{ path: ":id", Component: ManageBucketPage },
],
},
{
path: "keys",
Component: KeysPage,
},
],
},
],
{ {
path: "/auth", basename: BASE_PATH,
Component: AuthLayout, }
children: [ );
{
path: "login",
Component: LoginPage,
},
],
},
{
path: "/",
Component: MainLayout,
children: [
{
index: true,
Component: HomePage,
},
{
path: "cluster",
Component: ClusterPage,
},
{
path: "buckets",
children: [
{ index: true, Component: BucketsPage },
{ path: ":id", Component: ManageBucketPage },
],
},
{
path: "keys",
Component: KeysPage,
},
],
},
]);
const Router = () => { const Router = () => {
return ( return (

3
src/components/containers/sidebar.tsx
View File

@ -15,6 +15,7 @@ import appStore from "@/stores/app-store";
import garageLogo from "@/assets/garage-logo.svg"; import garageLogo from "@/assets/garage-logo.svg";
import { useMutation } from "@tanstack/react-query"; import { useMutation } from "@tanstack/react-query";
import api from "@/lib/api"; import api from "@/lib/api";
import * as utils from "@/lib/utils";
import { toast } from "sonner"; import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth"; import { useAuth } from "@/hooks/useAuth";
@ -93,7 +94,7 @@ const LogoutButton = () => {
const logout = useMutation({ const logout = useMutation({
mutationFn: () => api.post("/auth/logout"), mutationFn: () => api.post("/auth/logout"),
onSuccess: () => { onSuccess: () => {
window.location.href = "/auth/login"; window.location.href = utils.url("/auth/login");
}, },
onError: (err) => { onError: (err) => {
toast.error(err?.message || "Unknown error"); toast.error(err?.message || "Unknown error");

7
src/global.d.ts vendored Normal file
View File

@ -0,0 +1,7 @@
export {};
declare global {
interface Window {
__BASE_PATH?: string;
}
}

7
src/lib/api.ts
View File

@ -1,10 +1,13 @@
import * as utils from "@/lib/utils";
import { BASE_PATH } from "./consts";
type FetchOptions = Omit<RequestInit, "headers" | "body"> & { type FetchOptions = Omit<RequestInit, "headers" | "body"> & {
params?: Record<string, any>; params?: Record<string, any>;
headers?: Record<string, string>; headers?: Record<string, string>;
body?: any; body?: any;
}; };
export const API_URL = "/api"; export const API_URL = BASE_PATH + "/api";
export class APIError extends Error { export class APIError extends Error {
status!: number; status!: number;
@ -47,7 +50,7 @@ const api = {
const data = isJson ? await res.json() : await res.text(); const data = isJson ? await res.json() : await res.text();
if (res.status === 401 && !url.startsWith("/auth")) { if (res.status === 401 && !url.startsWith("/auth")) {
window.location.href = "/auth/login"; window.location.href = utils.url("/auth/login");
throw new APIError("unauthorized", res.status); throw new APIError("unauthorized", res.status);
} }

6
src/lib/consts.ts Normal file
View File

@ -0,0 +1,6 @@
// consts.ts
export const BASE_PATH =
(import.meta.env.PROD ? window.__BASE_PATH : null) ||
import.meta.env.VITE_BASE_PATH ||
"";

5
src/lib/utils.ts
View File

@ -3,6 +3,7 @@ import { toast } from "sonner";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import dayjsRelativeTime from "dayjs/plugin/relativeTime"; import dayjsRelativeTime from "dayjs/plugin/relativeTime";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { BASE_PATH } from "./consts";
dayjs.extend(dayjsRelativeTime); dayjs.extend(dayjsRelativeTime);
export { dayjs }; export { dayjs };
@ -53,3 +54,7 @@ export const copyToClipboard = async (text: string) => {
textArea?.remove(); textArea?.remove();
} }
}; };
export const url = (...paths: unknown[]) => {
return BASE_PATH + paths.join("/");
};