Local Development

Simply, run npm run dev and it will start a local server for you to develop on, it will also watch for changes and reload the page for you.

Building

Run npm run build and it will build the files for you, you can then upload them to your home assistant instance using the deploy script mentioned below.

Deploy to Home Assistant via SSH

Replace the values in the .env file provided with your VITE_SSH_USERNAME, VITE_SSH_HOSTNAME and VITE_SSH_PASSWORD.
To automatically deploy to your home assistant instance, you can run npm run deploy after you've retrieved the SSH information specified here, NOTE! The script has already been created for you, you just need to run it after you've updated the .env values.
The VITE_FOLDER_NAME is the folder that will be created on your home assistant instance, this is where the files will be uploaded to.

Folder name & Vite

The VITE_FOLDER_NAME is the folder that will be created on your home assistant instance, this is where the files will be uploaded to. If you change the environment variable, you'll also need to align the vite.config.ts value named base to the same value so that when it's served, it's served from the correct path.

Typescript Sync

Replace the values in the .env file provided with your own!
The VITE_HA_URL should be a https url if you want to sync your types successfully.
The VITE_HA_TOKEN instructions can be found here under the pre-requisites section.

Once you have both the above environment variables set, you can run npm run sync and it will create a file for you, you then just have to add it to the tsconfig.json.

Further documentation

For further documentation, please visit the documentation website for more information.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

shannonhochkins/ha-dashboard-v2