Feat: setup cicd vercel

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,20 @@
+**Summary:**
+
+Summarize the changes in the pull request including how it relates to any issues (include the #number, or link them).
+
+**Expected behavior:** 
+
+Explain and/or show screenshots for how you expect the pull request to work in your testing (in case other devices exhibit different behavior).
+
+**Testing tips:**
+
+Provide tips, procedures and sample files on how to test the feature.
+Testers are invited to follow the tips AND to try anything they deem relevant outside the bounds of the testing tips. 
+
+Please make sure these boxes are checked before submitting your pull request - thanks!
+
+- [ ] Run the unit tests with `yarn test` to make sure you didn't break anything
+- [ ] Add or update any needed documentation to the repo
+- [ ] Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
+- [ ] Linked all relevant issues
+- [ ] Include screenshot(s) showing how this pull request works and fixes the issue(s)

.github/config.yml

@@ -0,0 +1,32 @@
+# Configuration for welcome - https://github.com/behaviorbot/welcome
+
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: >
+  Thanks for opening your first issue in this project! If you haven't already, you can [join our slack](https://share.mobilitydata.org/slack) and join the #mobility-database channel to meet our awesome community. Come say hi :wave:!
+  <br><br> Welcome to the community and thank you for your engagement in open source! :tada:
+  <br><br> ![](https://media.giphy.com/media/l2JHZ0dIcyFo5UQGQ/giphy.gif)
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+  Thanks for opening this pull request! You're awesome.
+  We use [semantic commit messages](https://github.com/electron/electron/blob/main/docs/development/pull-requests.md#commit-message-guidelines) to streamline the release process. Before your pull request can be merged, you should **update your pull request title** to start with a semantic prefix.
+  Examples of titles with semantic prefixes:
+    - `fix: Bug with ssl network connections + Java module permissions.`
+    - `feat: Initial support for multiple @PrimaryKey annotations`.
+    - `docs: update RELEASE.md with new process`
+  To get this PR to the finish line, please do the following:
+    - Include tests when adding/changing behavior
+    - Include screenshots
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  :partying_face: Congrats on getting your first pull request merged!
+  <br><br> ![](https://media.giphy.com/media/l4KhQo2MESJkc6QbS/giphy.gif)
+
+# It is recommend to include as many gifs and emojis as possible

.github/lighthouserc.js

@@ -0,0 +1,35 @@
+let previewBaseUrl = process.env.LHCI_PREVIEW_URL || 'http://localhost:3000';
+console.log("Initial preview URL:", previewBaseUrl);
+
+module.exports = {
+  ci: {
+    collect: {
+      url: [
+        `${previewBaseUrl}/`,
+        `${previewBaseUrl}/feeds`,
+        `${previewBaseUrl}/feeds/gtfs/mdb-2126`,
+        `${previewBaseUrl}/feeds/gtfs_rt/mdb-2585`,
+        `${previewBaseUrl}/gbfs/gbfs-flamingo_porirua`
+      ],
+      numberOfRuns: 1, // 1 to speed up the CI process but can be increased for more reliable results
+      settings: {
+        formFactor: 'desktop',
+        throttlingMethod: 'provided',
+        skipAudits: ['robots-txt', 'is-crawlable'],
+        screenEmulation: {
+          mobile: false,
+          width: 1350,
+          height: 940,
+          deviceScaleRatio: 1,
+          disabled: false
+        },
+        extraHeaders: JSON.stringify({
+          'x-vercel-protection-bypass': String(process.env.VERCEL_AUTOMATION_BYPASS_SECRET)
+        })
+      }
+    },
+    upload: {
+      target: 'temporary-public-storage'
+    }
+  }
+};

.github/workflows/README.md

@@ -0,0 +1,14 @@
+## Vercel Deployments
+
+### Feature PR to main [vercel-preview-pr.yml](./vercel-preview-pr.yml)
+- Runs checks: lint, test, e2e:test
+- Creates a preview URL to test feature using the DEV environment
+- Generate Lighthouse report based on preview URL
+
+### When feature is merged to main 
+- Vercel automatically deploys any new changes done in main to the staging environment
+- No github workflow
+
+### Production Release [vercel-prod-on-release.yml](./vercel-prod-on-release.yml)
+- Done automatically on Github releases 
+- Can be manually triggered

.github/workflows/vercel-preview-pr.yml

@@ -0,0 +1,147 @@
+name: Vercel Preview (PR)
+
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize, reopened]
+
+concurrency:
+  group: vercel-preview-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  deploy_preview:
+    # ✅ Only run for same-repo PRs (not forks)
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - name: Checkout PR
+        uses: actions/checkout@v4
+
+      - name: 1Password - Load Secrets
+        uses: 1Password/load-secrets-action@v2.0.0
+        with:
+          export-env: true
+        env:
+          OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
+          VERCEL_TOKEN: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/MobilityDatabase Vercel Deployment/VERCEL_TOKEN-it-account"
+          VERCEL_PROJECT_ID: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/MobilityDatabase Vercel Deployment/VERCEL_PROJECT_ID"
+          VERCEL_ORG_ID: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/MobilityDatabase Vercel Deployment/VERCEL_ORG_ID"
+          VERCEL_AUTOMATION_BYPASS_SECRET: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/MobilityDatabase Vercel Deployment/VERCEL_AUTOMATION_BYPASS_SECRET"
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.12.0
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --prefer-offline
+
+      - name: Cache Cypress binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: cypress-${{ runner.os }}-binary-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            cypress-${{ runner.os }}-binary-
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Unit tests
+        run: yarn test:ci
+
+      - name: Install Vercel CLI
+        run: npm i -g vercel@latest
+
+      - name: Pull environment variables from Vercel for e2e tests
+        run: vercel env pull .env.local --environment=preview --yes --token=${{ env.VERCEL_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ env.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ env.VERCEL_PROJECT_ID }}
+
+      - name: Cypress test
+        uses: cypress-io/github-action@v6
+        with:
+          start: yarn e2e:setup
+          command: yarn e2e:run
+          wait-on: 'http://127.0.0.1:3001, http://127.0.0.1:9099'
+          wait-on-timeout: 120
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: ./cypress/screenshots
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: cypress-videos
+          path: ./cypress/videos
+
+      - name: Wait for Vercel deployment and get preview URL
+        id: get_vercel_url
+        uses: patrickedqvist/wait-for-vercel-preview@v1.3.3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          vercel_protection_bypass_header: ${{ env.VERCEL_AUTOMATION_BYPASS_SECRET }}
+          max_timeout: 300
+
+      - name: Lighthouse Check
+        id: lighthouse-check
+        uses: treosh/lighthouse-ci-action@v12
+        # Runs on: Homepage, Search page, GTFS page, GTFS-RT page, and GBFS page
+        with:
+          configPath: ./.github/lighthouserc.js
+          temporaryPublicStorage: true
+        env:
+          LHCI_PREVIEW_URL: ${{ steps.get_vercel_url.outputs.url  }}
+          VERCEL_TOKEN: ${{ env.VERCEL_TOKEN }}
+
+      - name: Format lighthouse score
+        id: format_lighthouse_score
+        uses: actions/github-script@v3
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const results = ${{ steps.lighthouse-check.outputs.manifest }}
+            const links = ${{ steps.lighthouse-check.outputs.links }}
+            let comment = []
+            results.forEach((resultData, index) => {
+                const result = resultData.summary;
+
+                const formatResult = (res) => Math.round((res * 100))
+                Object.keys(result).forEach(key => result[key] = formatResult(result[key]))
+
+                const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'
+                const link = Object.keys(links)[index] ?? 'Unknown URL';
+                const linkUrl = links[link] ?? '#';
+                comment = comment.concat(...[
+                    `*Lighthouse ran on ${link} * (Desktop)`,
+                    `⚡️ HTML Report [Lighthouse report](${linkUrl}) for the changes in this PR:`,
+                    '| Performance | Accessibility | Best Practices | SEO |',
+                    '| --- | --- | --- | --- |',
+                    `| ${score(result.performance)} ${result.performance} | ${score(result.accessibility)} ${result.accessibility} | ${score(result['best-practices'])} ${result['best-practices']} | ${score(result.seo)} ${result.seo} |`,
+                    ' ',
+                    ' ',
+                ])
+            })
+            const finalComment = comment.join('\n')
+            core.setOutput("comment", finalComment); 
+
+      - name: Add lighthouse comment to PR
+        id: comment_to_pr
+        uses: marocchino/sticky-pull-request-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.issue.number }}
+          header: lighthouse
+          message: |
+            ${{ steps.format_lighthouse_score.outputs.comment }}

.github/workflows/vercel-prod-on-release.yml

@@ -0,0 +1,66 @@
+name: Deploy to Vercel Production on Release
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout release tag
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: 1Password - Load Secrets
+        uses: 1Password/load-secrets-action@v2.0.0
+        with:
+          export-env: true
+        env:
+          OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
+          VERCEL_TOKEN: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/MobilityDatabase Vercel Deployment/VERCEL_TOKEN-it-account"
+          VERCEL_PROJECT_ID: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/MobilityDatabase Vercel Deployment/VERCEL_PROJECT_ID"
+          VERCEL_ORG_ID: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/MobilityDatabase Vercel Deployment/VERCEL_ORG_ID"
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.12.0
+          cache: 'yarn'
+
+      - name: Install Vercel CLI
+        run: npm i -g vercel@latest
+
+      - name: Pull Vercel env (production)
+        run: vercel pull --yes --environment=production --token=${{ env.VERCEL_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ env.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ env.VERCEL_PROJECT_ID }}
+
+      - uses: actions/cache@v4
+        with:
+            path: .next/cache
+            key: ${{ runner.os }}-nextcache-node24.12.0-${{ hashFiles('yarn.lock') }}-${{ github.sha }}
+            restore-keys: |
+                ${{ runner.os }}-nextcache-node24.12.0-${{ hashFiles('yarn.lock') }}-
+
+
+      - name: Install deps
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: vercel build --prod --token=${{ env.VERCEL_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ env.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ env.VERCEL_PROJECT_ID }}
+
+      - name: Deploy
+        run: vercel deploy --prebuilt --prod --token=${{ env.VERCEL_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ env.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ env.VERCEL_PROJECT_ID }}

.gitignore

@@ -34,3 +34,5 @@ cypress/videos
 .next
 next-env.d.ts
 .vercel
+
+.vscode/settings.json

cypress.config.ts

@@ -1,13 +1,11 @@
 import { defineConfig } from 'cypress';
 import * as dotenv from 'dotenv';
 const localEnv = dotenv.config({ path: './.env.development' }).parsed || {};
-const ciEnv = dotenv.config({ path: './.env.test' }).parsed || {};
+const ciEnv = dotenv.config({ path: './.env.local' }).parsed || {};
 
-const isEnvEmpty = (obj) => {
-  return !obj || Object.keys(obj).length === 0;
-};
+const isCI = process.env.CI === 'true' || process.env.GITHUB_ACTIONS === 'true';
+const chosenEnv = isCI ? ciEnv : localEnv;
 
-const chosenEnv = isEnvEmpty(localEnv) ? ciEnv : localEnv;
 
 export default defineConfig({
   env: chosenEnv,

next.config.mjs

@@ -3,9 +3,6 @@ import createNextIntlPlugin from 'next-intl/plugin';
 const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: 'standalone',
-  //assetPrefix: process.env.ASSET_PREFIX, // https://static.example.com This would be the URL to the CDN where static assets are hosted
-};
+const nextConfig = {};
 
 export default withNextIntl(nextConfig);

package.json

@@ -137,5 +137,8 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "wait-on": "^7.0.1"
+  },
+  "engines": {
+    "node": "24.x"
   }
 }