Extra change for Moonfire NVR Web UI

.github/workflows/ci.yml

@@ -70,11 +70,13 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-      - run: cd ui && npm ci
-      - run: cd ui && npm run build
-      - run: cd ui && npm run test
-      - run: cd ui && npm run lint
-      - run: cd ui && npm run check-format
+      # Install pnpm then use pnpm instead npm
+      - run: npm i -g pnpm
+      - run: cd ui && pnpm i --frozen-lockfile
+      - run: cd ui && pnpm run build
+      - run: cd ui && pnpm run test
+      - run: cd ui && pnpm run lint
+      - run: cd ui && pnpm run check-format
   license:
     name: Check copyright/license headers
     runs-on: ubuntu-20.04

.github/workflows/release.yml

@@ -28,9 +28,10 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-      - run: cd ui && npm ci
-      - run: cd ui && npm run build
-      - run: cd ui && npm run test
+      - run: npm i -g pnpm
+      - run: cd ui && pnpm i --frozen-lockfile
+      - run: cd ui && pnpm run build
+      - run: cd ui && pnpm run test
       # Upload the UI and changelog as *job* artifacts (not *release* artifacts), used below.
       - uses: actions/upload-artifact@v3
         with:

guide/build.md

@@ -84,17 +84,19 @@ $ sudo install -m 755 target/release/moonfire-nvr /usr/local/bin
 $ cd ..
 ```
 
-You can build the UI via `npm` and find it in the `ui/build` directory:
+You can build the UI via `pnpm` and find it in the `ui/build` directory:
 
 ```console
 $ cd ui
-$ npm install
-$ npm run build
+$ pnpm install
+$ pnpm run build
 $ sudo mkdir /usr/local/lib/moonfire-nvr
 $ cd ..
 $ sudo rsync --recursive --delete --chmod=D755,F644 ui/dist/ /usr/local/lib/moonfire-nvr/ui
 ```
 
+For more information about using `pnpm`, check out the [Developing UI Guide](./developing-ui.md#requirements).
+
 If you wish to bundle the UI into the binary, you can build the UI first and then pass
 `--features=bundled-ui` when building the server. See also the
 [release workflow](../.github/workflows/release.yml) which statically links SQLite and

guide/developing-ui.md

@@ -20,13 +20,21 @@ and more effort is expended on packing and minimizing the components of
 the application as represented in the various "bundles". Read more about
 this in the webpack documentation.
 
+## Requirements
+
+* Node.js v18+
+* `pnpm` installed
+
+This guide below will use [`pnpm`](https://pnpm.io/) as package manager instead
+`npm`. So we highly recommended you to use `pnpm` in this project.
+
 ## Getting started
 
 Checkout the branch you want to work on and type
 
-```
-$ cd ui
-$ npm run dev
+```bash
+cd ui
+pnpm run dev
 ```
 
 This will pack and prepare a development setup. By default the development
@@ -55,8 +63,8 @@ Currently there's only one supported environment variable override defined in
 Thus one could connect to a remote Moonfire NVR by specifying its URL as
 follows:
 
-```
-$ PROXY_TARGET=https://nvr.example.com/ npm run dev
+```bash
+PROXY_TARGET=https://nvr.example.com/ npm run dev
 ```
 
 This allows you to test a new UI against your stable, production Moonfire NVR