Switch to `pnpm`

.github/workflows/ci.yml

@@ -70,11 +70,13 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-      - run: cd ui && npm ci
+      # Install pnpm then use pnpm instead npm
-      - run: cd ui && npm run build
+      - run: npm i -g pnpm
-      - run: cd ui && npm run test
+      - run: cd ui && pnpm i --frozen-lockfile
-      - run: cd ui && npm run lint
+      - run: cd ui && pnpm run build
-      - run: cd ui && npm run check-format
+      - 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

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
+$ pnpm install
-$ npm run build
+$ 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
 ```
 
+You can use `npm` instead if you don't want to use `pnpm`.
+
 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,20 @@ 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+
+* `npm` or `pnpm` installed
+
+This guide below will use [`pnpm`](https://pnpm.io/) as package manager instead `npm`. But you can still use `npm`. We highly recommended you to switch to `pnpm`.
+
 ## Getting started
 
 Checkout the branch you want to work on and type
 
-```
+```bash
-$ cd ui
+cd ui
-$ npm run dev
+pnpm run dev
 ```
 
 This will pack and prepare a development setup. By default the development
@@ -55,8 +62,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:
 
-```
+```bash
-$ PROXY_TARGET=https://nvr.example.com/ npm run dev
+PROXY_TARGET=https://nvr.example.com/ npm run dev
 ```
 
 This allows you to test a new UI against your stable, production Moonfire NVR