🔧 Migration from yarn to pnpm (#433)

* 🔧 Full migration from yarn to pnpm as packageManager

Updated all GitHub Action scripts, husky hooks, package.json, Playwright config, Dockerfile, and README.md

* 💚 Added pnpm setup to actions workflow per official docs

* 👷 Update pnpm usage in CI

* 👷 Update pnpm usage in docker

* 📝 Update changeset

---------

Co-authored-by: Wei He <[email protected]>

Author: KemingHe

.changeset/hungry-gorillas-walk.md

@@ -0,0 +1,7 @@
+---
+"socialify": patch
+---
+
+Migrated from yarn to pnpm package manager
+Updated scripts, hooks, and README.md
+Update Dockerfile

.github/dependabot.yml

@@ -1,17 +1,16 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
-      interval: "weekly"
+      interval: "daily"
     commit-message:
       prefix: "⬆️"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "weekly"
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/build.yml

@@ -18,20 +18,23 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Unit Test
-        run: yarn test:unit
+        run: pnpm test:unit
 
       - name: Build
-        run: yarn build
+        run: pnpm build

.github/workflows/e2e.yml

@@ -22,14 +22,17 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install
 
       - name: Get Playwright's Version
         shell: bash # necessary for it to work on Windows, which uses powershell by default
@@ -45,11 +48,11 @@ jobs:
           key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
 
       - name: Install Playwrigtht dependencies
-        run: yarn playwright install --with-deps chromium
+        run: pnpm playwright install --with-deps chromium
         if: steps.playwright-cache.outputs.cache-hit != 'true'
 
       - name: E2E Test
-        run: yarn test:e2e
+        run: pnpm test:e2e
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PROJECT_URL: http://127.0.0.1:3000

.github/workflows/release.yml

@@ -15,13 +15,17 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
+          node-version-file: .nvmrc
+          cache: 'pnpm'
 
       - name: Install Dependencies
-        run: yarn
+        run: pnpm install
 
       - name: Create Release Pull Request
         uses: changesets/action@v1

.husky/pre-commit

@@ -1 +1 @@
-yarn verify
+pnpm verify

Dockerfile

@@ -1,30 +1,32 @@
-FROM node:22-alpine AS base
-
 # Stage 1: Install dependencies
-FROM base AS deps
-WORKDIR /app
-COPY package.json yarn.lock ./
-# postinstall script requires a public directory
-RUN mkdir -p /app/public && \
-  yarn install --frozen-lockfile
-
-# Stage 2: Build the application
-FROM base AS builder
+FROM node:22-alpine AS deps
 
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
 ENV NODE_ENV=production
 ENV CI=true
-ENV NEXT_TELEMETRY_DISABLED=1
 
 WORKDIR /app
 
-COPY --from=deps /app/node_modules ./node_modules
+COPY package.json pnpm-lock.yaml ./
+RUN corepack enable && \
+  pnpm fetch --prod && \
+  pnpm install -r --offline --prod
+
+
+# Stage 2: Build the application
+FROM deps AS builder
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN pnpm fetch --dev && \
+  pnpm install -r --offline --dev --prod
 COPY . .
-COPY --from=deps /app/public ./public
+RUN pnpm build
 
-RUN yarn build
 
 # Stage 3: Prepare the production image
-FROM base AS runner
+FROM gcr.io/distroless/nodejs22-debian12 AS runner
 
 ENV GITHUB_TOKEN=
 ENV PROJECT_URL=http://localhost:3000
@@ -37,16 +39,12 @@ ENV NEXT_TELEMETRY_DISABLED=1
 
 WORKDIR /app
 
-# Copy only the necessary files and install production dependencies
-COPY package.json yarn.lock ./
-RUN mkdir -p /app/public && \
-  yarn install --production --frozen-lockfile && \
-  yarn cache clean
-
+COPY package.json ./
+COPY --from=deps /app/node_modules ./node_modules
 COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/next.config.js /app/custom-rewrites.js ./
 
 EXPOSE 3000
 
-CMD ["yarn", "start"]
+CMD ["./node_modules/next/dist/bin/next", "start"]

README.md

@@ -70,38 +70,38 @@ git clone https://github.com/wei/socialify.git && cd $_
 cp .env.example .env
 
 # Install dependencies
-yarn install
+pnpm install
 
 # Start local development server
-yarn dev
+pnpm dev
 ```
 
 ### Testing and Committing
 
-Socialify uses [`biomejs`](https://biomejs.dev/) as linter/formatter, [`Jest`](https://jestjs.io/) for unit testing, and [`Playwright`](https://playwright.dev/) for end-to-end testing. 
+Socialify uses [`biomejs`](https://biomejs.dev/) as linter/formatter, [`Jest`](https://jestjs.io/) for unit testing, and [`Playwright`](https://playwright.dev/) for end-to-end testing.
 
 Make sure to run and pass the linter, unit and end-to-end tests locally before committing your code. Please let us know in case you need to update the test snapshots. More in `"scripts"` section in your `package.json` file.
 
 ```shell
 # Run linter/formatter
-yarn lint  # yarn lint:fix
+pnpm lint
 
 # Fix linter/formatter errors
-# yarn lint:fix
+# pnpm lint:fix
 
 # Run unit tests
-yarn test:unit
+pnpm test:unit
 
 # Install Playwright dependencies (first-time)
-# yarn playwright install --with-deps chrome
+# pnpm playwright install --with-deps chrome
 
 # Run e2e tests
-yarn test:e2e
+pnpm test:e2e
 ```
 
 **One** changeset file is required per each PR.
 
-  1. Run `yarn changeset` and select the appropriate senmantic versioning type (major, minor, patch) based on the scope of the change, together with an concise message.
+  1. Run `pnpm changeset` and select the appropriate senmantic versioning type (major, minor, patch) based on the scope of the change, together with an concise message.
   2. You will see a new markdown file with a silly name like `milk-honey-eggs.md` in the `.changeset` directory.
   3. Test, commit, and push your code **WITH** this changeset file when submitting a new PR.
   4. You can manually edit it to include more information. For example:

package.json

@@ -14,15 +14,15 @@
     "test:unit:update-snapshot": "jest -u",
     "test:e2e": "playwright test",
     "test:e2e:update-snapshot": "playwright test --update-snapshots",
-    "test": "yarn test:unit && yarn test:e2e",
+    "test": "pnpm test:unit && pnpm test:e2e",
     "start": "next start",
     "lint": "biome ci --max-diagnostics=999 .",
     "lint:fix": "biome check --write --verbose --max-diagnostics=999 .",
     "lint:fix-unsafe": "biome check --write-unsafe --verbose --max-diagnostics=999 .",
     "ncu": "npx npm-check-updates -u",
-    "verify": "yarn lint && yarn test && yarn build",
+    "verify": "pnpm lint && pnpm test && pnpm build",
     "download-font": "./fonts/download-font.sh",
-    "postinstall": "cp ./node_modules/yoga-wasm-web/dist/yoga.wasm ./public/yoga.wasm; cp ./node_modules/@resvg/resvg-wasm/index_bg.wasm ./public/resvg_bg.wasm",
+    "postinstall": "mkdir -p ./public && cp ./node_modules/yoga-wasm-web/dist/yoga.wasm ./public/yoga.wasm && cp ./node_modules/@resvg/resvg-wasm/index_bg.wasm ./public/resvg_bg.wasm",
     "prepare": "is-ci || husky"
   },
   "engines": {
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.27.10",
+    "@jest/types": "^29.6.3",
     "@playwright/test": "^1.49.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -82,5 +83,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

playwright.config.ts

@@ -110,7 +110,7 @@ export default defineConfig({
 
   // Init a new production build and start a local server before running the e2e tests.
   webServer: {
-    command: 'yarn build && yarn start',
+    command: 'pnpm build && pnpm start',
     url: 'http://127.0.0.1:3000',
     reuseExistingServer: !process.env.CI,
   },