samuelthng / homeassistant-react-lovelace

Proof of Concept: Mounting react applications efficiently as a custom lovelace card using @preact/signals-react.

Home Assistant: React Lovelace Card

(React + TypeScript + Vite)

This project was bootstrapped from the @vite template which provides a minimal setup to get React working in Vite with some ESLint rules.

To install:

Node.js

npm install

Bun.js

bun install

To build with profiler:

Node.js

npx vite build --mode development

Bun.js

bun x vite build --mode development

To build with minification and optimisations:

Node.js

npx vite build

Bun.js

bun x vite build

To add to Lovelace:

1. Build the app
2. Copy the built bundle located at dist/react-card.js
3. Paste your bundle into /config/www/react-card.js of your Home Assistant setup
4. Add /local/react-card.js as a resource on Lovelace
5. Reload your Home Assistant
6. Create your custom card:

   type: custom:react-card
   entity: sun.sun

   Note: Be sure to open Home Assistant using it's local address if your component does not seem to update after inserting a new version.