feat: migrate Yarn classic to pnpm Refs: PL-240

Author: mikkojamG

.github/workflows/ci.yml

@@ -13,8 +13,9 @@ on:
 
 jobs:
   common:
-    uses: City-of-Helsinki/.github/.github/workflows/ci-node.yml@main
-    secrets: inherit
+    uses: City-of-Helsinki/.github/.github/workflows/ci-pnpm-node.yml@main
+    secrets:
+      SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
     with:
       node-version: 22.x
       extra-commands: |
@@ -87,11 +88,13 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 22.x
+      - name: Enable pnpm
+        run: corepack enable
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install --frozen-lockfile --ignore-scripts
       - name: Build application
-        run: yarn build
+        run: pnpm build
       - name: Install Playwright browsers
-        run: yarn test:e2e:install
+        run: pnpm test:e2e:install
       - name: Run E2E tests
-        run: yarn test:e2e
+        run: pnpm test:e2e

.gitignore

@@ -24,5 +24,9 @@
 /tmp
 
 npm-debug.log*
+# yarn – not used anymore
+yarn.lock
+.yarn/
+.yarnrc.yml
 yarn-debug.log*
 yarn-error.log*

Dockerfile

@@ -1,40 +1,52 @@
-FROM registry.access.redhat.com/ubi9/nodejs-22:9.5
+# ============================================================
+# STAGE 1: Install dependencies
+# ============================================================
+FROM helsinki.azurecr.io/ubi9/nodejs-22-pnpm-builder-base AS appbase
 
-# Create app directory
 WORKDIR /servicemap-ui
 
-USER root
+COPY --chown=default:root package.json pnpm-lock.yaml pnpm-workspace.yaml index.html vite.config.js .eslintrc.json ./
+COPY --chown=default:root ./scripts ./scripts
+COPY --chown=default:root ./client ./client
+COPY --chown=default:root ./config ./config
+COPY --chown=default:root ./server ./server
+COPY --chown=default:root ./src ./src
 
-RUN curl --fail --silent --proto '=https' --tlsv1.2 https://dl.yarnpkg.com/rpm/yarn.repo \
-  --output /etc/yum.repos.d/yarn.repo
-RUN yum -y install yarn
+# corepack in the base image will automatically use the version of pnpm
+# defined in your package.json 'packageManager' field if present.
+RUN pnpm install --frozen-lockfile --ignore-scripts && pnpm store prune
 
-RUN chown -R default:root /servicemap-ui
-
-# Install app dependencies
-COPY --chown=default:root --chmod=444 package.json yarn.lock /servicemap-ui/
-
-# Install dependencies
-RUN yarn install --frozen-lockfile --ignore-scripts && yarn cache clean --force
-
-COPY --chown=default:root . /servicemap-ui/
-
-USER default
+# ============================================================
+# STAGE 2: Build
+# ============================================================
+FROM appbase AS builder
 
+#ARG REACT_APP_SENTRY_RELEASE
 ARG NODE_OPTIONS=--max-old-space-size=4096
 ENV NODE_OPTIONS=$NODE_OPTIONS
 
-RUN yarn build
+RUN pnpm build
 
-USER root
+# ============================================================
+# STAGE 3: Production Runtime
+# ============================================================
+# This app is SSR (Express + React server-side rendering) — it requires a
+# Node runtime, not a static file server like nginx.
+FROM registry.access.redhat.com/ubi9/nodejs-22-minimal AS production
 
-RUN chown root:root -R /servicemap-ui  && chmod -R 755 /servicemap-ui
+WORKDIR /servicemap-ui
+
+# Copy built server bundle and client assets
+COPY --from=builder --chown=1001:root /servicemap-ui/dist ./dist
 
-USER default
+# Copy node_modules for externalized runtime dependencies (react, react-dom, etc.)
+COPY --from=appbase --chown=1001:root /servicemap-ui/node_modules ./node_modules
 
-# If you are building your code for production
-# RUN npm ci --only=production
+#ARG REACT_APP_SENTRY_RELEASE
+ENV NODE_ENV=production
+
+USER 1001
 
-# Bundle app source
 EXPOSE 2048
-CMD [ "node", "dist/index.js" ]
+
+CMD ["node", "dist"]

README.md

@@ -3,7 +3,7 @@
 ## Requirements 
 Using following:
 * Node LTS (v22)
-* yarn (v1)
+* pnpm (v11)
 If you are using NVM you can also use `nvm use` to get correct version.
 
 For development:
