Custom Card Setup with NGINX and DuckDNS

General
1

Hi everyone,

I’ve been working on customizing my Home Assistant setup and wanted to share my experience in case it helps someone else. I recently added a custom card to my Lovelace UI using the power-distribution-card module. It’s been a great addition to my dashboard, providing a clear overview of my solar power system.

Here’s how I got it working:

  1. Adding the Resource: I navigated to the Lovelace UI and added a new resource with the following configuration:
    yaml
    url: /local/power-distribution-card.js
    type: module

  2. Configuring the Card: I then created a manual card with the following code to display the power distribution:
    yaml
    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:
    entity: sensor.solar_storage_power
    center:
    type: glance
    entities:
    • sun.sun

  1. Testing Across Devices: The card works perfectly when accessed via my external URL, but I ran into issues when using my internal URL or the iOS app. The error message I received was “custom element doesn’t exist”. I suspect this has to do with my NGINX and DuckDNS setup, specifically related to how resources are served internally versus externally.

  2. NGINX Configuration: My current NGINX setup is configured with DuckDNS for secure external access. Here’s a snippet of my configuration:
    yaml
    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

  3. DuckDNS Setup: My DuckDNS configuration is straightforward:
    yaml
    lets_encrypt:
    accept_terms: true
    certfile: fullchain.pem
    keyfile: privkey.pem
    token: xxxxx
    domains:

  1. Troubleshooting: I’ve read that setting up proxies to internal Docker containers might resolve this, but I’m still not entirely comfortable with that setup. I’d appreciate any guidance on how to configure NGINX correctly to serve custom cards both internally and externally without encountering the 401: Unauthorized error I sometimes get when using file editors or terminal add-ons.

  2. Next Steps: I plan to explore the proxy settings further and see if there are any community solutions or best practices for this specific issue. In the meantime, I’m excited about how much I’ve been able to customize my Home Assistant setup and look forward to resolving this final hurdle.

Thanks in advance for any advice or insights!

Best regards,
[Your Name]