How to use with Traefik reverse proxy #2655

jerome83136 · 2022-09-10T17:06:23Z

jerome83136
Sep 10, 2022

Hello,

I just pulled the latest docker image and I'm unable to configure the "base path" of the application in order to use it behind a reverse proxy.

I modified this file: config/app.js and changed this:
exports.base = '/zwave/';

Then restarted the docker.

Then trying to access the app: http://[IP]:8091/zwave

I get these URI generated on these HTTP status code on my browser:

http://[IP]:8091/zwave --> HTTP/200
http://[IP]:8091/zwave/static/css/app.e7f63f8bf06c7dd2f2ba.css --> HTTP/404

It seems the config works because URIs are generated with "/zwave"; but static elements are not reachable on the new path.
Did I miss something ?

When manually changing the static URI; it works:
http://[IP]:8091/static/css/app.e7f63f8bf06c7dd2f2ba.css --> HTTP/200

I was also unable to apply the documented procedure here: https://zwave-js.github.io/zwavejs2mqtt/#/usage/reverse-proxy?id=using-the-configuration

Thank you for your help
Best regards

Answered by tjmv

Sep 15, 2022

I encountered the same issues when I set up the service today and happened to see the commit mentioning this issue. The BASE_PATH environment variable alone is not enough and has the same effect as the header: This adds the prefix, but the server is not aware of it and expects everything to be served from the root. However, you can work around it by first adding the path in the application and then strip it in the proxy.

Using Traefik, you need two middlewares or one and the BASE_PATH variable to get it working right now:

zwave2mqtt-inject-basepath:
  headers:
    customRequestHeaders:
      X-External-Path: "/zwave/"
zwave2mqtt-strip-basepath:
  stripprefix:
    prefixes: "/zwave"

View full answer

robertsLando · 2022-09-12T07:43:51Z

robertsLando
Sep 12, 2022
Maintainer

Did you also tried the http header way? what's your reverse proxy configuration?

0 replies

jerome83136 · 2022-09-12T08:10:34Z

jerome83136
Sep 12, 2022
Author

Hello, No I didn't. I'm using Traefik as a reverse proxy so I have to figure out how to implement this method on it. Do you think I should give up with the "path" method? (I think the possibility to set the path thought a docker environment variable could help a lot of people implementing this easier 😉) Le lun. 12 sept. 2022 à 09:44, Daniel Lando ***@***.***> a écrit :

…

Did you also tried the http header way? — Reply to this email directly, view it on GitHub <#2637 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJEQYH6TQ77P6DHAOVHZALV53NMFANCNFSM6AAAAAAQJNAOTI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

0 replies

jerome83136 · 2022-09-12T11:22:31Z

jerome83136
Sep 12, 2022
Author

Here is my Traefik configuration (reverse proxy)

accessLog: {}
log:
  level: INFO
providers:
  file:
    filename: /etc/traefik/traefik.yml
    watch: true
api:
  dashboard: true
  insecure: true
entryPoints:
  web:
    address: ":80"
http:
  routers:
    api:
      rule: Host("domotique.maison.lan")
      service: api@internal
    ##zwave2mqtt
    zwave2mqtt:
      rule: Host("domotique.maison.lan") && PathPrefix("/zwave/")
      service: zwave2mqtt
      priority: 1000
  services:
   zwave2mqtt:
    loadBalancer:
     servers:
      - url: "http://192.168.1.253:8091"

But I don't think it will be usefull here as the path is not working by connecting directly to the zwave2mqtt docker instance (http://[IP]:8091/zwave)

I think the static pages are not inheriting the "path" configuration. What do you think ?

Best regards

0 replies

robertsLando · 2022-09-12T11:46:39Z

robertsLando
Sep 12, 2022
Maintainer

Could you set custom headers? You should add this header:

X-External-Path /zwave;

0 replies

robertsLando · 2022-09-12T11:50:21Z

robertsLando
Sep 12, 2022
Maintainer

Just commited a change to add BASE_PATH env var

0 replies

jerome83136 · 2022-09-15T16:14:05Z

jerome83136
Sep 15, 2022
Author

Hello,

Just tried the header way with Traefik; here is the config:

