zwave-js-ui/docs/usage/reverse-proxy.md

Accessing From Behind a Proxy

There are two ways to enable access to Z-Wave JS UI from behind a reverse proxy that uses subpaths to serve the pages and services.

You can use a header to signal where the external path is or you can configure the base path. In both cases these are dynamic configurations, so you can deploy them without having to rebuild the frontend.

Using an HTTP header

You can pass the external path by setting the X-External-Path header, for example suppose you had the following nginx configuration. Example with /hassio/ingress:

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    listen 9000 default_server;
    listen [::]:9000 default_server;

    location /hassio/ingress/ {
        rewrite ^ $request_uri;
        rewrite '^/hassio/ingress(/.*)$' $1 break;
        proxy_set_header X-External-Path /hassio/ingress;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_pass http://zwave:8091$uri;;
    }
}

This will tell the application to serve the application and relevant elements under /hassio/ingress/.

In case you are using the ingress of Home Assistant you will want to pick up the X-Ingress-Path; and map it, something along these lines:

  proxy_set_header X-External-Path $http_x_ingress_path;

Using the configuration

You can simply change the config/app.js and set base to whatever is the subpath you will be serving this from.

As an example, if your proxy is placing the app behind /zwave/ your configuration would look like:

module.exports = {
  title: 'Z-Wave JS UI',
  storeDir: process.env.STORE_DIR || joinPath(true, 'store'),
  base: '/zwave/',
  port: 8091
}