chore: use pnpm to manage frontend deps (#659)

* chore: use pnpm to manage frontend deps

* typo: change content of tips

* docs: update node.js require version & replacement installation link

* feat: detect the Node.js version to ensure corepack is supported

* typo: remove chinese comment

* fix: lint CI config, use pnpm to install dependencies

* fix: nextui style error when using pnpm

* fix: ci setup pnpm cwd

* fix: frontend lint ci install deps crash

* fix: ci lint frontend missing package.json path

* fix: frontend lint ci add cache-dependency-path prop

.github/workflows/lint.yml

@@ -7,15 +7,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          package_json_file: frontend/package.json
+
+      - name: Install Node.js 20
+        uses: actions/setup-node@v2
         with:
           node-version: 20
-      - run: |
+          cache: 'pnpm'
+          cache-dependency-path: 'frontend/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: |
           cd frontend
-          npm ci --legacy-peer-deps
-      - run: |
+          pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: |
           cd frontend
-          npm run lint
+          pnpm run lint
 
   lint-python:
     name: Lint python

Makefile

@@ -18,7 +18,14 @@ build:
 	@python -m pip install pipenv
 	@python -m pipenv install -v
 	@echo "Setting up frontend environment..."
-	@cd frontend && npm install
+	@echo "Detect Node.js version..."
+	@cd frontend && node ./scripts/detect-node-version.js
+	@cd frontend && if [ -f node_modules/.package-lock.json ]; then \
+		echo "This project currently uses "pnpm" for dependency management. It has detected that dependencies were previously installed using "npm" and has automatically deleted the "node_modules" directory to prevent unnecessary conflicts."; \
+		rm -rf node_modules; \
+	fi
+	@which corepack > /dev/null || (echo "Installing corepack..." && npm install -g corepack)
+	@cd frontend && corepack enable && pnpm install
 
 # Start backend
 start-backend:

README.md

@@ -116,7 +116,7 @@ Getting started with the OpenDevin project is incredibly easy. Follow these simp
 * Linux, Mac OS, or [WSL on Windows](https://learn.microsoft.com/en-us/windows/wsl/install)
 * [Docker](https://docs.docker.com/engine/install/)
 * [Python](https://www.python.org/downloads/) >= 3.11
-* [NodeJS](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) >= 14.8
+* [NodeJS](https://nodejs.org/en/download/package-manager) >= 18.17.1
 
 ### 2. Build and Setup The Environment
 

frontend/.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*@nextui-org/*

frontend/package.json

@@ -27,7 +27,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-syntax-highlighter": "^15.5.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.3",
     "vite": "^5.1.6",
     "vite-tsconfig-paths": "^4.3.2",
     "web-vitals": "^2.1.4",
@@ -85,5 +85,9 @@
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.2",
     "ts-jest": "^29.1.2"
+  },
+  "packageManager": "pnpm@8.15.6",
+  "volta": {
+    "node": "18.20.1"
   }
 }

frontend/scripts/detect-node-version.js

@@ -0,0 +1,28 @@
+function parseVersion(version) {
+  return version.split('.').map(Number);
+}
+
+function compareVersions(v1, v2) {
+  const v1Parts = parseVersion(v1);
+  const v2Parts = parseVersion(v2);
+
+  for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+    const v1Part = v1Parts[i] || 0;
+    const v2Part = v2Parts[i] || 0;
+
+    if (v1Part > v2Part) return 1;
+    if (v1Part < v2Part) return -1;
+  }
+
+  return 0;
+}
+
+const currentVersion = process.version.substring(1);
+const targetVersion = "18.17.1";
+
+if (compareVersions(currentVersion, targetVersion) > 0) {
+  console.log(`Current Node.js version is ${currentVersion}, corepack is supported.`);
+} else {
+  console.error(`Current Node.js version is ${currentVersion}, but corepack is unsupported. Required version: ^${targetVersion}.`);
+  process.exit(1)
+}