chore: switch from npm to pnpm (#786)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

.dockerignore

@@ -1,4 +1,4 @@
-node_modules
+**/node_modules
 
 # Output
 .output

.github/workflows/build-next.yml

@@ -21,17 +21,22 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: "npm"
+          cache: 'pnpm'
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: pnpm-lock.yaml
 
       - name: Setup Go
         uses: actions/setup-go@v5
         with:
-          go-version-file: "backend/go.mod"
+          go-version-file: 'backend/go.mod'
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -54,12 +59,11 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Install frontend dependencies
-        working-directory: frontend
+        run: pnpm install --frozen-lockfile
-        run: npm ci
 
       - name: Build frontend
         working-directory: frontend
-        run: npm run build
+        run: pnpm run build
 
       - name: Build binaries
         run: sh scripts/development/build-binaries.sh --docker-only
@@ -85,12 +89,12 @@ jobs:
       - name: Container image attestation
         uses: actions/attest-build-provenance@v2
         with:
-          subject-name: "${{ env.DOCKER_IMAGE_NAME }}"
+          subject-name: '${{ env.DOCKER_IMAGE_NAME }}'
           subject-digest: ${{ steps.build-push-image.outputs.digest }}
           push-to-registry: true
       - name: Container image attestation (distroless)
         uses: actions/attest-build-provenance@v2
         with:
-          subject-name: "${{ env.DOCKER_IMAGE_NAME }}"
+          subject-name: '${{ env.DOCKER_IMAGE_NAME }}'
           subject-digest: ${{ steps.container-build-push-distroless.outputs.digest }}
           push-to-registry: true

.github/workflows/e2e-tests.yml

@@ -3,15 +3,15 @@ on:
   push:
     branches: [main]
     paths-ignore:
-      - "docs/**"
+      - 'docs/**'
-      - "**.md"
+      - '**.md'
-      - ".github/**"
+      - '.github/**'
   pull_request:
     branches: [main]
     paths-ignore:
-      - "docs/**"
+      - 'docs/**'
-      - "**.md"
+      - '**.md'
-      - ".github/**"
+      - '.github/**'
 
 jobs:
   build:
@@ -54,18 +54,22 @@ jobs:
     needs: build
     steps:
       - uses: actions/checkout@v4
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: "npm"
+          cache: 'pnpm'
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: pnpm-lock.yaml
 
       - name: Cache Playwright Browsers
         uses: actions/cache@v3
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('frontend/package-lock.json') }}
+          key: ${{ runner.os }}-playwright-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-playwright-
 
@@ -96,13 +100,12 @@ jobs:
         run: docker load < /tmp/lldap-image.tar
 
       - name: Install test dependencies
-        working-directory: ./tests
+        run: pnpm --filter pocket-id-tests install --frozen-lockfile
-        run: npm ci
 
       - name: Install Playwright Browsers
         working-directory: ./tests
         if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps chromium
+        run: pnpm dlx playwright install --with-deps chromium
 
       - name: Run Docker Container with Sqlite DB and LDAP
         working-directory: ./tests/setup
@@ -111,8 +114,8 @@ jobs:
           docker compose logs -f pocket-id &> /tmp/backend.log &
 
       - name: Run Playwright tests
-        working-directory: ./tests
+        working-directory: tests
-        run: npx playwright test
+        run: pnpm exec playwright test
 
       - name: Upload Test Report
         uses: actions/upload-artifact@v4
@@ -141,18 +144,22 @@ jobs:
     needs: build
     steps:
       - uses: actions/checkout@v4
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: "npm"
+          cache: 'pnpm'
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: pnpm-lock.yaml
 
       - name: Cache Playwright Browsers
         uses: actions/cache@v3
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('frontend/package-lock.json') }}
+          key: ${{ runner.os }}-playwright-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-playwright-
 
@@ -200,13 +207,12 @@ jobs:
         run: docker load -i /tmp/docker-image.tar
 
       - name: Install test dependencies
-        working-directory: ./tests
+        run: pnpm --filter pocket-id-tests install
-        run: npm ci
 
       - name: Install Playwright Browsers
         working-directory: ./tests
         if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps chromium
+        run: pnpm dlx playwright install --with-deps chromium
 
       - name: Run Docker Container with Postgres DB and LDAP
         working-directory: ./tests/setup
@@ -216,7 +222,7 @@ jobs:
 
       - name: Run Playwright tests
         working-directory: ./tests
-        run: npx playwright test
+        run: pnpm exec playwright test
 
       - name: Upload Test Report
         uses: actions/upload-artifact@v4

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     tags:
-      - "v*.*.*"
+      - 'v*.*.*'
 
 jobs:
   build:
@@ -16,15 +16,19 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: "npm"
+          cache: 'pnpm'
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: pnpm-lock.yaml
       - uses: actions/setup-go@v5
         with:
-          go-version-file: "backend/go.mod"
+          go-version-file: 'backend/go.mod'
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
@@ -64,11 +68,9 @@ jobs:
             type=semver,pattern={{major}}.{{minor}},prefix=v
             type=semver,pattern={{major}},prefix=v
       - name: Install frontend dependencies
