Moving from manual install to HACS: lovelace custom cards

Configuration Frontend
1

Hi!

I am lost, please help.

I had a perfectly working setup where I used custom cards: layout-card, button-card, slider-entity-row, card-tools which I had installed manually. To facilitate management (updates, …) I moved to HACS some time ago. I used a stepwise approached and replaced card by card from manual install to HACS and everything seemed to work fine (even after reboot). Now, suddenly everything came crashing down and I cannot get the custom cards to load anymore. I really want the cards to load by using HACS and don’t want to move back to manual installation.

My HACS custom-cards got installed here:

\\192.168.1.242\config\www\community\button-card\
\\192.168.1.242\config\www\community\lovelace-card-tools\
\\192.168.1.242\config\www\community\lovelace-layout-card\
\\192.168.1.242\config\www\community\lovelace-slider-entity-row\

Question 1: How do I get Home Assistant to look in these folders when trying to find the custom cards?

My manual installation were in different folders that I had created based on instructions I found.

Question 2: To get the manual installations working I also had to have these resources in ui-lovelace.yaml. Do I need these when using HACS and what should the path look like?

resources:
 - url: /community_plugin/button-card/button-card.js
   type: module
 - url: /local/plugins/layout-card.js?v=1
   type: js
 - url: /local/slider-entity-row.js
   type: module
 - url: /local/plugins/card-tools.js?v=1
   type: js

The error message I get for all my cards are like the picture below. Custom element doesn’t exist: button-card.
Capture

Question 3: Any thought on why I did not get the error messages right away? Browser cache? Different types of home assistant reboot? I reboot from UI.

Thanks!

2

You need to change your urls. They should all be /hacsfiles/ instead of /local/ or community_plugin/. Here’s my resource file which by the way has also needs to be moved to the configuration file as of 0.109 I think. Also most are now Modules instead of type:js.

# lovelace reaources
  - url: /hacsfiles/flex-table-card/flex-table-card.js
    type: module
  - url: /hacsfiles/lovelace-card-mod/card-mod.js
    type: module
  - url: /hacsfiles/lovelace-layout-card/layout-card.js
    type: module
  - url: /hacsfiles/lovelace-multiple-entity-row/multiple-entity-row.js
    type: module
  - url: /hacsfiles/lovelace-state-switch/state-switch.js
    type: module
1 Like
3

Thanks alot for your response.

I changed the URLs, changed to module and moved the resources part to configuration.yaml as per below. Should I keep the v=1 after the question marks?

resources:
  - url: /hacsfiles/button-card/button-card.js
    type: module
  - url: /hacsfiles/lovelace-layout-card/layout-card.js
    type: module
  - url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js
    type: module
  - url: /hacsfiles/lovelace-card-tools/card-tools.js
    type: module

Unfortunately this made no change at all after reboot. It feels like my changes are not taking effect.

edit: running configuration validation I get: Component error: resources - Integration ‘resources’ not found, seems like resources is not allowed in the configuration.yaml?

edit: moved resources back to ui-lovelace.yaml and get ok at configuration.yaml. Also got custom card: button-card working, still problems with layout-card though.

4

Don’t think you need to version information anymore. Did you clear the browser cache?

1 Like
5

Lots of things are starting to work now again. This seems to be the right path! I will keep on testing.

Thanks alot!

edit: in general I started to get quite confident around Home Assistant but when things like this happen it is like starting all over. How am I supposed to know about the /hacsfiles/ and module and in which file configuration vs. ui-lovelace I should place stuff. Is it documented? Without persons like you I would never have succeeded.

1 Like
6

I am confident in saying that HACS now adds the card to whatever file it needs to be referenced in.

EDIT: Yep, just tested, once you add the card via HACS, there is no need for any further configuration. Just start adding the card to Lovelace in configure ui interface.

NOTE BENE - see ludeeus’s clarification 2 posts below.

7

I am managing my UI and all custom cards through yaml and I had to add a resource: section with url references in ui-lovelace.yaml to get it to work.

8

Starting with 1.0.0 it will handle the resources atomagically if you manage those in the UI, For YAML users they still need to manually add it to the lovelace: section of their configuration.

1 Like
9

Thank you for the definitive word. Love your work.

3 Likes
10

Hi All,

sorry to wake up this post but I’m going insane.
I tried all the things you mentioned here but nothing helps. and whenever I try to add the HACS integration from configuration I always get this window, like something is not right, and once I put my git token it doesn’t add the HACS to the side panel.

hacs
hacs756×723 38.1 KB

any suggestions?