Adding Resources to manifest.json for HACS

Development
1

Dear all,

I want to make my custom integration

available in HACS.

I already changed the structure and it is “accepted” by HACS in HA as a custom repository. But its only installing/download the python files and not the JavaScript files. It also not adding the resources to HA (as JavaScript-Modul).

hacs.json

{
  "name": "Another MVG",
  "description": "Home Assistant addon for MVG integration with frontend resources.",
  "url": "https://github.com/Nisbo/another_mvg",
  "file_name": "",
  "domains": ["sensor"],
  "homeassistant": "2023.8.0",
  "country": "DE",
  "iot_class": "cloud_polling",
  "render_readme": true
}

custom_components/another_mvg/manifest.json

{
  "domain": "another_mvg",
  "name": "Another MVG",
  "version": "1.4.0",
  "documentation": "https://github.com/Nisbo/another_mvg",
  "requirements": [],
  "dependencies": [],
  "codeowners": ["@Nisbo"],
  "resources": [
    {
      "url": "/local/content-card-another-mvg-big.js",
      "type": "module"
    },
    {
      "url": "/local/content-card-another-mvg.js",
      "type": "module"
    }
  ]
}

The issue is, that these 2 files
content-card-another-mvg-big.js
content-card-another-mvg.js

are not downloaded/copied to the www folder and also not added to
Settings → Dashboards → 3 dots on the top right corner → resourses

HACS 1.34
HA 2024.8.1

There are no related entries in the log for HACS, only

Logger: homeassistant.util.json
Quelle: helpers/deprecation.py:197
Erstmals aufgetreten: 12:45:26 (6 Vorkommnisse)
Zuletzt protokolliert: 12:46:01

json_loads was called from hacs, this is a deprecated function which will be removed in HA Core 2025.8. Use homeassistant.util.json.json_loads instead, please create a bug report at https://github.com/hacs/integration/issues

logging is enabled

logger:
  default: info
  logs:
    custom_components.hacs: debug
2

You cannot add resources like this. In fact resources is not a valid parameter in manifest.json.

If you want to be able to add custom cards with your integration, you have 2 options.

  1. Have a seperate frontend HACs install to install the cards. Your users will then have to install both.

  2. Code into your integration to add your custom cards (which need to be in your integration custom_components/[domain] directory or a sub directory off this. See the following repo for example of how to do this. Look specifically at the frontend directory, where you will see my 2 custom cards and (in the __init__.py) the code to install them.

Hope that helps. Reach out if you need more guidance.

EDIT: Oh and also look at the dependancies in the manifest.json. This will ensure these items are loaded before your integration so that you don’t run into problems adding these resources.

3

@msp1974

thx for pushing me in the right direction. :slight_smile:

I tried to implement your recommendations but finally (after restarting HA) I get the custom element doesnt exits warning for .

type: custom:content-card-another-mvg-big
entity: sensor.pasing

So I assume there is something wrong with the registration of the cards

I added the dependencies to the manifest manifest.json

{
  "domain": "another_mvg",
  "name": "Another MVG",
  "version": "1.4.0",
  "documentation": "https://github.com/Nisbo/another_mvg",
  "requirements": [],
  "dependencies": [
    "http",
    "frontend",
    "lovelace"
  ],
  "codeowners": ["@Nisbo"]
}

I created the frontend folder, movend the cards to this folder and modified the init_.py

I also added to the const.py

URL_BASE = "/another_mvg"
ANOTHER_MVG_CARDS = [
    {
        "name": "Another MVG Card",
        "filename": "content-card-another-mvg.js",
        "version": "1.4.0",
    },
    {
        "name": "Another MVG Big Card",
        "filename": "content-card-another-mvg-big.js",
        "version": "1.4.0",
    },
]

All files are available in HA in the custom_components folder

4

I forgot to add the registration

async def async_setup(hass: HomeAssistant, config: ConfigType) -> bool:
    """Set up a skeleton component."""
    # States are in the format DOMAIN.OBJECT_ID.
    # hass.states.set('another_mvg.connections', 'Not used at the moment')
    # Register custom cards
    cards = AnotherMvgCardRegistration(hass)
    await cards.async_register()
    
    # Return boolean to indicate that initialization was successfully.
    return True

now its working.
Many thx :slight_smile:

1 Like