[Feature Request] Way to choose between internal or external IP-address in href or use IP from browser in links

[AlexanderBottlang]

How it's set up right now
In all the "href"-links I use the local IP of my server to link to the services and pages. The IP-address is always the same, only the port differs. This all is fine when I'm inside of my local network.
However I do have an external IP and opened all corresponding ports in my router so I can access all the control panels from outside of my local network. I use a Dyncamic DNS Service (https://www.changeip.com/), so I don't have changing external IPs, since I'm not paying my ISP a monthly fee for a fixed IP address.
But that means I can not use my Homepage, because all my links point to my local IP address within my local network. Or I would have to also use the external IP address when I'm in my local network, generating unnecessary outbound traffic.

How I would like it to be

• Using a variable for the ip address would be sufficent. Unlike [Feature Request] Allow variables in config file #60 a variable defined in one of the YAML-files (or a new one) would be enough.
• another approach would be to just read the ip address from the url in the browser and use that in all links. So I basically only define the port (and whatever follows) in the YAML-files. Maybe there could also be a placeholder for that like $browser-address$ and I just use that and add my port.

An example for both approaches could look like this, either the variable is defined somewhere else or it reads its value from the URL:

    - Plex:
        href: :32400
        description: Media Server

or

    - Plex:
        href: $browser-address$:32400/web/index.html
        description: Media Server

• another idea would be to define two different links. But that would mean some UI changes, where would I want the second link for the same item?
  Or maybe one would define two addresses (one with numbers [internal] and one alphanumeric [external]) and Homepage would automatically choose a link based on what is in the URL right now.
• another variant is based on the previous idea. But for different ports in the local or remote network.
  So Plex might be on port 32400 in my local network, but in my router I'm forwarding 40000 from remote to 32400 internal.
  Again, Homepage would choose which port to link to based on what is in the URL after :// and before the port-number or first slash /
  Example:

    - Plex:
        href: :32400/web/index.html :40000/web/index.html
        description: Media Server

or this may be easier to read

    - Plex:
        href: :32400/web/index.html
        href-ext: :40000/web/index.html
        description: Media Server

I hope all is clear. If not please don't hesitate to ask for clarification.
This is my first issue ever, so please bare with me.
I could imagine some other service already doing somehting like this. But I have no idea how I would find it or how they went about this.

[trythatagain]

Have you thought about or looked at tailscale?

Tailscale it's free and based on wireguard, I use it with pc running Syncthing at my son's house, so I can do simple remote backups.

[AlexanderBottlang]

Have you thought about or looked at tailscale?

Tailscale it's free and based on wireguard, I use it with pc running Syncthing at my son's house, so I can do simple remote backups.

No I have not, was not aware of it. Thanks a lot, looking into it now. Headless seems to be a nice addition. I guess that's easier and especially more secure than always punching holes into my router when I add a new service.

[JazzFisch]

I've been running PiHole internally and have it serve up the internal IP address for the dynamic DNS name when I'm inside my network.

[C8opmBM]

As @JazzFisch mentioned (I run the same setup) splitting DNS is the easier solution.
Take a look here: https://virtualize.link/split-dns/

If/when I have local-only containers, I can still access them outside the network with wireguard.

[JazzFisch]

@C8opmBM great link! The only change I would make is that PiHole now allows you to create DNS Records and CNAMEs via the UI.

[AlexanderBottlang]

Hmm interesting ideas, thanks. Do you have a link or something so I could read up on that PiHole solution? Sounds intriguing. I also have PiHole running but only as a adblocker, am I missing it's full potential?

Unfortunately Tailscale is not really what I'm looking for. Sure, an easy VPN is good. But what if I want to access something on my server on a new device where I don't have the rights to install additional software? That is rather unlikely but not impossible.

I could only open the RDP port and then always use a browser on that RDP-Desktop so I'm always in the local network. But just opening a page in the normal browser is way cooler. Even if I have to have a perforated firewall for that... Still not entirely sold but I'll keep trying new stuff.

[C8opmBM]

The idea was to setup a reverse proxy for your domain and subdomains you use for your containers (read up on SWAG or example, create cnames for your subdomains with cloudflare) and access them using subdomain domain both for lan and outside with split DNS.

[poudenes]

Is this still going on? For me this would be nice as well. I have the dashboard done now. All have href with local IP of my Synology NAS and their ports. But on my work I can access the dashboard also (behind a Cloudflare worker. So I have to login first) but then it will be very easy to have a second href or an icon in a corner that have the external link to open some services. Like Radarr, Sonarr and some other tools that I use

When you use labels in docker compose:

      - homepage.href=http://192.168.100.62:7878
      - homepage.href.external=https://radarr.example.com

When you use the config files:

        href: http://192.168.100.62:7878
        href.external: https://plex.example.com

The box itself is the HREF and left next to the Status green icon a symbol for HREF.EXTERNAL :

[finder39]

    - Plex:
        href: $browser-address$:32400/web/index.html
        description: Media Server

Something like this is really needed, as I usually access this internally but when I am away from home I access it via Tailscale, which means all services would have a different IP address.

On top of that, services like Krusader also require the IP a second time in the URL (super weird), and so having as a variable would be super helpful.

    - Krusader:
        icon: https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/krusader.png
        href: http://$browser-address$:6080/vnc.html?resize=remote&host=$browser-address$&port=6080&autoconnect=1
        container: binhex-krusader

[berkeoznalbant]

I'd really love if this feature gets added. I'm using cloudflare tunnel and have my own domain name. I don't want to create two different homepage containers.

[rlimaeco]

I know , I feel the same pain :/

[Criomby]

I think this is exactly what you are looking for:

I coded a slider in the footer which allows you to change the local domain of your services (e.g. http://server.local:8081 set as href in the dashboard) to the current address of your browser (just the domain part will be changed to the current domain like http://100.23.67.62:8081, all other parts like scheme, port, etc. will be retained) and switch between them by clicking the slider:

Gist

This and can be used by just pasting the code into your custom.js and setting the domain to be changed to the current browser domain at the top of the code (explained in the Gist).

[kezerco]

I think this is exactly what you are looking for:

I coded a slider in the footer which allows you to change the local domain of your services (e.g. http://server.local:8081 set as href in the dashboard) to the current address of your browser (just the domain part will be changed to the current domain like http://100.23.67.62:8081, all other parts like scheme, port, etc. will be retained) and switch between them by clicking the slider:

Gist

This and can be used by just pasting the code into your custom.js and setting the domain to be changed to the current browser domain at the top of the code (explained in the Gist).

Hello,

Thanks to Criomby's idea and code, I modified and optimized to the code a bit more. Simply because it didn't work for me and I wanted to add some exceptions.

Here it is: link

[Cyberbeni]

I think you want to achieve "same host but different port" relative links instead of hardcoding internal/external links in config. I have this solution in my custom js, which also rewrites certain deeplinks on devices that don't support multitouch (i.e.: on my PC):

const supportsDeeplink = navigator.maxTouchPoints > 1

const all = document.getElementsByTagName('a')
let hostname = window.location.hostname
if (hostname.endsWith('/')) {
  hostname = hostname.slice(0, -1)
}
const prefix = window.location.protocol + '//' + hostname

for (let i=0, max=all.length; i < max; i++) {
  if (all[i].href.startsWith('http://192.168.1.6')) {
    all[i].href = prefix + all[i].href.slice('http://192.168.1.6'.length)
  } else if (!supportsDeeplink) {
    if (all[i].href.startsWith('homeassistant://navigate')) {
      all[i].href = prefix + ':8123' + all[i].href.slice('homeassistant://navigate'.length)
    } else if (all[i].href.startsWith('org.jellyfin.expo://')) {
      all[i].href = prefix + ':8096/' + all[i].href.slice('org.jellyfin.expo://'.length)
    }
  }
}

[avirakesh]

Here's an further pared down version of the script (taken and modified from the awesome toggle make by @Criomby

The idea is to set up services with a sentinel url (http://homepage_host in this case), and the script will simply replace those hrefs with whatever the browser is pointing at.

My usecase is that I access the server locally via mDNS (as MyServer.local), and over zerotier with custom DNS (as MyServer.home). So I wanted the links to be updated according to how the homepage is being accessed.

/**
 * Updates the sentinel hrefs on the page.
 *
 * This method iterates through all sentinel elements and sets their href
 * attributes to the current URL.
 */
const updateSentinelHrefs = () => {
    // Define the sentinel host URL
    const SENTINEL_HOST = "http://homepage_host";

    // Get all elements with the class "service-title-text"
    // These are all hrefs defined in services.yaml
    // (I think, not exhaustively verified)
    const serviceWidgetsLink = document.getElementsByClassName("service-title-text");

    // Get the current browser address
    let browserAddr = window.location.protocol + "//" + window.location.hostname;

    // Loop through each sentinel element
    for (let i = 0; i < serviceWidgetsLink.length; i++) {
        // Get the current href attribute of the sentinel element
        let href = serviceWidgetsLink[i].href;

        // Check if the href contains the sentinel host URL
        if (href.includes(SENTINEL_HOST)) {
            // Replace the sentinel host URL with the current browser domain
            serviceWidgetsLink[i].href = href.replace(SENTINEL_HOST, browserAddr);
        }
    }
};

updateSentinelHrefs();

It would be amazing if this was natively a part of homepage!