MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-11-20 01:50:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

switch from create-react-app to vite

Browse Source 
create-react-app is apparently deprecated, so the cool kids use vite,
I guess.
This commit is contained in:
Scott Lamb
2023-12-17 18:07:25 -08:00
parent 79af39f35e
commit 24880a5c2d
24 changed files with 6819 additions and 24395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
guide/build.md
View File

@@ -38,7 +38,9 @@ can skip this if compiling with `--features=rusqlite/bundled` and don't
mind the `moonfire-nvr sql` command not working.
To build the UI, you'll need a [nodejs](https://nodejs.org/en/download/) release
in "Maintenance" or "LTS" status: currently v14, v16, or v18.
in "Maintenance", "LTS", or "Current" status on the
[Release Schedule](https://github.com/nodejs/release#release-schedule):
currently v18, v20, or v21.
On recent Ubuntu or Raspbian Linux, the following command will install
most non-Rust dependencies:
@@ -90,7 +92,7 @@ $ npm install
$ npm run build
$ sudo mkdir /usr/local/lib/moonfire-nvr
$ cd ..
$ sudo rsync --recursive --delete --chmod=D755,F644 ui/build/ /usr/local/lib/moonfire-nvr/ui
$ sudo rsync --recursive --delete --chmod=D755,F644 ui/dist/ /usr/local/lib/moonfire-nvr/ui
```
### Running interactively straight from the working copy
@@ -100,7 +102,7 @@ the binaries in the working copy will run via just `nvr`:
```console
$ sudo mkdir /usr/local/lib/moonfire-nvr
$ sudo ln -s `pwd`/ui/build /usr/local/lib/moonfire-nvr/ui
$ sudo ln -s `pwd`/ui/dist /usr/local/lib/moonfire-nvr/ui
$ sudo mkdir /var/lib/moonfire-nvr
$ sudo chown $USER: /var/lib/moonfire-nvr
$ ln -s `pwd`/server/target/release/moonfire-nvr $HOME/bin/moonfire-nvr

27
guide/developing-ui.md
View File

@@ -6,7 +6,7 @@
The UI is presented from a single HTML page (index.html) and any number
of Javascript files, css files, images, etc. These are "packed" together
using [webpack](https://webpack.js.org).
using [vite](https://vitejs.dev/).
For ongoing development it is possible to have the UI running in a web
browser using "hot loading". This means that as you make changes to source
@@ -26,12 +26,12 @@ Checkout the branch you want to work on and type
```
$ cd ui
$ npm run start
$ npm run dev
```
This will pack and prepare a development setup. By default the development
server that serves up the web page(s) will listen on
[http://localhost:3000/](http://localhost:3000/) so you can direct your browser
[http://localhost:5173/](http://localhost:5173/) so you can direct your browser
there. It assumes the Moonfire NVR server is running at
[http://localhost:8080/](http://localhost:8080/) and will proxy API requests
there.
@@ -45,32 +45,25 @@ process, but some will show up in the browser console, or both.
## Overriding defaults
The UI is setup with [Create React App](https://create-react-app.dev/).
`npm run start` will honor any of the environment variables described in their
[Advanced Configuration](https://create-react-app.dev/docs/advanced-configuration/),
as well as Moonfire NVR's custom `PROXY_TARGET` variable. Quick reference:
Currently there's only one supported environment variable override defined in
`ui/vite.config.ts`:
| variable | description | default |
| :------------- | :----------------------------------------------------------------------- | :----------------------- |
| `PROXY_TARGET` | base URL of the backing Moonfire NVR server (see `ui/src/setupProxy.js`) | `http://localhost:8080/` |
| `PORT` | port to listen on | 3000 |
| `HOST` | host/IP to listen on (or `0.0.0.0` for all) | `0.0.0.0` |
| variable | description | default |
| :------------- | :------------------------------------------ | :----------------------- |
| `PROXY_TARGET` | base URL of the backing Moonfire NVR server | `http://localhost:8080/` |
Thus one could connect to a remote Moonfire NVR by specifying its URL as
follows:
```
$ PROXY_TARGET=https://nvr.example.com/ npm run start
$ PROXY_TARGET=https://nvr.example.com/ npm run dev
```
This allows you to test a new UI against your stable, production Moonfire NVR
installation with real data.
**Note:** the live stream currently does not work in combination with
`PROXY_TARGET` due to [#290](https://github.com/scottlamb/moonfire-nvr/issues/290).
You can also set environment variables in `.env` files, as described in
[Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/).
[vitejs.dev: Env Variables and Modes](https://vitejs.dev/guide/env-and-mode).
## A note on `https`