-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Update web readme * Update /web readme * Apply suggestions from code review Co-authored-by: Nicolas Mowen <[email protected]> --------- Co-authored-by: Sam Wright <[email protected]> Co-authored-by: Nicolas Mowen <[email protected]>
- Loading branch information
1 parent
7b57a66
commit 10c1f7e
Showing
2 changed files
with
21 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"recommendations": [ | ||
"dbaeumer.vscode-eslint" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,25 @@ | ||
# React + TypeScript + Vite | ||
This is the Frigate frontend which connects to and provides a User Interface to the Python backend. | ||
|
||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
# Web Development | ||
|
||
Currently, two official plugins are available: | ||
## Installing Web Dependencies Via NPM | ||
|
||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
Within `/web`, run: | ||
|
||
## Expanding the ESLint configuration | ||
```bash | ||
npm install | ||
``` | ||
|
||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
## Running development frontend | ||
|
||
- Configure the top-level `parserOptions` property like this: | ||
Within `/web`, run: | ||
|
||
```js | ||
export default { | ||
// other rules... | ||
parserOptions: { | ||
ecmaVersion: 'latest', | ||
sourceType: 'module', | ||
project: ['./tsconfig.json', './tsconfig.node.json'], | ||
tsconfigRootDir: __dirname, | ||
}, | ||
} | ||
```bash | ||
PROXY_HOST=<ip_address:port> npm run dev | ||
``` | ||
|
||
- 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](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list | ||
The Proxy Host can point to your existing Frigate instance. Otherwise defaults to `localhost:5000` if running Frigate on the same machine. | ||
|
||
## Extensions | ||
Install these IDE extensions for an improved development experience: | ||
- eslint |