Headscale-UI is based on the svelte-kit framework and designed to compile to static HTML/JS/CSS. As such, once built (with npm run build or by downloading the packages), Headscale-UI can be hosted on any static file server (including headscale's static file server, once support has been added)
Headscale-UI uses the static adapter built into svelte-kit, meaning that several svelte-kit functions are not feasible in a static deploymnet. Backend services (such as any route ending in .js or .ts) cannot be used, and most if not all script functions should be defined within the onMount function of svelte.
All Headscale-UI features and functions should be client side only. Any backend features should be considered to be implemented in a separate backend. This can be the Headscale application itself (preferred), or potentially implementing a Backend-as-a-Service API such as Supabase.
In the current alpha format, the headscale API secret is stored within the browser's localStorage area. This method of credential storage is not ideal as localStorage can potentially be exploited by XSS (cross-site scripting) vulnerabilities. The long term goal is to integrate Headscale-UI into Headscale's OIDC authentication capabilities, but discovery is required to implement this feature (as well as cooperation from the upstream project).
For now, it is recommended that credentials only be saved on trusted computers and to use short API key expiries where possible.
Dependencies are kept to a minimum and kept to large, actively maintained repositories. Great care should be taken before suggesting or adding any additional dependencies: headscale is a sensitive tool and attack surfaces must be kept minimal.
- SvelteKit - The HTML/JS Framework and Toolkit
- Tailwind CSS - CSS Framework
- DaisyUI - CSS Theme and Components
- Typescript - for static type checking
- Prettier - for Code Formatting
- Fuse.js - for intelligent searching