chore(ci): automatically deploy selected examples (#47130)

fix NEXT-822 ([link](https://linear.app/vercel/issue/NEXT-822))
([NEXT-822](https://linear.app/vercel/issue/NEXT-822))

---------

Author: styfle

.github/workflows/build_test_deploy.yml

@@ -952,6 +952,29 @@ jobs:
       - run: ./scripts/publish-native.js
       - run: ./scripts/publish-release.js
 
+  deployExamples:
+    name: Deploy examples
+    runs-on: ubuntu-latest
+    needs: [publishRelease]
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 25
+      - name: Install Vercel CLI
+        run: npm i -g [email protected]
+      - name: Deploy preview examples
+        if: ${{ needs.build.outputs.isRelease != 'true' }}
+        run: ./scripts/deploy-examples.sh
+        env:
+          VERCEL_API_TOKEN: ${{ secrets.VERCEL_API_TOKEN }}
+          DEPLOY_ENVIRONMENT: preview
+      - name: Deploy production examples
+        if: ${{ needs.build.outputs.isRelease == 'true' }}
+        run: ./scripts/deploy-examples.sh
+        env:
+          VERCEL_API_TOKEN: ${{ secrets.VERCEL_API_TOKEN }}
+          DEPLOY_ENVIRONMENT: production
+
   testDeployE2E:
     name: E2E (deploy)
     runs-on: ubuntu-latest

examples/image-component/package.json

@@ -11,8 +11,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "18.7.14",
-    "@types/react": "16.9.17",
-    "typescript": "4.8.2"
+    "@types/node": "18.15.3",
+    "@types/react": "18.0.28",
+    "typescript": "4.9.5"
   }
 }

scripts/deploy-examples.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+CHANGED_EXAMPLES=$(node scripts/run-for-change.js --type deploy-examples --listChangedDirectories)
+PROD=""
+if [ "$DEPLOY_ENVIRONMENT" = "production" ]; then
+  PROD="--prod"
+fi
+
+for CWD in $CHANGED_EXAMPLES ; do
+  HYPHENS=$(echo "$CWD" | tr '/' '-')
+  PROJECT="nextjs-$HYPHENS"
+  echo "Deploying directory $CWD as $PROJECT to Vercel..."
+  vercel link --cwd "$CWD" --scope vercel --project "$PROJECT" --token "$VERCEL_API_TOKEN" --yes
+  vercel deploy --cwd "$CWD" --token "$VERCEL_API_TOKEN" $PROD
+done;

scripts/run-for-change.js

@@ -34,6 +34,7 @@ const CHANGE_ITEM_GROUPS = {
     'packages/font/README.md',
     'packages/next-env/README.md',
   ],
+  'deploy-examples': ['examples/image-component'],
   cna: ['packages/create-next-app', 'test/integration/create-next-app'],
   'next-codemod': ['packages/next-codemod'],
   'next-swc': [
@@ -94,15 +95,20 @@ async function main() {
     )
   }
   const execArgIndex = process.argv.indexOf('--exec')
+  const listChangedDirectories = process.argv.includes(
+    '--listChangedDirectories'
+  )
 
-  if (execArgIndex < 0) {
-    throw new Error('no "--exec" flag provided')
+  if (execArgIndex < 0 && !listChangedDirectories) {
+    throw new Error(
+      'Invalid: must provide either "--exec" or "--listChangedDirectories" flag'
+    )
   }
   let hasMatchingChange = false
   const changeItems = CHANGE_ITEM_GROUPS[type]
   const execArgs = process.argv.slice(execArgIndex + 1)
 
-  if (execArgs.length < 1) {
+  if (execArgs.length < 1 && !listChangedDirectories) {
     throw new Error('Missing exec arguments after "--exec"')
   }
 
@@ -114,6 +120,7 @@ async function main() {
     )
   }
   let changedFilesCount = 0
+  let changedDirectories = []
 
   // always run for canary if flag is enabled
   if (alwaysCanary && branchName === 'canary') {
@@ -130,7 +137,13 @@ async function main() {
       // if --not flag is provided we execute for any file changed
       // not included in the change items otherwise we only execute
       // if a change item is changed
-      const matchesItem = changeItems.some((item) => file.startsWith(item))
+      const matchesItem = changeItems.some((item) => {
+        const found = file.startsWith(item)
+        if (found) {
+          changedDirectories.push(item)
+        }
+        return found
+      })
 
       if (!matchesItem && isNegated) {
         hasMatchingChange = true
@@ -151,6 +164,10 @@ async function main() {
   }
 
   if (hasMatchingChange) {
+    if (listChangedDirectories) {
+      console.log(changedDirectories.join('\n'))
+      return
+    }
     const cmd = spawn(execArgs[0], execArgs.slice(1))
     cmd.stdout.pipe(process.stdout)
     cmd.stderr.pipe(process.stderr)