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..b01ddc28a 100644 --- a/frontend/platform_specific/http/src/utils/request.ts +++ b/frontend/platform_specific/http/src/utils/request.ts @@ -1,22 +1,13 @@ 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 + // 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]; } const token = getAuthToken(); diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cd07ddc21..d0bbcf7c9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -13,7 +13,12 @@ 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 + // 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, +}); 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