HACS, YAML Mode, Frontend Cards and Resources, Reload without Restarting HA - HowTo

Configuration Frontend
1

I edit the dashboard in YAML mode and whenever I add a new Frontend card via HACS, I thought I had to restart HA after adding the url and type within resources: in the configuration.yaml file.

Despite doing many searches to find an answer, either I wasn’t using the correct search terms (more likely) or there was no clear explanation as to how these resources could be loaded without a HA reboot.

A lot of you may already know how to do this, but for people like me who don’t, here is a guide that will show you how to install a frontend card without rebooting HA.

First of all, adding the following card yaml into ui-lovelace.yaml results in the expected error where the card can’t be found:

  - type: 'custom:bar-card'
    entities:
      - entity: sensor.plug_zigbee27_power
        name: Plug 27
      - entity: sensor.plug_zigbee26_power

image
image756×216 10.3 KB

Next download/install the card via HACS

image
image1068×452 30.6 KB

Here is where it tells you to manually add the resource url and type to configuration.yaml

image
image1116×852 49.1 KB

Add this to the resources: section and save your configuration.yaml file

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /hacsfiles/lovelace-layout-card/layout-card.js
      type: module
    - url: /hacsfiles/decluttering-card/decluttering-card.js 
      type: module
    - url: /hacsfiles/simple-clock-card/simple-clock-card.js
      type: module
    - url: /hacsfiles/bar-card/bar-card.js
      type: module

You can see which resources have been loaded by navigating to Settings → Dashboards → 3-dot menu top-right → Resources

As seen below, I don’t yet have button-card listed.

image
image670×852 15 KB

Go back to your dashboards main page (Overview by default), and select the 3-dot menu top-right and then press Reload Resources

image
image548×522 14.1 KB

If you go back to the Resources page mentioned above, you will now see that button-card is listed!

image
image640×766 14.9 KB

However for me, back on the home dashboard page, clicking Refresh within the 3-dot menu still didn’t show the bar card…

The final step is a full browser refresh which can usually be accomplished by shift+left-click the refresh button on your browser:

image
image

This worked for me and saved having to reboot HA. Hope this helps others too.

1 Like
2

Is there any way to reload resources without setting lovelace mode to yaml? Doing so deleted all of my views and now I’m restoring from a backup to get them back. Normally I only have the edit dashboard option in the three dot menu.

Also more importantly to anyone reading: SETTING LOVELACE IN YOUR CONFIG.YAML WILL DELETE YOUR DASHBOARD VIEWS AND REMOVING IT AND RESTARTING WILL NOT RESTORE THEM. You’ll have to restore from a backup.

3

I don’t think you need to reload resources to use new frontend cards in non-yaml mode because you don’t need to add them to configuration.yaml. I could be wrong though…

4

This was a super helpful guide. Thank you!