I guess it's encryption and NGINX

Configuration
1

Ok, so I now have my system up and running and all is smooth and working, so the next step…customizing What I am trying to do is add a custom card to my UI. I downloaded the “power-distribution-card” and got it working. For this I used to the UI to add a resource to Lovelace:

url: /local/power-distribution-card.js
type: module

And then added a manual card to the UI with following code to get it to display:

type: 'custom:power-distribution-card'
entities:
  - solar:
      entity: sensor.solar_pv_power
  - grid:
      entity: sensor.solar_grid_power
      invert_value: true
  - home:
      entity: sensor.solar_power_consumption
      invert_value: true
  - battery: sensor.solar_storage_power
center:
  type: glance
  entities:
    - sun.sun

So far so good…it works and shows up the way I want, HOWEVER…

It only works when I use my external url to access my server. When I use my internal url, or also when I use my iOS app, it doesn’t work. It tells me “custom element doesn’t exist”.

I have similar problems when trying to use the file editor or terminal addons. They both give me a 401: Unauthorized error.

My guess is that it has to do with the setup of encryption and NGINX. That basically all works, I can connect securely, got my 443 port fowarded to 443 and encrypted connection works. Below are my relevant configs:

configuration.yaml:

homeassistant:
  external_url: https://xxx.duckdns.org
  internal_url: http://192.168.76.9:8123

NGINX config:

domain: xxxx.duckdns.org
certfile: fullchain.pem
keyfile: privkey.pem
hsts: max-age=31536000; includeSubDomains
cloudflare: false
customize:
  active: false
  default: nginx_proxy_default*.conf
  servers: nginx_proxy/*.conf

DuckDNS Config:


lets_encrypt:
  accept_terms: true
  certfile: fullchain.pem
  keyfile: privkey.pem
token: xxxxx
domains:
  - xxxx.duckdns.org
aliases: []
seconds: 300

I have read some posts about having to set up proxies to internal dockers…but…that is where I am not comfortable with yet, so anyone who could point me in the right direction to solve this?

Thanks in advance

2

Bumping this topic in the hope there is someone seeing it. I spend another long night trying and reading and have not been able to find a solution. I know there must be a way and to the expert it may be simple…but I am lost, so hoping for the community here…

3

I haven’t experienced any add-on or card problems. My NGINX and DuckDNS configurations match yours. I currently do not have trusted_proxies configured. I do use trusted_networks, but that only applies to internal traffic:

# authentication services
  auth_providers:
   - type: homeassistant
   - type: trusted_networks
     trusted_networks:
       - 192.168.x.0/24
       - 127.0.0.1
       - fd00::/8
     trusted_users:
       192.168.x.0/24: 
         - !secret gakid
         - !secret sskid
       127.0.0.1: 
         - !secret gakid
         - !secret sskid
       "fd00::/8":
         - !secret gakid
         - !secret sskid

I’m shut-in here, but going out today. I’ll test my setup further. I’ll let you know if I see similar problems. If i do, we’ll solve the issue.

4

where is the js file located in your config directory?

5

it is under /config/www/community/power-distribution-card/power-distribution-card.js

6

well, your resource path is wrong, that’s why it’s not loading and it’s using cache when connected locally because that address has the js cached.

Change your resource to

url: /local/community/power-distribution-card/power-distribution-card.js
type: module

If you’re using HACS, you can simply use

url: /hacsfiles/power-distribution-card/power-distribution-card.js
type: module

fyi:

/local maps to the /config/www folder.

and

/hacsfiles maps to /config/www/community folder only if you have HACS installed.

7

THANKS!!! That is it. I knew it had to be simple, but this was exactly the info I needed…!! Now the card works.

The only thing I still do not get to work is the File Editor or Terminal Addon when using the local adres. It always gives me a 401:Unauthorized. Guess that is more along the subdomain proxy issue which I do not understand (yet)…