-        working-directory: frontend
+        run: pnpm --filter pocket-id-frontend install --frozen-lockfile
-        run: npm ci
       - name: Build frontend
-        working-directory: frontend
+        run: pnpm --filter pocket-id-frontend build
-        run: npm run build
       - name: Build binaries
         run: sh scripts/development/build-binaries.sh
       - name: Build and push container image
@@ -94,17 +96,17 @@ jobs:
       - name: Binary attestation
         uses: actions/attest-build-provenance@v2
         with:
-          subject-path: "backend/.bin/pocket-id-**"
+          subject-path: 'backend/.bin/pocket-id-**'
       - name: Container image attestation
         uses: actions/attest-build-provenance@v2
         with:
-          subject-name: "${{ env.DOCKER_IMAGE_NAME }}"
+          subject-name: '${{ env.DOCKER_IMAGE_NAME }}'
           subject-digest: ${{ steps.container-build-push.outputs.digest }}
           push-to-registry: true
       - name: Container image attestation (distroless)
         uses: actions/attest-build-provenance@v2
         with:
-          subject-name: "${{ env.DOCKER_IMAGE_NAME }}"
+          subject-name: '${{ env.DOCKER_IMAGE_NAME }}'
           subject-digest: ${{ steps.container-build-push-distroless.outputs.digest }}
           push-to-registry: true
       - name: Upload binaries to release
@@ -121,6 +123,6 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Mark release as published
         run: gh release edit ${{ github.ref_name }} --draft=false

.github/workflows/svelte-check.yml

@@ -4,21 +4,21 @@ on:
   push:
     branches: [main]
     paths:
-      - "frontend/src/**"
+      - 'frontend/src/**'
-      - ".github/svelte-check-matcher.json"
+      - '.github/svelte-check-matcher.json'
-      - "frontend/package.json"
+      - 'frontend/package.json'
-      - "frontend/package-lock.json"
+      - 'frontend/package-lock.json'
-      - "frontend/tsconfig.json"
+      - 'frontend/tsconfig.json'
-      - "frontend/svelte.config.js"
+      - 'frontend/svelte.config.js'
   pull_request:
     branches: [main]
     paths:
-      - "frontend/src/**"
+      - 'frontend/src/**'
-      - ".github/svelte-check-matcher.json"
+      - '.github/svelte-check-matcher.json'
-      - "frontend/package.json"
+      - 'frontend/package.json'
-      - "frontend/package-lock.json"
+      - 'frontend/package-lock.json'
-      - "frontend/tsconfig.json"
+      - 'frontend/tsconfig.json'
-      - "frontend/svelte.config.js"
+      - 'frontend/svelte.config.js'
   workflow_dispatch:
 
 jobs:
@@ -36,24 +36,28 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: "npm"
+          cache: 'pnpm'
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: pnpm-lock.yaml
 
       - name: Install dependencies
-        working-directory: frontend
+        run: pnpm --filter pocket-id-frontend install --frozen-lockfile
-        run: npm ci
 
       - name: Build Pocket ID Frontend
         working-directory: frontend
-        run: npm run build
+        run: pnpm --filter pocket-id-frontend build
 
       - name: Add svelte-check problem matcher
         run: echo "::add-matcher::.github/svelte-check-matcher.json"
 
       - name: Run svelte-check
         working-directory: frontend
-        run: npm run check
+        run: pnpm --filter pocket-id-frontend check

CONTRIBUTING.md

@@ -28,7 +28,7 @@ Before you submit the pull request for review please ensure that
   - **refactor** - code change that neither fixes a bug nor adds a feature
 
 - Your pull request has a detailed description
-- You run `npm run format` to format the code
+- You run `pnpm format` to format the code
 
 ## Development Environment
 
