resoai / TileBoard

A simple yet highly configurable Dashboard for HomeAssistant
MIT License
1.63k stars 277 forks source link

No standalone usage possible – URL overrides breaking function #827

Open mh166 opened 2 years ago

mh166 commented 2 years ago

Hi there,

first of all: thank you so much for this project. This is just what I need to have: a dashboard that can be used standalone with no authentication required. Great for my use case and, even better, great looking as well! 😊

I only got a problem that's getting in my way right now: at the moment, I can't use it as a standalone web page as the servers URLs get overriden with wrong values.

Here's part of my config (copied from example config):

var CONFIG = {
   // ...
   serverUrl: 'http://' + location.hostname + ':8123',
   wsUrl: 'ws://' + location.hostname + ':8123/api/websocket',
   authToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9....',
   // ...
}

When using TileBoard from within the HA UI using Ingress, on the page the following overrides appear in the HTML:

   <script>
      window.AUTH_TOKEN_OVERRIDE = "41ff...";
      window.SERVER_URL_OVERRIDE = location.protocol + "//" + location.host;
      window.REST_URL_OVERRIDE = location.protocol + "//" + location.host + "/api/hassio_ingress/st5PX.../";
      window.WS_URL_OVERRIDE = location.protocol.replace("http", "ws") + "//" + location.host + "/api/hassio_ingress/st5PX.../websocket";
   </script>

For standalone usage, I'm using port 8888 and set ssl and useExternalUrl to false. Unfortunately, (incorrect) overrides appear in the HTML here, too:

   <script>
      window.AUTH_TOKEN_OVERRIDE = null;
      window.SERVER_URL_OVERRIDE = "null";
      window.REST_URL_OVERRIDE = null;
      window.WS_URL_OVERRIDE = "null/api/websocket";
   </script>

With that, none of the configured elements show up (besides a nice teal background color) and I'm getting the following error inthe JS console:

image

As you might notice, window.SERVER_URL_OVERRIDE is set to a string of null and window.WS_URL_OVERRIDE is coming up as a string as well. In combination with scripts/init.js:31, this seems to be the reason why it blows up:

      ApiProvider.setInitOptions({
         wsUrl: window.WS_URL_OVERRIDE || window.CONFIG.wsUrl,   // <---- 
         authToken: window.AUTH_TOKEN_OVERRIDE || window.CONFIG.authToken,
      });

As a string of null is considered true-ish, the CONFIG-value will never be used, leading to a defunct TileBoard.

While I hope this identifies the cause, I'm unfortunately not qualified enough to repair that issue. So I'm hoping you'll be able to help me out. 😁

rchl commented 2 years ago

When using the addon the idea is that those URLs are automatically detected and don't need to be manually set so I would say that this is the main issue here.

I'm not sure why though, without having some way of reproducing this issue.

Some time before Homeassistant had settings in the UI for defining the "External" URL but it seem that this is gone now. There still seems to be a way to set those from the configuration file (https://www.home-assistant.io/docs/configuration/basic/) so you could try that if you want to get this working before I have a chance to look closer.

I would guess that it's just not possible to automatically detect the external URL in some cases, in which case I would probably have to just introduce that setting in the addon settings itself.

ateodorescu commented 1 year ago

To solve this problem I had to include the following statements in my config.js file:

window.AUTH_TOKEN_OVERRIDE = 'my-auth-token';
window.SERVER_URL_OVERRIDE = 'http://' + location.hostname + ':8123';
window.WS_URL_OVERRIDE = 'ws://' + location.hostname + ':8123/api/websocket';

Just add those lines before or after the CONFIG declaration.

Using the External url didn't work so I had to do the above trick.