Where should custom components JS files be defined?

Configuration Frontend
1

As part of my #2024SpringCleaning (overdue by a few years), I have a question regarding the configuration of .js files coming from custom components.

I have been adding custom components over the years and I have several types of configuration in configuration.yaml

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/rgb-light-card/card.js    # ← the path starts with /hacsfiles
      type: module
    - url: /local/content-card-example.js       # ← the path starts with /local
      type: module

I would have sworn that I also saw a place in the UI where they were defined as well but after clicking and clicking around I cannot found it. Either I just imagined that or they were removed at some point.

My questions:

  • Is there a consistent place where the .js files are defined?
  • Is this one place?
  • Is the configuration needed in the first place?
  • Is there a configuration in the UI?
  • Is it documented somewhere?
2

There is a configuration in the UI for both. I’ve never used the config YAML so I don’t believe what you posted is necessary.

HACs

image
image520×762 12.5 KB

Lovelace

image
image560×564 26.9 KB

HACs stores in the /local/www/community folder and homeassitant = local if using a file editor.