@@ -13,41 +13,41 @@ For development:
 
 In the project directory, you can run:
 
-### `yarn dev`
+### `pnpm dev`
 
 Start dev server and runs the app in the development mode.<br>
 
-### `yarn build`
+### `pnpm build`
 
 Builds the app for production to the `dist` folder.<br>
 
-### `yarn build:test`
+### `pnpm build:test`
 
 Builds the app in development mode to the `dist` folder.<br>
 
-### `yarn start`
+### `pnpm start`
 
 Runs the app by starting node server using build files.
 
-### `yarn test`
+### `pnpm test`
 
 Launches Vitest test runner.<br>
 
-### `yarn test:e2e`
+### `pnpm test:e2e`
 Launches [Playwright](playwright.config.js) test runner and performs browser tests. 
 
 ## How to use
 For development: 
-- Make sure yarn packages are installed by running `yarn install` in project root.
+- Make sure packages are installed by running `pnpm install` in project root.
 - Make sure you have environment variables set. `.env.example` should have all required values so you can copy it to `.env`.
-- Then you can start development server using `yarn dev`. Which watches files and updates on code changes.
+- Then you can start development server using `pnpm dev`. Which watches files and updates on code changes.
 - Open the application by loading `localhost:2048` in the browser
 
 To run in production mode:
-- Make sure yarn packages are installed by running `yarn install` in project root.
+- Make sure packages are installed by running `pnpm install` in project root.
 - Make sure you have environment variables set. `.env.example` should have all required values so you can copy it to `.env`.
-- Build files by running `yarn build`
-- Then you can run the app with `yarn start`
+- Build files by running `pnpm build`
+- Then you can run the app with `pnpm start`
 - Open the application by loading `localhost:2048` in the browser
 
 To run with docker compose:

compose.yml

@@ -0,0 +1,9 @@
+services:
+  app:
+    platform: linux/amd64
+    ports:
+      - "2048:2048"
+    build: .
+    env_file:
+      - .env
+    container_name: servicemap-ui

docker-compose.yml

@@ -2,8 +2,10 @@
   "name": "servicemap-ui",
   "version": "2.14.2",
   "private": true,
+  "packageManager": "pnpm@11.1.3",
   "engines": {
-    "node": ">=22.13.1"
+    "node": ">=22.13.1",
+    "pnpm": ">=11.1.3"
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
@@ -66,21 +68,21 @@
     "whatwg-fetch": "^3.5.0"
   },
   "scripts": {
-    "build": "rm -rf dist && yarn build:client && yarn build:server",
-    "build:test": "rm -rf dist && yarn build:client --mode development && yarn build:server --mode development",
+    "build": "rm -rf dist && pnpm build:client && pnpm build:server",
+    "build:test": "rm -rf dist && pnpm build:client --mode development && pnpm build:server --mode development",
     "build:client": "vite build",
     "build:server": "BUILD_TARGET=server vite build --ssr",
-    "build:client:clean": "rm -rf dist/src && yarn build:client",
-    "build:server:clean": "rm -f dist/server.js dist/server.js.map && yarn build:server",
-    "dev": "yarn dev:client:watch & yarn dev:server:watch & sleep 5 && nodemon dist --watch dist",
+    "build:client:clean": "rm -rf dist/src && pnpm build:client",
+    "build:server:clean": "rm -f dist/server.js dist/server.js.map && pnpm build:server",
+    "dev": "pnpm dev:client:watch & pnpm dev:server:watch & sleep 5 && nodemon dist --watch dist",
     "dev:client:watch": "vite build --watch",
     "dev:server:watch": "BUILD_TARGET=server vite build --ssr --watch",
     "lint": "eslint src/ server/ --ext .js,.jsx && prettier src/ server/ --check",
     "lint:fix": "eslint src/ server/ --ext .js,.jsx --fix && prettier src/ server/ --write",
     "preview": "vite preview",
     "start": "node dist",
     "test": "vitest --config vitest.config.js",
-    "test:coverage": "yarn test --coverage",
+    "test:coverage": "pnpm test --coverage",
     "test:e2e:install": "playwright install",
     "test:e2e": "playwright test"
   },
@@ -120,8 +122,5 @@
     "redux-mock-store": "^1.5.4",
     "vite-plugin-commonjs": "^0.10.4",
     "vite-plugin-node-polyfills": "^0.24.0"
-  },
-  "resolutions": {
-    "**/@typescript-eslint/typescript-estree/minimatch": "9.0.7"
   }
 }