Home Assistant frontend development best practices

Development
1

I’ve been playing with Home Assistant frontend for a past month or so, and decided to create a tutorial on how to customize state cards. I just wanted if there are any best practices for HA FE code, other than things in frontend development section?

Things that I’m especially interested in is:

  • Adding frontend enhancements in a modular way, so that each card customization can be put as a separate git repo that would be checked in (or ideally kept as a package❤, be it bower or npm, tough polymer 2 and npm don’t play together AFAIK).
  • Customizing card state? Add State Card guide doesn’t cut it for two reasons:
    1. It suggest you editing /util/hass-util.html in HA frontend, which is not something you want to do.
    2. After digging though links in cookbook, it mentioned one example which used homeassistant.customize to adjust the custom_ui_state_card which would be cool, but it doesn’t always work.
  • Is there a quickies/easier way to set up the frontend development environment than following steps in the frontend setup? I’m thinking a Docker image that would take care of all of this.

I’d be very grateful for the responses, that will help me to create an article that, I hope, will aid HA community.

1 Like
2

A lot of the things are outdated. If you want to load anything custom, you have to add it to your configuration.yaml. See https://home-assistant.io/components/frontend/#loading-extra-html

Home Assistant is customizable either with custom panels or with custom UI pieces. The best resource for this is here: https://github.com/andrey-git/home-assistant-custom-ui

1 Like
3

The “Add State Card” link is not for adding your own private custom card, but for adding a card to the common repository.

I think the most popular and the most complicated examples of custom UI are:

There are also examples of small components on the forums

1 Like