Skip to content

chore: simplify base path usage and add extra documentation #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rolznz wants to merge 2 commits into
base: feat/add-base-path
Choose a base branch
from
Open

chore: simplify base path usage and add extra documentation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c2db0b
chore: simplify base path usage and add extra documentation
rolznz Jun 19, 2025
896b0b3
chore: add extra documentation
rolznz Jun 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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=<url>
# 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=<url> 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"
Expand Down
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)_
Expand Down
17 changes: 4 additions & 13 deletions frontend/platform_specific/http/src/utils/request.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <T>(
...args: Parameters<typeof fetch>
): Promise<T | undefined> => {
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();
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
8 changes: 8 additions & 0 deletions scripts/caddy-subpath/Caddyfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
17 changes: 17 additions & 0 deletions scripts/caddy-subpath/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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