From 8c2db0ba335bfd36993d11e4e3649f9e54c57080 Mon Sep 17 00:00:00 2001 From: Roland Bewick Date: Fri, 20 Jun 2025 00:02:46 +0700 Subject: [PATCH 1/2] chore: simplify base path usage and add extra documentation --- Dockerfile | 6 +++--- README.md | 8 ++++++++ .../platform_specific/http/src/utils/request.ts | 16 +++------------- frontend/src/App.tsx | 6 +++++- scripts/caddy-subpath/Caddyfile | 8 ++++++++ scripts/caddy-subpath/README.md | 17 +++++++++++++++++ 6 files changed, 44 insertions(+), 17 deletions(-) create mode 100644 scripts/caddy-subpath/Caddyfile create mode 100644 scripts/caddy-subpath/README.md diff --git a/Dockerfile b/Dockerfile index 6681efb2e..4e466ded4 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,9 +1,9 @@ FROM node:20-alpine as frontend # Set the base path for the frontend build -# This can be overridden at build time with --build-arg BASE_PATH= -# Allows to build a frontend that can be served from a subpath, e.g. /hub/ -ARG BASE_PATH="/" +# This can be overridden at build time with --build-arg BASE_PATH= e.g. --build-arg BASE_PATH=/hub +# Allows to build a frontend that can be served from a subpath, e.g. /hub +ARG BASE_PATH WORKDIR /build COPY frontend ./frontend RUN echo "Building frontend with base path $BASE_PATH" diff --git a/README.md b/README.md index 4edf3cefc..3a9a851a5 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,14 @@ Go to `/frontend` 1. `yarn install` 2. `yarn dev` +### HTTP Production build + + $ yarn build:http + +If you plan to run Alby Hub on a subpath behind a reverse proxy, you can do: + + $ BASE_PATH="/hub" yarn build:http + ### Wails (Backend + Frontend) _Make sure to have [wails](https://wails.io/docs/gettingstarted/installation) installed and all platform-specific dependencies installed (see wails doctor)_ diff --git a/frontend/platform_specific/http/src/utils/request.ts b/frontend/platform_specific/http/src/utils/request.ts index 9f67be94d..dcec8d9e3 100644 --- a/frontend/platform_specific/http/src/utils/request.ts +++ b/frontend/platform_specific/http/src/utils/request.ts @@ -1,22 +1,12 @@ import { getAuthToken } from "src/lib/auth"; import { ErrorResponse } from "src/types"; -const BASE_URL = import.meta.env.BASE_URL; -const PREFIXES = ["/api", "/images"]; - -function startsWithPrefix(path: string, prefixes: string[]): boolean { - return prefixes.some((prefix) => path.startsWith(prefix)); -} - export const request = async ( ...args: Parameters ): Promise => { - if ( - BASE_URL !== "/" && - typeof args[0] === "string" && - startsWithPrefix(args[0], PREFIXES) - ) { - args[0] = BASE_URL + args[0].slice(1); + if (import.meta.env.BASE_URL !== "/") { + // if running on a subpath, include the subpath in the request URL + args[0] = import.meta.env.BASE_URL + args[0]; } const token = getAuthToken(); diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cd07ddc21..95666d64e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -13,7 +13,11 @@ import routes from "src/routes.tsx"; import { isHttpMode } from "src/utils/isHttpMode"; const createRouterFunc = isHttpMode() ? createBrowserRouter : createHashRouter; -const router = createRouterFunc(routes, { basename: import.meta.env.BASE_URL }); +const router = createRouterFunc(routes, { + // if running on a subpath, use the subpath as the router basename + basename: + import.meta.env.BASE_URL !== "/" ? import.meta.env.BASE_URL : undefined, +}); function App() { const { data: info } = useInfo(); diff --git a/scripts/caddy-subpath/Caddyfile b/scripts/caddy-subpath/Caddyfile new file mode 100644 index 000000000..58a673954 --- /dev/null +++ b/scripts/caddy-subpath/Caddyfile @@ -0,0 +1,8 @@ +# FOR TESTING ONLY, do not use internal tls! +https://your-domain.com { + redir /example-path /example-path/ 301 + handle_path /example-path* { + reverse_proxy localhost:8080 + } + tls internal +} \ No newline at end of file diff --git a/scripts/caddy-subpath/README.md b/scripts/caddy-subpath/README.md new file mode 100644 index 000000000..611d9236a --- /dev/null +++ b/scripts/caddy-subpath/README.md @@ -0,0 +1,17 @@ +# Caddy Subpath + +This is an example of how to run Alby Hub on a subpath using Caddy + +To test locally edit `sudo nano /etc/hosts` and add `127.0.0.1 your-domain.com` + +Use the following environment variables when building the frontend: + +```bash +BASE_PATH="/example-path" yarn build:http +``` + +Then run Alby Hub as normal. (if default port is not 8080 you will need to update the Caddyfile) + +Then start caddy: `sudo caddy run -c ./Caddyfile` + +and visit `http://your-domain.com/example-path From 896b0b3599fc9f0889d7d1b698203535e770b39f Mon Sep 17 00:00:00 2001 From: Roland Bewick Date: Fri, 20 Jun 2025 00:04:54 +0700 Subject: [PATCH 2/2] chore: add extra documentation --- frontend/platform_specific/http/src/utils/request.ts | 1 + frontend/src/App.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/platform_specific/http/src/utils/request.ts b/frontend/platform_specific/http/src/utils/request.ts index dcec8d9e3..b01ddc28a 100644 --- a/frontend/platform_specific/http/src/utils/request.ts +++ b/frontend/platform_specific/http/src/utils/request.ts @@ -6,6 +6,7 @@ export const request = async ( ): Promise => { if (import.meta.env.BASE_URL !== "/") { // if running on a subpath, include the subpath in the request URL + // BASE_URL is set via process.env.BASE_PATH, see https://vite.dev/guide/build#public-base-path args[0] = import.meta.env.BASE_URL + args[0]; } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 95666d64e..d0bbcf7c9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -15,6 +15,7 @@ import { isHttpMode } from "src/utils/isHttpMode"; const createRouterFunc = isHttpMode() ? createBrowserRouter : createHashRouter; const router = createRouterFunc(routes, { // if running on a subpath, use the subpath as the router basename + // BASE_URL is set via process.env.BASE_PATH, see https://vite.dev/guide/build#public-base-path basename: import.meta.env.BASE_URL !== "/" ? import.meta.env.BASE_URL : undefined, });