Run WireGuard UI outside of /

[theseal]

I'm trying to create an add-on Home Assistant with WireGuard UI. Home Assistant has something they call Ingress which allow users to access the add-on web interface via the Home Assistant UI (through a proxy).

The problem is that almost every link/resource in WireGuard UI is absolut and bound to / and Home Assistant mounts the application to /hassio/ingress/local_wg-ui (not sure if it's always predictable). I'm not familiar with Svetle or the routing engine you are using in the go code but wondering if it would be possible to run WireGuard UI on another path then / or even better with relative links/resources.

Guess that it could be useful in other cases outside of Home Assistant as-well like example.com/vpn

[shanelord01]

I'm looking for a Web UI for the Hass.io addon for Wireguard as well.
https://github.com/hassio-addons/addon-wireguard

Hoping it can be achieved.

[suom1]

@theseal I realize that I never answered this, very sorry about that.
What you're asking is if the wg-ui binary can be run from somewhere else than /?
If I understood you correct, the answer is yes. In our current setup we have placed the binary in /usr/local/bin.

Or is this question related to HTTP and how it handles not being in the root of the URL?

[theseal]

It's a question related to HTTP and how it handles not being in the root of the URL. 🙃

[suom1]

It's a question related to HTTP and how it handles not being in the root of the URL. 🙃

I see. I haven't tried it myself, need to try it if it works. I just assumed that easiest way for everyone would be to proxy a subdomain(vhost) to :8080, but that's maybe not possible for all users.

[theseal]

I can't remember all the details from back in september but I tried to get it to work with Nginx as proxy and /vpn as path. Some things did work if Nginx rewrote the content with subfilter but not all resources played well with subfilter.

[theseal]

I looked in to this issue once again. Take in mind that this is the first time I work with Svelte and almost the first time I read golang.

Svelte

It works to change the publicPath (in output) to example "./" and the GUI works just fine

wg-ui/ui/webpack.config.js

Lines 41 to 46 in 2e7b8fd

	output: {
	publicPath: "/",
	path: __dirname + "/dist",
	filename: "[name].js",
	chunkFilename: "[name].[id].js"
	},

But it would require changes to some of the API calls to use relative paths. E.g:

wg-ui/ui/src/Clients.svelte

Line 9 in 2e7b8fd

let clientsUrl = "/api/v1/users/" + user + "/clients";

I'm not familiar enough with Svelte to propose an actual change.

Golang

Seems like the http router used in the project is not capable of handling non absolut paths

wg-ui/server.go

Lines 392 to 398 in 2e7b8fd

	router := httprouter.New()
	router.GET("/api/v1/whoami", s.WhoAmI)
	router.GET("/api/v1/users/:user/clients/:client", s.withAuth(s.GetClient))
	router.PUT("/api/v1/users/:user/clients/:client", s.withAuth(s.EditClient))
	router.DELETE("/api/v1/users/:user/clients/:client", s.withAuth(s.DeleteClient))
	router.GET("/api/v1/users/:user/clients", s.withAuth(s.GetClients))
	router.POST("/api/v1/users/:user/clients", s.withAuth(s.CreateClient))

It might solve some use cases by adding an option to configure another absolut path e.g "/vpn" as base url (which is past through to Svelte?) but my intention was to run wg-ui on a relative (dynamic) path.

This might not be a problem if you run wg-ui from behind a proxy (which I guess is recommended) that removes some parts if the path then the request is passed on to the server.

Rewrite in Nginx

Even if the current code can't handle another path right now I did manage to get it to work with some rewrites of the javascript in nginx:

location /vpn/ {
    sub_filter_types *;
    sub_filter_once off;

    sub_filter 'O.p="/"'  'O.p="/vpn/"';
    sub_filter 'href="/'  'href="/vpn/';
    sub_filter 'href:"/'  'href:"/vpn/';
    sub_filter 'src="/'  'src="/vpn/';
    sub_filter '/api' '/vpn/api';
    sub_filter 'path:"' 'path:"/vpn/';
    sub_filter '"/newclient"' '"/vpn/newclient"';
    sub_filter '"/client/"' '"/vpn/client/"';
    sub_filter '"/",{replace' '"/vpn/",{replace';

    proxy_pass http://127.0.0.1:8080/;
}

I guess that it's not very maintainable and a real kluge but it works real good 😀

[theseal]

I'm looking for a Web UI for the Hass.io addon for Wireguard as well. https://github.com/hassio-addons/addon-wireguard

Hoping it can be achieved.

It took me about a year (of mostly idling) but I managed to get it working in Home Assistant as an Addon. You can find it in my repository: https://github.com/theseal/addons-homeassistant

Patches are welcome 🙂