Migrate from npm to pnpm

.github/dependabot.yml

@@ -5,8 +5,8 @@
 
 version: 2
 updates:
-  # Maintain dependencies for npm
-  - package-ecosystem: "npm"
+  # Maintain dependencies for pnpm
+  - package-ecosystem: "pnpm"
     directory: "/"
     open-pull-requests-limit: 20
     schedule:

.github/workflows/ci.yml

@@ -165,23 +165,21 @@ jobs:
         uses: actions/checkout@v4
       - name: Copy .env
         run: php -r "copy('.env.example', '.env');"
-      - name: Get npm cache directory
-        id: npm-cache-dir
-        shell: bash
-        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
-      - uses: actions/cache@v4
-        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          path: ${{ steps.npm-cache-dir.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          version: 10
+      - name: Use Node.js 24
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: "pnpm"
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
       - name: Check code formatting
-        run: npm run prettier
+        run: pnpm run prettier
       - name: Linting
-        run: npm run lint
+        run: pnpm run lint
   docker-build:
     name: Docker Build
     runs-on: ubuntu-latest

.github/workflows/deploy-docs.yml

@@ -23,19 +23,23 @@ jobs:
     steps:
       # Setup
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          node-version: 20
-          cache: npm
-          cache-dependency-path: ./docs/package-lock.json
+          version: 10
+      - name: Use Node.js 24
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: "pnpm"
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
 
       # Build static docs
       - name: Build all versions
         run: ./build.sh
       - name: Build website
-        run: npm run docusaurus build
+        run: pnpm run docusaurus build
       - name: upload build artifact
         uses: actions/upload-pages-artifact@v3
         with:

.gitignore

@@ -1,4 +1,5 @@
 /node_modules
+/.pnpm-store/
 /public/hot
 /public/storage
 /storage/*.key

docker/app/Dockerfile

@@ -27,7 +27,7 @@ RUN apk --no-cache add \
     supervisor \
     nginx \
     mysql-client postgresql-client \
-    nodejs npm
+    nodejs pnpm
 
 # Add PHP extensions
 ADD https://github.com/mlocati/docker-php-extension-installer/releases/latest/download/install-php-extensions /usr/local/bin/
@@ -96,12 +96,12 @@ RUN su-exec www-data git config --global --add safe.directory /var/www/html
 
 # Build frontend
 RUN if [ "$VITE_COVERAGE" != "true" ] ; then \
-    su-exec www-data npm install --omit=dev && \
-    su-exec www-data npm run build; \
+    su-exec www-data pnpm install -P && \
+    su-exec www-data pnpm run build; \
   else \
     echo "Build frontend for coverage (instrumented and with sourcemap)" && \
-    su-exec www-data npm install && \
-    su-exec www-data npm run build -- --config vite.config.coverage.js; \
+    su-exec www-data pnpm install && \
+    su-exec www-data pnpm run build -- --config vite.config.coverage.js; \
   fi
 
 # Run and optimize composer for production

docker/app/pilos-cli

@@ -14,7 +14,7 @@ change_permissions() {
 case $ACTION in
 
   frontend:build)
-    su-exec www-data npm run build
+    su-exec www-data pnpm run build
     ;;
 
   playback-player:build)

docker/app/playback-player/build.sh

@@ -31,8 +31,8 @@ if unzip -q -d "$temporaryDirectory" "$downloadFileName"; then
         echo "Entering directory $folderName failed"
         exit 2
     fi
-    npm install
-    npm run build
+    pnpm install
+    pnpm run build
 
     # clear old public folder
     echo "Clearing old player..."

docker/sail/bin/sail

@@ -60,14 +60,10 @@ function display_help {
     echo "  ${GREEN}sail node ...${NC}         Run a Node command"
     echo "  ${GREEN}sail node --version${NC}"
     echo
-    echo "${YELLOW}NPM Commands:${NC}"
-    echo "  ${GREEN}sail npm ...${NC}        Run a npm command"
-    echo "  ${GREEN}sail npx${NC}            Run a npx command"
-    echo "  ${GREEN}sail npm run prod${NC}"
-    echo
-    echo "${YELLOW}Yarn Commands:${NC}"
-    echo "  ${GREEN}sail yarn ...${NC}        Run a Yarn command"
-    echo "  ${GREEN}sail yarn run prod${NC}"
+    echo "${YELLOW}PNPM Commands:${NC}"
+    echo "  ${GREEN}sail pnpm ...${NC}        Run a pnpm command"
+    echo "  ${GREEN}sail pnpx${NC}            Run a pnpx command"
+    echo "  ${GREEN}sail pnpm run prod${NC}"
     echo
     echo "${YELLOW}Database Commands:${NC}"
     echo "  ${GREEN}sail mariadb${NC}   Start a MySQL CLI session within the 'db' container"
@@ -339,14 +335,14 @@ elif [ "$1" == "node" ]; then
         sail_is_not_running
     fi
 
-# Proxy NPM commands to the "npm" binary on the application container...
-elif [ "$1" == "npm" ]; then
+# Proxy PNPM commands to the "pnpm" binary on the application container...
+elif [ "$1" == "pnpm" ]; then
     shift 1
 
     if [ "$EXEC" == "yes" ]; then
         ARGS+=(exec -u "$APP_USER")
         [ ! -t 0 ] && ARGS+=(-T)
-        ARGS+=("$APP_SERVICE" npm)
+        ARGS+=("$APP_SERVICE" pnpm)
     else
         sail_is_not_running
     fi
@@ -363,18 +359,6 @@ elif [ "$1" == "npx" ]; then
         sail_is_not_running
     fi
 
-# Proxy Yarn commands to the "yarn" binary on the application container...
-elif [ "$1" == "yarn" ]; then
-    shift 1
-
-    if [ "$EXEC" == "yes" ]; then
-        ARGS+=(exec -u "$APP_USER")
-        [ ! -t 0 ] && ARGS+=(-T)
-        ARGS+=("$APP_SERVICE" yarn)
-    else
-        sail_is_not_running
-    fi
-
 # Initiate a MySQL CLI terminal session within the "db" container...
 elif [ "$1" == "mariadb" ]; then
     shift 1

docs/build.sh

@@ -45,7 +45,7 @@ for tag in "${TAGS[@]}"; do
     cp -r temp_versioned_docs/docs/docs .
     cp -r temp_versioned_docs/docs/sidebars.js .
 
-    npm run docusaurus docs:version "${version}"
+    pnpm run docusaurus docs:version "${version}"
   else
     echo "Warning: branch/tag ${version} does not contain a docusaurus.config.js!"
   fi
@@ -70,7 +70,7 @@ for branch in "${BRANCHES[@]}"; do
     cp -r temp_versioned_docs/docs/docs .
     cp -r temp_versioned_docs/docs/sidebars.js .
 
-    npm run docusaurus docs:version "${version}"
+    pnpm run docusaurus docs:version "${version}"
   else
     echo "Warning: branch ${branch} does not contain a docusaurus.config.js!"
   fi

docs/docs/development/02-getting-started.md

@@ -80,7 +80,7 @@ The docker container will detect the certificate and key on the next start and u
 
 ```bash
 ./sail composer install
-./sail npm install
+./sail pnpm install
 ```
 
 ## Adjust config
@@ -266,13 +266,13 @@ The production container automatically runs the `pilos-cli frontend:build` comma
 In the development environment you can build the frontend with the following command:
 
 ```bash
-./sail npm run build
+./sail pnpm run build
 ```
 
 However, for development it is recommended to use the development server for hot reloading:
 
 ```bash
-./sail npm run dev
+./sail pnpm run dev
 ```
 
 For the development you can use any editor of your choice but please do not check in any configuration files for your editor. In this case you may want to

docs/docs/development/05-code-style.md

@@ -7,8 +7,8 @@ The backend uses the php framework Laravel and therefore it follows the
 implemented code you can run the command `sail composer run fix-cs`.
 
 The frontend style gets checked by prettier and the code is linted using eslint.
-The style can be fixed by running the command `sail npm run prettier:fix`.
-Lint fixes can a applied by running the command `sail npm run lint:fix`.
+The style can be fixed by running the command `sail pnpm run prettier:fix`.
+Lint fixes can a applied by running the command `sail pnpm run lint:fix`.
 For best practices checkout the [vue style guide](https://vuejs.org/v2/style-guide/).
 
 Additionally, to the style guides the following things should apply to the changes:

docs/docs/development/06-documentation.md

@@ -17,10 +17,10 @@ To run the documentation locally, follow these steps:
 1. **Install Dependencies:**
 
     ```bash
-    ./sail npm run docs:install
+    ./sail pnpm run docs:install
     ```
 
 2. **Start the Development Server:**
     ```bash
-    ./sail npm run docs:dev
+    ./sail pnpm run docs:dev
     ```

docs/docs/development/07-testing.md

@@ -70,23 +70,23 @@ Please make sure your OS is supported and all required packages are installed.
 If the system requirements are met, you can install Cypress on your local machine:
 
 ```bash
-npx cypress install
+pnpm cypress install
 ```
 
 ### Running Cypress Tests
 
-First you need to have the frontend either running compiled (`./sail npm run build`) or in development mode (`./sail npm run dev`).
+First you need to have the frontend either running compiled (`./sail pnpm run build`) or in development mode (`./sail pnpm run dev`).
 
 You can then run the tests in the interactive mode with:
 
 ```bash
-npm run cypress:open
+pnpm run cypress:open
 ```
 
 Or you can run the tests headless with:
 
 ```bash
-npm run cypress:run
+pnpm run cypress:run
 ```
 
 ### Coverage
@@ -95,19 +95,19 @@ To generate a code coverage report, the frontend must first be instrumented so t
 This command can be used to build the frontend with coverage instrumentation:
 
 ```bash
-./sail npm run build -- --config vite.config.coverage.js
+./sail pnpm run build -- --config vite.config.coverage.js
 ```
 
 After that you can run the tests with the coverage report:
 
 ```bash
-npm run cypress:run
+pnpm run cypress:run
 ```
 
 To generate a code coverage report in HTML format you can use the following command:
 
 ```bash
-./sail npm run create-coverage-report
+./sail pnpm run create-coverage-report
 ```
 
 ## System Testing with Cypress
@@ -127,13 +127,13 @@ Before running the tests make sure you have correctly installed cypress as descr
 You can then run the tests in the interactive mode with:
 
 ```bash
-npm run cypress:open -- -P ./tests/System
+pnpm run cypress:open -- -P ./tests/System
 ```
 
 Or you can run the tests headless with:
 
 ```bash
-npm run cypress:run -- -P ./tests/System
+pnpm run cypress:run -- -P ./tests/System
 ```
 
 ## Visual Regression Testing with Happo.io
@@ -169,7 +169,7 @@ Although visual regression tests run exclusively in the GitHub Action runner, yo
 Before running the tests make sure you have correctly installed cypress as described in the [Installing cypress](#installing-cypress) section.
 
 ```bash
-npm run cypress:open -- -P ./tests/Visual --config experimentalInteractiveRunEvents=true
+pnpm run cypress:open -- -P ./tests/Visual --config experimentalInteractiveRunEvents=true
 ```
 
 This setup allows you to ensure your tests are functioning correctly before committing changes.