@@ -69,10 +69,10 @@ The backend is built with [Gin](https://gin-gonic.com) and written in Go. To set
 
 The frontend is built with [SvelteKit](https://kit.svelte.dev) and written in TypeScript. To set it up, follow these steps:
 
-1. Open the `frontend` folder
+1. Open the `pocket-id` project folder
-2. Copy the `.env.development-example` file to `.env` and edit the variables as needed
+2. Copy the `frontend/.env.development-example` file to `frontend/.env` and edit the variables as needed
-3. Install the dependencies with `npm install`
+3. Install the dependencies with `pnpm install`
-4. Start the frontend with `npm run dev`
+4. Start the frontend with `pnpm dev`
 
 You're all set! The application is now listening on `localhost:3000`. The backend gets proxied trough the frontend in development mode.
 
@@ -84,11 +84,13 @@ If you are contributing to a new feature please ensure that you add tests for it
 
 The tests can be run like this:
 
-1. Visit the setup folder by running `cd tests/setup`
+1. Install the dependencies from the root of the project `pnpm install`
 
-2. Start the test environment by running `docker compose up -d --build`
+2. Visit the setup folder by running `cd tests/setup`
 
-3. Go back to the test folder by running `cd ..`
+3. Start the test environment by running `docker compose up -d --build`
-4. Run the tests with `npx playwright test`
+
+4. Go back to the test folder by running `cd ..`
+5. Run the tests with `pnpm dlx playwright test` or from the root project folder `pnpm test`
 
 If you make any changes to the application, you have to rebuild the test environment by running `docker compose up -d --build` again.

Dockerfile

@@ -5,11 +5,17 @@ ARG BUILD_TAGS=""
 
 # Stage 1: Build Frontend
 FROM node:22-alpine AS frontend-builder
+RUN corepack enable
+
 WORKDIR /build
-COPY ./frontend/package*.json ./
+
-RUN npm ci
+COPY pnpm-workspace.yaml pnpm-lock.yaml ./
-COPY ./frontend ./
+COPY frontend/package.json ./frontend/
-RUN BUILD_OUTPUT_PATH=dist npm run build
+RUN pnpm --filter pocket-id-frontend install --frozen-lockfile
+
+COPY ./frontend ./frontend/
+
+RUN BUILD_OUTPUT_PATH=dist pnpm --filter pocket-id-frontend run build
 
 # Stage 2: Build Backend
 FROM golang:1.24-alpine AS backend-builder
@@ -19,7 +25,7 @@ COPY ./backend/go.mod ./backend/go.sum ./
 RUN go mod download
 
 COPY ./backend ./
-COPY --from=frontend-builder /build/dist ./frontend/dist
+COPY --from=frontend-builder /build/frontend/dist ./frontend/dist
 COPY .version .version
 
 WORKDIR /build/cmd

frontend/package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
+		"preinstall": "npx only-allow pnpm",
 		"dev": "vite dev --port 3000",
 		"build": "vite build",
 		"preview": "vite preview --port 3000",
@@ -29,7 +30,6 @@
 		"@inlang/plugin-message-format": "^4.0.0",
 		"@internationalized/date": "^3.8.2",
 		"@lucide/svelte": "^0.525.0",
-		"@playwright/test": "^1.54.1",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.26.0",
 		"@sveltejs/vite-plugin-svelte": "^6.1.0",

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "pocket-id-repo",
+  "private": true,
+  "workspaces": [
+    "frontend",
+    "tests"
+  ],
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "dev": "pnpm --filter pocket-id-frontend dev",
+    "build": "pnpm --filter pocket-id-frontend build",
+    "test": "pnpm --filter pocket-id-tests test",
+    "format": "pnpm --filter pocket-id-frontend format"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'frontend'
+  - 'tests'

tests/package-lock.json

@@ -1,116 +0,0 @@
-{
-	"name": "tests",
-	"lockfileVersion": 3,
-	"requires": true,
-	"packages": {
-		"": {
-			"devDependencies": {
-				"@playwright/test": "^1.52.0",
-				"@types/node": "^22.15.21",
-				"dotenv": "^16.5.0",
-				"jose": "^6.0.11",
-				"prettier": "^3.6.2"
-			}
-		},
-		"node_modules/@playwright/test": {
-			"version": "1.52.0",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"playwright": "1.52.0"
-			},
-			"bin": {
-				"playwright": "cli.js"
-			},
-			"engines": {
-				"node": ">=18"
-			}
-		},
-		"node_modules/@types/node": {
-			"version": "22.15.21",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"undici-types": "~6.21.0"
-			}
-		},
-		"node_modules/dotenv": {
-			"version": "16.5.0",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://dotenvx.com"
-			}
-		},
-		"node_modules/fsevents": {
-			"version": "2.3.2",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-			}
-		},
-		"node_modules/jose": {
-			"version": "6.0.11",
-			"dev": true,
-			"license": "MIT",
-			"funding": {
-				"url": "https://github.com/sponsors/panva"
-			}
-		},
-		"node_modules/playwright": {
-			"version": "1.52.0",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"playwright-core": "1.52.0"
-			},
-			"bin": {
-				"playwright": "cli.js"
-			},
-			"engines": {
-				"node": ">=18"
-			},
-			"optionalDependencies": {
-				"fsevents": "2.3.2"
-			}
-		},
-		"node_modules/playwright-core": {
-			"version": "1.52.0",
-			"dev": true,
-			"license": "Apache-2.0",
-			"bin": {
-				"playwright-core": "cli.js"
-			},
-			"engines": {
-				"node": ">=18"
-			}
-		},
-		"node_modules/prettier": {
-			"version": "3.6.2",
-			"dev": true,
-			"license": "MIT",
-			"bin": {
-				"prettier": "bin/prettier.cjs"
-			},
-			"engines": {
-				"node": ">=14"
-			},
-			"funding": {
-				"url": "https://github.com/prettier/prettier?sponsor=1"
-			}
-		},
-		"node_modules/undici-types": {
-			"version": "6.21.0",
-			"dev": true,
-			"license": "MIT"
-		}
-	}
-}

tests/package.json

@@ -1,11 +1,13 @@
 {
+	"name": "pocket-id-tests",
 	"type": "module",
 	"scripts": {
+		"preinstall": "npx only-allow pnpm",
 		"test": "playwright test",
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.52.0",
+		"@playwright/test": "^1.54.1",
 		"@types/node": "^22.15.21",
 		"dotenv": "^16.5.0",
 		"jose": "^6.0.11",