External access - only initial state page loads

Installation Home Assistant OS
1

I am trying to setup external access to my hass.io setup, and I am able to get to it using DuckDNS. The state page loads and I am able to control some lights. The problem is that if I click on any other sidebar link it gives me an infinite loading indicator. Going through hassio.local I can operate everything fine.

Looking in the js console I see this when trying to load a second page:
frontend-622a02e67c4395ecfd7ccaeb704f00ad.html:1 GET https://***.duckdns.org/frontend_latest/panels/ha-panel-hassio-421266c5f02dbccd48443907251fa741.html net::ERR_FAILED

I’m forwarding port 80 to 80 and port 443 to 8123 on the rPi. Is there something i’m missing? I’m thinking it is something with Let’s Encrypt and SSL because I can get it working without https enabled. The cert comes up as valid when I load the main page.

2

So I finally figured it out - I tried accessing it later on from my phone, which worked perfectly over the cell network. My issue was only when connecting locally on the same network.

The fix was to run DNSMasq and add my rPi as a host:

{
  "defaults": [
    "8.8.8.8",
    "8.8.4.4"
  ],
  "forwards": [],
  "hosts": [
    {
      "host": "yourdomain.duckdns.org",
      "ip": "192.168.86.37"
    }
  ]
}

And then set the Pi as the DNS server on your router (or computer if you override it.) Now everything is working perfectly.