http:
  routers:
    ##zwave2mqtt
    zwave2mqtt:
      rule: Host("domotique.maison.lan") && PathPrefix("/zwave/")
      service: zwave2mqtt
      priority: 1000
      middlewares:
        - zwave2mqtt
  middlewares:
    zwave2mqtt:
      headers:
        customRequestHeaders:
          X-External-Path: "/zwave"
        customResponseHeaders:
          X-External-Path: "/zwave"
  services:
   zwave2mqtt:
    loadBalancer:
     servers:
      - url: "http://ZWAVE2MQTTIP:8091"

Sadly, it still doesn't work.

The "X-External-Path" header is set with the value "/zwave" and when reaching zwavemqtt trought the reverse proxy; the "root" page is accesible with the "/zwave" URI
The static pages inherited the "/zwave" URI; but they are still unreachable (404)

This is the same behaviour than with the "path" config option.

Will try with the "BASE_PATH" environment variable when it is released.

Best regards

0 replies

tjmv · 2022-09-15T18:04:42Z

tjmv
Sep 15, 2022

I encountered the same issues when I set up the service today and happened to see the commit mentioning this issue. The BASE_PATH environment variable alone is not enough and has the same effect as the header: This adds the prefix, but the server is not aware of it and expects everything to be served from the root. However, you can work around it by first adding the path in the application and then strip it in the proxy.

Using Traefik, you need two middlewares or one and the BASE_PATH variable to get it working right now:

zwave2mqtt-inject-basepath:
  headers:
    customRequestHeaders:
      X-External-Path: "/zwave/"
zwave2mqtt-strip-basepath:
  stripprefix:
    prefixes: "/zwave"

1 reply

tomdavidson Jan 18, 2024

I understand this is answered but when I set BASE_PATH=/zwavejs/" and add the Traefik config as lables, it does not work. I get the WSOD and 404s on the service worker and what not. There must be more config details, or am I getting the labels wrong?

   - traefik.http.middlewares.zwavejs.headers.customrequestheaders.X-Script-Name=X-External-Path:/zwave/
   - traefik.http.middlewares.zwavejs-strip-basepath.stripprefix.prefixes=/zwave

The page source on the WSOD suggests that JS is not enabled and maybe it is getting blocked but its only through the proxy - when I access the zwavejs service directly, the UI loads just fine.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
		/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="application-name" content="Z-Wave JS UI" />
		<meta name="apple-mobile-web-app-title" content="Z-Wave JS UI" />
		
		<link
			rel="apple-touch-icon"
			sizes="180x180"
			href="[apple-touch-icon-180x180.png](http://192.168.100.100/zwavejs/apple-touch-icon-180x180.png)"
		/>
		<link rel="icon" href="[favicon.ico](http://192.168.100.100/zwavejs/favicon.ico)" sizes="any">
		<!-- <link rel="icon" href="favicon.svg" type="image/svg+xml"> -->
		<link rel="manifest" href="[manifest.webmanifest](http://192.168.100.100/zwavejs/manifest.webmanifest)">
		
		<link rel="shortcut icon" href="[favicon.ico](http://192.168.100.100/zwavejs/favicon.ico)" />

		<meta name="msapplication-TileColor" content="#da532c" />
		<meta name="theme-color" content="#ffffff" />
		<title>Z-Wave JS UI</title>
		<meta name="description" content="Z-Wave JS UI">

		<script type="module" crossorigin src="[./assets/index-253abddd.js](http://192.168.100.100/zwavejs/assets/index-253abddd.js)"></script>
		<link rel="stylesheet" href="[./assets/index-6f3c714d.css](http://192.168.100.100/zwavejs/assets/index-6f3c714d.css)">
	<link rel="manifest" href="[./manifest.webmanifest](http://192.168.100.100/zwavejs/manifest.webmanifest)"><script id="vite-plugin-pwa:register-sw" src="[./registerSW.js](http://192.168.100.100/zwavejs/registerSW.js)"></script></head>

	<body class="hidden-scrollbars">
		<noscript>
			<strong
				>We're sorry but Z-Wave JS UI doesn't work properly without
				JavaScript enabled. Please enable it to continue.</strong
			>
		</noscript>
		<div id="app"></div>
		
		<!-- built files will be auto injected -->
	</body>
