Beginner of YAML - some questions about frontend/lovelace configuration

Configuration Frontend
1

Dear community:

I have spent some hours to migrate my main dashboard from storage mode to YAML mode, and after migration all custom cards installed via HACS stops working. Reading the manual I have added them to configuration like below and now everything works again:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524345
lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/apexcharts-card/apexcharts-card.js
      type: module
    - url: /hacsfiles/Bubble-Card/bubble-card.js
      type: module
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /hacsfiles/charger-card/charger-card.js
      type: module
    - url: /hacsfiles/config-template-card/config-template-card.js
      type: module
    - url: /hacsfiles/lovelace-hui-element/hui-element.js
      type: module
    - url: /hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js
      type: module

I have 2 naive questions hope somebody can help me:

  1. Notice some js can be either added to frontend/extra_module_url or as module under lovelace/resources, what are the differences between the two methods and which one is preferred approach?
  2. When I update custom card via HACS, do I need to make changes to path manually afterwards?

Many thanks for your input!

2

Either a JS code works on a dashboard pages or in any pages.

If you use this line only for custom cards, you may not do it if you decide to use HACS for maintaining custom cards. HACS will register resources automatically in an internal json file. And this is also an answer to the 2nd question.

1 Like
3

Thank you that’s good news!
So I will keep card-mod in extra_module_url as recommended and leave the rest in resources.

4

Suggest to use HACS to maintain custom cards, then you may delete that “resources” part, it will be controlled by HACS.

It was recommended by the card-mod creator Thomas in Docs.
Some people believe that having this “extra_module_url” in config causes a bug “card-mod disappears in editor” (you can find this issue on card-mod repo), and thus they recommend to delete this line from config. In my experience, the bug may occur even w/o that line, so I am a bit sceptic. In my setups (have a few of them, all for testing) this line is added.

5

I don’t understand this - after I convert my dashboard to yaml mode all resources are gone until I manually added them back to resources part in configuration (before that I even tried to delete and reinstall via HACS but it didn’t help).
I was a bit surprised that HACS installed custom cards need to be manually defined in resources section, maybe this is not the way how it’s supposed to work?

6

No, when a card is installed in HACS, you do not need to bother about the “resources” section (both in yaml and storage dashboards), HACS is maintaining the “resources” in an internal json file.

7

Ok thanks, then I don’t understand why I lost all my custom card js when I convert to yaml mode.
And strangely not only the yaml dashboard, but my old dash board which is still in storage mode lost all the custom cards. I checked the resource under 3 dots in UI and it’s empty - previously all js from hacs were there.

8

No idea why it was lost, may be you tried to use HACS and play with “resources” in same HA setup.

9

YAML.mode do indeed tamper with HACS and I had to manually add the resources too.
I have a script running that scans the resource folder and create the file on shutdown of HA core, so I do not have to do it manually.

10

Interesting, never needed to do it, in my setups all plugins are added in HACS, all custom js are listed in “extra_module_url”, may be some custom css needed to be added manually as a resource manually…

11

It happened when the default dashboard was switched to YAML mode for me.

12

That sounds smart! Would you mind sharing the script?

13

I will once I get home sunday.
It might be a Node Red script, but it should be possible to make that in HA automations too.

I will share on Sunday.

14

Thanks a lot and have a great weekend!

15

Here it is.

It is made in Node Red.

[{"id":"a3c4168525e7541a","type":"group","z":"075b8c92acc62bfb","style":{"stroke":"#2b2b2b","stroke-opacity":"1","fill":"#181818","fill-opacity":"0.5","label":true,"label-position":"nw","color":"#cccccc"},"nodes":["4921e6d52358c05e","2d3c008b54a831cc","9bbe01744bf1ec3b","33173784f4f90f09","c98599608812bfe4","052b11db5e25e16a"],"x":14,"y":409,"w":1307,"h":82},{"id":"4921e6d52358c05e","type":"file","z":"075b8c92acc62bfb","g":"a3c4168525e7541a","name":"Write Lovelace resource file","filename":"/homeassistant/hacs_integrations.yaml","filenameType":"str","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"none","x":810,"y":450,"wires":[["c98599608812bfe4"]]},{"id":"2d3c008b54a831cc","type":"inject","z":"075b8c92acc62bfb","g":"a3c4168525e7541a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":450,"wires":[["9bbe01744bf1ec3b"]]},{"id":"9bbe01744bf1ec3b","type":"readdir","z":"075b8c92acc62bfb","g":"a3c4168525e7541a","name":"","dir":"/homeassistant/www/community","as":"single","recursive":true,"outproperty":"files","x":255,"y":450,"wires":[["33173784f4f90f09"]]},{"id":"33173784f4f90f09","type":"function","z":"075b8c92acc62bfb","g":"a3c4168525e7541a","name":"Read *.js files in www dir and format data","func":"let newfiles = \"\";\nfor (let file in msg.files) {\n    if (msg.files[file].substr(msg.files[file].length-3)==\".js\") {\n        newfiles=newfiles+\"- url: \"+msg.files[file].replace('/homeassistant/www/community/', '/hacsfiles/')+\"\\n  type: module\\n\";\n        \n    }\n}\nmsg.payload = newfiles;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":505,"y":450,"wires":[["4921e6d52358c05e"]]},{"id":"c98599608812bfe4","type":"delay","z":"075b8c92acc62bfb","g":"a3c4168525e7541a","name":"","pauseType":"delay","timeout":"3","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":1020,"y":450,"wires":[["052b11db5e25e16a"]]},{"id":"052b11db5e25e16a","type":"api-call-service","z":"075b8c92acc62bfb","g":"a3c4168525e7541a","name":"Reload all configs","server":"","version":7,"debugenabled":false,"action":"homeassistant.reload_all","floorId":[],"areaId":[],"deviceId":[],"entityId":[],"labelId":[],"data":"","dataType":"jsonata","mergeContext":"","mustacheAltTags":false,"outputProperties":[],"queue":"none","blockInputOverrides":true,"domain":"homeassistant","service":"reload_all","x":1205,"y":450,"wires":[[]]}]
1 Like