Trouble serving files from the www directory

Installation Home Assistant OS
1

Hi all,

My PI’s SD card started dying. So, I just moved my system from a PI to a new NUC (yay! more projects). Since I wasn’t rigorous about snapshotting, I’ve had to move things over piecemeal from the SD card as I’ve recovered it.

I’m running Hassio in Docker according to HA’s instructions. I got everything up and running in about an hour. I’ve been using the Cloud9-IDE to upload files and copy-paste config yaml. All of my sensors are online and working fine. But as I started to move my lovelace over I found that I couldn’t get any of my custom cards working. I have a huge UI full of “Custom element doesn’t exist:” red boxes.

When I look in the config/www folder I see the standard community folder and all of its subfolders with the .js files (uploaded through Could9). I thought it might have been something about the way I uploaded the files so I deleted the folder and had HACS re-install all of the modules. Still nothing. I continued poking around and noticed that my theme background image won’t load from the www folder. I can’t even make a picture card to the image.

Is there something different about how the config/www folder gets served when running in the docker installation? I did some searching and wasn’t able to find anything relevant. Is there something I should look at on the NUC side to see if its blocking? NUC is running Ubuntu 18.

I also have to use localhost:8123, hassio.local:8123 doesn’t resolve. It is accessible from another laptop at its static IP from the router. Not sure if that’s relevant. I’m going to use Pi-Hole to fix that problem anyways.

I’ve done a few restarts down the whole line, HassIO, supervisord, and the whole NUC.

Here’s an ls of the directory structure:

➜  /config ls -l www/community/button-card 
total 160
-rw-r--r--    1 root     root        130932 Sep 20 20:54 button-card.js
-rw-r--r--    1 root     root         30352 Sep 20 20:54 button-card.js.gz

Here’s a snippet from the lovelace.

  - url: /community_plugin/button-card/button-card.js
    type: module

I have tried using the local path

  - url: /local/community/button-card/button-card.js
    type: module

Still didn’t work.

Thanks for the help!

2

Could be a permission issue, change the owner of the www folder to the home assistant user.

The second config you have should be correct.


  - url: /local/community/button-card/button-card.js
    type: module
1 Like
3

They all list root:root as the owner. I tried doing a chown -R root:root www anyways incase it was a some weird carry-over. Rebooted the whole stack. Still nothing.

4

Both configs are correct, and this is Hassio (which run HA as root) so it’s not a premission issue.

In hacs, can you see the file if you click open plugin?

1 Like
5

I can (before reading I didn’t even know that was possible!)
It redirects to http://XXX:8123/community_plugin/button-card/button-card.js and I can see the javascript.

6

Good, so the file and premissions are fine,
Are you using ui-livelace or UI (web) to edit your config?

7

I’m using the web interface. I was able to recover the json from from old install from the .storage directory, I used some quick python to convert it back to yaml and copy-pasted it into the web-ui of my new instance.

8

Check the browser console for errors (and clear you cache before you do that)

9

I also find with HA that at least in Chrome that if you press F12, then right click on the round “refresh icon” and select “Empty Cache and Hard Reload” that a lot of times this will clear problems.

10

Hmmm, the plot thickens. I cleared the cache, re-logged in (so I know the cache cleared) still no button card and still no background image. No errors in the console. I made a picture card to display a local image in the www/ folder. No image, the console reports a 404 error for the image. When I go to the image directly I get a 404.

I tried @carltonb’s F12 reload trick. Still nothing.

11

Sorry if I confused you with my misinformation about the wrong permissions, I was somehow reading another post and your post and mixed things up. :sweat_smile:

12

I just tried adjusting the http component to match the static IP incase that was the issue.

http:
  base_url: XXX.static.ip.XXX:8123

Rebooted the whole stack. Still nothing.

13

Although after changing the base_url I am able to got to http://XXX.static.ip.XXX:8123/local/image.jpg to see the image. But the console still reports a 404 error when it tries to load the image.

Could it be an ssl issue? I don’t have any specific SSL setup. My previous instance used duck-dns but I specifically didn’t copy those sections over as I’m planning on doing the Ingress route now.

Edit:
Now it seems like I can get the image to load through the picture-card. I’ve tried re-clearing the cache. I can get the image to stay but it doesn’t seem to try to load any of the js modules.

14

It’s not SSL or base_url, those files are loaded with a relative path

15

EUREKA!!!

It looks like it was two problems masquerading as one.

Problem 1: I needed to set the http component to the static IP. This is what let me correctly start to load images from both within and outside of HA. Once I fixed this I couldn’t figure out why the js files were never even being queried by the browser. This led me to find

Problem 2: When I converted the json version of my lovelace config to a yaml for copy-pasting there must’ve been some sort of indentation error.

I had:

config:
  background: var(--background-image)
  resources:
    - type: js
      url: /community_plugin/bar-card/bar-card.js

instead of

config:
  background: var(--background-image)
resources:
  - type: js
    url: /community_plugin/bar-card/bar-card.js

Big thanks to @ludeeus for the help debugging and @carltonb for the sneaky chrome reloading trick.