Boilerplate Card development not showing up in HA

Development
1

I’m trying to get up and running with the boilerplate custom card development. But when I add it to my lovelace-ui.yaml file I get the error:

Custom Element does not exist: custom:boilerplate-card

This is what I have as the element code:

      - type: custom:boilerplate-card
        name: Boilerplate Card Development
        entity: sun.sun
        test_gui: true

resources:
  - url: "http://127.0.0.1:5000/boilerplate-card.js"
    type: module

When I go to the URL in the browser, http://127.0.0.1:5000/boilerplate-card.js, this is what displays in the window:
export{B as BoilerplateCard}from"./boilerplate-card-0997fd54.js";

I’ve restarted, cleared the cache etc and that error still shows up. Maybe someone can help my quickly troubleshoot what step I’m missing.

I should note that my HA installation is on a VM via my Qnap. So maybe my HA can’t see that local url? If that is the case I’m not sure how to get an external url from my docker that the VM machine could access on my local network.

The VScode im using and setup the devcontainer is located on my Laptop, not in the HA installation.

Thanks!

2

I think you are saying that the boilerplate-card.js is on your dev container on your laptop. If this is the case then HA will not find that at 127.0.0.1. You need to point it at the IP of your laptop.

3

Thanks for the help, I ended up needing to add that 127.0.0.1 url to the Lovelace config via the UI and not manually in the yaml file. Once I did that it worked :man_shrugging: