ci: update deploy, lighthouse and playwright actions (#245)

* ci: update deploy-to-gh-pages.yml

* build: change config

* ci: refactoring of deployment action

* ci: fix lighthouse action

* ci: fix deploy action

* test: fix playwright config

* ci: fix lighthouse config file

* ci(lighthouse): fix urls

* ci(lighthouse): fix startServerCommand

* ci(lighthouse): fix lighthouse config

* ci(lighthouse): fix lighthouse urls

* fix: 404 page

.github/workflows/deploy-to-gh-pages.yml

@@ -7,11 +7,14 @@ on:
     tags:
       - '**'
 
-env:
-  VITE_GROWTH_BOOK_KEY: key_prod_b3021771bb20a0c2
+  workflow_dispatch:
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
 
 jobs:
-  publish:
+  build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -27,11 +30,29 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
-      - name: Deploy with gh-pages
-        run: |
-          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-          npm run deploy -- -u "github-actions-bot <[email protected]>"
+        run: pnpm install --frozen-lockfile
+      - name: Build
+        run: pnpm run build
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           VITE_GROWTH_BOOK_KEY: ${{ secrets.VITE_GROWTH_BOOK_KEY }}
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: 'dist/'
+
+  deploy:
+    needs: build
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/lighthouse.yml

@@ -3,7 +3,7 @@ name: Lighthouse CI
 on: [push]
 
 env:
-  VITE_GROWTH_BOOK_KEY: key_prod_b3021771bb20a0c2
+  VITE_GROWTH_BOOK_KEY: ${{ secrets.VITE_GROWTH_BOOK_KEY }}
 
 jobs:
   lighthouseci:
@@ -21,8 +21,10 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
-      - run: pnpm i && pnpm install -g @lhci/[email protected]
-      - run: pnpm run build
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile && pnpm add -g @lhci/[email protected]
+      - name: Build
+        run: pnpm run build
       - run: lhci autorun
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

.github/workflows/lint.yml

@@ -19,6 +19,6 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
       - name: Run ESLint
         run: pnpm run lint

.github/workflows/playwright.yml

@@ -27,11 +27,11 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpm exec playwright install --with-deps
       - name: Run Playwright tests
-        run: npx playwright test
+        run: pnpm exec playwright test
       - uses: actions/upload-artifact@v3
         if: always()
         with:

.github/workflows/test.yml

@@ -19,6 +19,6 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
       - name: Run tests
         run: pnpm test

lighthouserc.yml

@@ -1,13 +1,12 @@
 ci:
   collect:
     numberOfRuns: 5
-    startServerCommand: npm run preview
     url:
       [
-        'http://localhost',
-        'http://localhost/posts/1',
-        'http://localhost/posts/1/edit',
-        'http://localhost/posts/new',
+        'http://localhost/local-microblogging-client/',
+        'http://localhost/local-microblogging-client/posts/1',
+        'http://localhost/local-microblogging-client/posts/1/edit',
+        'http://localhost/local-microblogging-client/posts/new',
       ]
     staticDistDir: './dist'
     isSinglePageApplication: true

package.json

@@ -14,8 +14,7 @@
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "e2e": "playwright test",
-    "predeploy": "vite build --base=/local-microblogging-client/",
-    "deploy": "gh-pages -d dist",
+    "deploy": "act -j publish",
     "release": "standard-version",
     "lint": "eslint --ext .tsx,.jsx,.js,.ts src/",
     "storybook": "storybook dev -p 6006",
@@ -46,7 +45,7 @@
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.1.0",
     "autoprefixer": "^10.4.7",
     "cssnano": "^6.0.1",
     "eslint": "^8.47.0",
@@ -59,7 +58,6 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
-    "gh-pages": "^6.0.0",
     "msw": "^1.2.2",
     "postcss": "^8.4.18",
     "postcss-nesting": "12.0.1",
@@ -68,7 +66,7 @@
     "storybook": "^7.1.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.3",
-    "vite": "^4.4.7",
+    "vite": "^4.4.9",
     "vite-plugin-pwa": "^0.16.4",
     "vitest": "^0.34.2"
   },

playwright.config.ts

@@ -39,7 +39,7 @@ const config: PlaywrightTestConfig = {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http:/localhost:4173/',
+    baseURL: 'http:/localhost:4173/local-microblogging-client/',
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
@@ -101,8 +101,9 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run build && npm run preview',
-    port: 4173,
+    command: 'pnpm run build && pnpm run preview',
+    url: 'http://localhost:4173/local-microblogging-client/',
+    reuseExistingServer: !process.env.CI,
   },
 };