</html>

jerome83136 · 2022-09-16T08:28:02Z

jerome83136
Sep 16, 2022
Author

Oh, great tip Will try it asap Thank you ! Le jeu. 15 sept. 2022 à 20:04, tjmv ***@***.***> a écrit :

…

I encountered the same issues when I set up the service today and happened to see the commit mentioning this issue. The BASE_PATH environment variable alone is not enough and has the same effect as the header: This adds the prefix, but the server is not aware of it and expects everything to be served from the root. However, you can work around it by first adding the path in the application and then strip it in the proxy. Using Traefik, you need two middlewares or one and the BASE_PATH variable to get it working right now: zwave2mqtt-inject-basepath: headers: customRequestHeaders: X-External-Path: "/zwave/" zwave2mqtt-strip-basepath: stripprefix: prefixes: "/zwave" — Reply to this email directly, view it on GitHub <#2637 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJEQYHUCLEMN26AO7QE77DV6NQMJANCNFSM6AAAAAAQJNAOTI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

0 replies

jerome83136 · 2022-09-16T18:53:05Z

jerome83136
Sep 16, 2022
Author

it worked with the @tjmv solution
Thanks !
Regards

0 replies

ryanwinter · 2022-11-11T06:23:34Z

ryanwinter
Nov 11, 2022

This works, by getting the reverse proxy to strip off the base_path, but now the ui is only available via the reverse proxy, and not directly which is a shame.

0 replies

yolani · 2023-04-21T19:25:01Z

yolani
Apr 21, 2023

Can somebody maybe post the complete final traefik config? I am still struggeling to make this work. Here is my config inside docker compose, I put everything inside the containers labels. ALli get with this is a blank page with the "Z-Wave JS UI" title and no error logs in neither zwavejs container nor traefik. I did not set the BASE_PATH variable

 labels:
      - traefik.enable=true
      - traefik.http.routers.zwavejs.rule=Host(`$DOMAIN_IOT`) && PathPrefix(`/zwave`)
      - traefik.http.routers.zwavejs.entrypoints=websecure
      - traefik.http.routers.zwavejs.tls=true
      - traefik.http.routers.zwavejs.tls.certresolver=letsencrypt
      - traefik.http.services.zwavejs.loadbalancer.server.port=8091
      - traefik.http.middlewares.zwavejs-inject-basepath.headers.customRequestHeaders.X-External-Path=/zwave/
      - traefik.http.middlewares.zwavejs-strip-basepath.stripprefix.prefixes=/zwave
      - traefik.http.routers.zwavejs.middlewares=authelia@docker
      - traefik.http.routers.zwavejs.middlewares=zwavejs-inject-basepath@docker
      - traefik.http.routers.zwavejs.middlewares=zwavejs-strip-basepath@docker

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use with Traefik reverse proxy #2655

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 11 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to use with Traefik reverse proxy #2655

jerome83136 Sep 10, 2022

Replies: 11 comments · 1 reply

robertsLando Sep 12, 2022 Maintainer

jerome83136 Sep 12, 2022 Author

jerome83136 Sep 12, 2022 Author

robertsLando Sep 12, 2022 Maintainer

robertsLando Sep 12, 2022 Maintainer

jerome83136 Sep 15, 2022 Author

tjmv Sep 15, 2022

tomdavidson Jan 18, 2024

jerome83136 Sep 16, 2022 Author

jerome83136 Sep 16, 2022 Author

ryanwinter Nov 11, 2022

yolani Apr 21, 2023

jerome83136
Sep 10, 2022

Replies: 11 comments 1 reply

robertsLando
Sep 12, 2022
Maintainer

jerome83136
Sep 12, 2022
Author

jerome83136
Sep 12, 2022
Author

robertsLando
Sep 12, 2022
Maintainer

robertsLando
Sep 12, 2022
Maintainer

jerome83136
Sep 15, 2022
Author

tjmv
Sep 15, 2022

jerome83136
Sep 16, 2022
Author

jerome83136
Sep 16, 2022
Author

ryanwinter
Nov 11, 2022

yolani
Apr 21, 2023