Use pnpm instead of npm (#1375)

Pnpm is like npm except instead of keeping multiple copies of
dependencies, it shares a single copy for multiple dependencies
significantly reducing build time and the space needed to hold all the
dependencies. Read [here](https://pnpm.io/motivation) for more info.

This changes our CI to use pnpm and allows developers to choose to use
pnpm instead of npm. Also, pnpm has a built-in node version manager so
devs no longer need to use nvm to work on photonvision. All npm
functionality (including photon-server gradle tasks) still functions
using npm so this isn't breaking. We should make a docs change to
suggest to use pnpm.

.github/workflows/build.yml

@@ -26,14 +26,20 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install
       - name: Build Production Client
-        run: npm run build
+        run: pnpm run build
       - uses: actions/upload-artifact@v4
         with:
           name: built-client

.github/workflows/lint-format.yml

@@ -72,17 +72,23 @@ jobs:
         working-directory: photon-client
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install
       - name: Check Linting
-        run: npm run lint-ci
+        run: pnpm run lint-ci
       - name: Check Formatting
-        run: npm run format-ci
+        run: pnpm run format-ci
   server-index:
     name: "Check server index.html not changed"
     runs-on: ubuntu-22.04

.github/workflows/photon-code-docs.yml

@@ -36,14 +36,20 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install
       - name: Build Production Client
-        run: npm run build-demo
+        run: pnpm run build-demo
       - uses: actions/upload-artifact@v4
         with:
           name: built-client

docs/source/docs/contributing/photonvision/build-instructions.rst

@@ -9,18 +9,8 @@ Development Setup
 Prerequisites
 ~~~~~~~~~~~~~
 
-| **Java Development Kit:** This project requires Java Development Kit (JDK) 17 to be compiled. This is the same Java version that comes with WPILib for 2025+. If you don't have this JDK with WPILib, you can follow the instructions to install JDK 17 for your platform `here <https://bell-sw.com/pages/downloads/#jdk-17-lts>`_.
-| **Node JS:** The UI is written in Node JS. To compile the UI, Node 14.18.0 to Node 16.0.0 is required. To install Node JS follow the instructions for your platform `on the official Node JS website <https://nodejs.org/en/download/>`_.  However, modify this line
-
-.. code-block:: bash
-
-   nvm install 20
-
-so that it instead reads
-
-.. code-block:: javascript
-
-   nvm install 14.18.0
+| **Java Development Kit:** This project requires Java Development Kit (JDK) 17 to be compiled. This is the same Java version that comes with WPILib for 2024+. If you don't have this JDK with WPILib, you can follow the instructions to install JDK 17 for your platform `here <https://bell-sw.com/pages/downloads/#jdk-17-lts>`__.
+| **Node.js and pnpm** The UI is created using Vue and built using Vite. Node.js is required to develop and build the UI. We recomend using the pnpm package manager to handle dependencies and install Node.js. You can follow the instructions to install pnpm `here <https://pnpm.io/installation>`__. The project is already configured to create a Node.js v18 env when building photon-client.
 
 Compiling Instructions
 ----------------------
@@ -46,7 +36,7 @@ In the photon-client directory:
 
 .. code-block:: bash
 
-   npm install
+   pnpm install
 
 Build and Copy UI to Java Source
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -68,6 +58,8 @@ In the root directory:
 
       ``gradlew buildAndCopyUI``
 
+Please note that if you installed Node.js via pnpm, this gradle action will mirror Node.js in the gradle workdir and use that instead of the pnpm version.
+
 Build and Run PhotonVision
 ~~~~~~~~~~~~~~~~~~~~~~~~~~
 

photon-client/.npmrc

@@ -0,0 +1 @@
+use-node-version=18.20.4

photon-client/package.json

@@ -13,6 +13,9 @@
     "lint-ci": "eslint . --max-warnings 0 --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format-ci": "prettier --check src/"
   },
+  "engines": {
+    "node": "^18"
+  },
   "dependencies": {
     "@fontsource/prompt": "^5.0.9",
     "@mdi/font": "^7.4.47",

photon-server/build.gradle

@@ -1,7 +1,7 @@
 plugins {
     id "application"
     id 'com.github.johnrengelman.shadow' version '8.1.1'
-    id "com.github.node-gradle.node" version "7.0.1"
+    id "com.github.node-gradle.node" version "7.0.2"
     id "org.hidetake.ssh" version "2.11.2"
     id 'edu.wpi.first.WpilibTools' version '1.3.0'
 }
@@ -32,17 +32,23 @@ shadowJar {
 }
 
 node {
+    download = true
+    version = "18.20.4"
     nodeProjectDir = file("${projectDir}/../photon-client")
 }
 
-tasks.register('copyClientUIToResources', Copy) {
+tasks.register('buildUI', PnpmTask) {
+    args = ["run", "build"]
+}
+
+tasks.register('copyUIToResources', Copy) {
     from "${projectDir}/../photon-client/dist/"
     into "${projectDir}/src/main/resources/web/"
 }
 
 tasks.register("buildAndCopyUI") {
-    dependsOn "npm_run_build"
-    finalizedBy "copyClientUIToResources"
+    dependsOn "buildUI"
+    finalizedBy "copyUIToResources"
 }
 
 run {