Blank page and assets errors

[lucagobbi]

First of all, thank you for sharing this integration! I was struggling with ingress configs and then your solution came out.

I installed the package via HACS and then i added in my configuration.yaml this:

ingress: 
  custom_addon_ingress: 
    title: Custom Addon Ingress 
    icon: mdi:cat 
    url: http://localhost:1865/admin

I can see that it is pointing to the correct instance but i reach a blank page and in the console i get some errors related to static assets like this one:

http://homeassistant.local:9000/admin/assets/Rubik-BoldItalic.ttf net::ERR_ABORTED 404 (Not Found)

I checked my addon and it is loading assets from that path but it cannot do it using the ingress function in HA.

Am i missing something in the config? Any guidance would be greatly appreciated! Thank you in advance!

[airdrummingfool]

I ran into this same issue when first attempting to set up Z-Wave JS UI as url: http://localhost:8091/#/control-panel. Splitting it to url: http://localhost:8091 and index: /#/control-panel worked for me.

It's in the docs (but not super obvious) that access is limited to paths that contain the full path in the url key.

index: string (optional, default empty) The relative URL of index page. If the url is http://127.0.0.1:45180/ui, all access must be under the /ui path; if the url is http://127.0.0.1:45180/ and the index is /ui, all paths of http://127.0.0.1:45180/ can be accessed.

So I'd suggest trying this config:

ingress: 
  custom_addon_ingress: 
    title: Custom Addon Ingress 
    icon: mdi:cat 
    url: http://localhost:1865
    index: /admin

and thanks to lovelylain for this integration, I've been wishing for it for years!

[lucagobbi]

Thank you for your answer. Actually, I've already tried that without success. Now I'm getting a 404 NOT FOUND. Maybe I've made mistake in the custom addon config.yaml file.

# other addon configs
ingress: true
ingress_entry: /admin
ingress_stream: true

[lovelylain]

@lucagobbi Not all backend services can be directly proxied, it must use relative links or do some special processing. relative link: <img src="admin/assets/image.jpg"> ok absolute link: <img src="/admin/assets/image.jpg"> not ok If you must use absolute paths, there are two ways to make ingress work properly. One is that the backend service actively uses the X-Ingress-Path http header to generate the correct absolute path. If you cannot modify the code of the backend service, you can try the second method. Deploy an nginx in front of HA, and then use nginx's sub_filter to correct the absolute links. For example:

  location /api/ingress/openwrt/ {
    set $ingress_path /api/ingress/openwrt;
    absolute_redirect off;
    proxy_redirect / $ingress_path/;
    proxy_cookie_path / $ingress_path/;
    sub_filter_once off;
    sub_filter '"/luci-static/' '"$ingress_path/luci-static/';
    sub_filter '"/cgi-bin/' '"$ingress_path/cgi-bin/';
    sub_filter 'href=/cgi-bin/' 'href=$ingress_path/cgi-bin/';
    # ......
  }

As you can see, using this method is also very troublesome, so if the back-end web page is written by yourself, please use relative links instead. Many projects such as adguardhome and nodered use relative links, so there will be no problem in proxying them. If it is an open source project, it is recommended to open an issue to them to support the X-Ingress-Path http header. You can visit https://github.com/blakeblackshear/frigate/issues/541 for more details.

[lucagobbi]

@lovelylain Thank you very much for the clear explanation. Sadly I cannot modify the back-end service, maybe I'll try the proxy way.