feat: Lighthouse setup

.github/workflows/cd.deploy.stg.yml

@@ -4,6 +4,9 @@ on:
   push:
     tags:
       - "stg-v*"
+    # @TODO-ZM: remove this
+    branches:
+      - "lighthouse-setup"
   workflow_dispatch:
 
 jobs:
@@ -50,3 +53,14 @@ jobs:
         run: npm run generate:sentry-release $DEPLOY_VERSION stage ${{ secrets.SENTRY_AUTH_TOKEN }}
       - name: "Deploy"
         run: npm run deploy:stg
+
+  lighthouse:
+    needs: bundle-deploy
+    uses: ./.github/workflows/ci.reusable.lighthouse.yml
+    with:
+      serverBaseUrl: "https://lh-stage.dzcode.io"
+      testBaseUrl: "https://stage.dzcode.io"
+      stage: "staging"
+    secrets:
+      LH_SERVER_TOKEN_STG: ${{ secrets.LH_SERVER_TOKEN_STG }}
+      LH_SERVER_TOKEN_PRD: ${{ secrets.LH_SERVER_TOKEN_PRD }}

.github/workflows/cd.deploy.yml

@@ -49,3 +49,14 @@ jobs:
         run: npm run generate:sentry-release $DEPLOY_VERSION production ${{ secrets.SENTRY_AUTH_TOKEN }}
       - name: "Deploy"
         run: npm run deploy
+
+  lighthouse:
+    needs: bundle-deploy
+    uses: ./.github/workflows/ci.reusable.lighthouse.yml
+    with:
+      serverBaseUrl: "https://lh.dzcode.io"
+      testBaseUrl: "https://www.dzcode.io"
+      stage: "production"
+    secrets:
+      LH_SERVER_TOKEN_STG: ${{ secrets.LH_SERVER_TOKEN_STG }}
+      LH_SERVER_TOKEN_PRD: ${{ secrets.LH_SERVER_TOKEN_PRD }}

.github/workflows/ci.reusable.lighthouse.yml

@@ -0,0 +1,103 @@
+on:
+  workflow_call:
+    inputs:
+      testBaseUrl:
+        required: true
+        type: string
+      serverBaseUrl:
+        required: true
+        type: string
+      stage:
+        required: true
+        type: string
+        description: "staging or production"
+    secrets:
+      LH_SERVER_TOKEN_STG:
+        required: true
+      LH_SERVER_TOKEN_PRD:
+        required: true
+
+jobs:
+  urls-for-lighthouse:
+    runs-on: ubuntu-latest
+    env:
+      LH_TEST_BASE_URL: ${{ inputs.testBaseUrl }}
+    steps:
+      - name: "Git"
+        uses: actions/checkout@v4
+      - name: "Nodejs"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: build output (ubuntu-latest, 20)
+      - name: Define Urls
+        id: define-urls
+        run: |
+          node web/lighthouserc.cjs --output-urls >> "$GITHUB_OUTPUT"
+    outputs:
+      urls: ${{ steps.define-urls.outputs.urls }}
+
+  lighthouse-collect:
+    needs: urls-for-lighthouse
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        url: ${{fromJson(needs.urls-for-lighthouse.outputs.urls)}}
+    env:
+      LH_TEST_BASE_URL: ${{ inputs.testBaseUrl }}
+      LH_OVERWRITE_URL: ${{ matrix.url }}
+
+    steps:
+      - name: "Git"
+        uses: actions/checkout@v4
+      - name: "Nodejs"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: build output (ubuntu-latest, 20)
+      - run: npx lerna run lh:collect --scope "@dzcode.io/web"
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: lighthouse output (${{ hashFiles('web/.lighthouseci/**') }})
+          path: ./web/.lighthouseci/**
+          if-no-files-found: error
+          include-hidden-files: true
+          retention-days: 1
+
+  lighthouse-upload:
+    needs: lighthouse-collect
+    runs-on: ubuntu-latest
+    env:
+      LH_SERVER_BASE_URL: ${{ inputs.serverBaseUrl }}
+      LH_SERVER_TOKEN: ${{ inputs.stage == 'staging' && secrets.LH_SERVER_TOKEN_STG || secrets.LH_SERVER_TOKEN_PRD }}
+    steps:
+      - name: "Git"
+        uses: actions/checkout@v4
+      - name: "Nodejs"
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: build output (ubuntu-latest, 20)
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          pattern: lighthouse*
+          merge-multiple: true
+          path: ./web/.lighthouseci
+      - run: npx lerna run lh:upload --scope "@dzcode.io/web"

.gitignore

@@ -29,6 +29,7 @@ src/_e2e-test/videos
 src/_e2e-test/screenshots
 cloudflare/public
 **/cloudflare/public
+**.lighthouseci
 
 # mobile
 mobile/.expo

README.md

@@ -7,6 +7,7 @@ The code for [dzcode.io](https://dzcode.io), a website for Algerian open-source
 **Apps:**
 
 - [`./web`](./web) ( [dzcode.io](https://dzcode.io) or [stage.dzcode.io](https://stage.dzcode.io) )
+  - lighthouse results are in: [lh.dzcode.io](https://lh.dzcode.io) and [lh-stage.dzcode.io](https://lh-stage.dzcode.io)
 - [`./api`](./api) ( [api.dzcode.io](https://api.dzcode.io) or [api-stage.dzcode.io](https://api-stage.dzcode.io) )
 
 **Packages**
@@ -112,4 +113,4 @@ Follow [these steps](https://github.com/dzcode-io/dzcode.io/blob/main/data/model
 
 ## License
 
-Copyright (c) 2021 DzCode i/o (twitter: [@dzcode_io](https://twitter.com/dzcode_io)) Licensed under the MIT license.
+Licensed under the MIT license (twitter: [@dzcode_io](https://twitter.com/dzcode_io)).

api/oracle-cloud/deploy.ts

@@ -1,5 +1,5 @@
 // can be ran locally from ./api:
-// SSH_ADDRESS_STG="root@x.x.x.x" SSH_PATH="path/to/private/ssh/key" npm run deploy:stg
+// SSH_ADDRESS_STG="user@x.x.x.x" SSH_PATH="path/to/private/ssh/key" npm run deploy:stg
 
 import { execSync } from "child_process";
 import { copySync, existsSync } from "fs-extra";
@@ -29,6 +29,7 @@ const fromToRecords = dependencies
 fromToRecords.push(
   { from: "./oracle-cloud/docker-compose.yml", to: "./oracle-cloud/build/docker-compose.yml" },
   { from: "./oracle-cloud/Dockerfile", to: "./oracle-cloud/build/Dockerfile" },
+  { from: "./oracle-cloud/nginx.conf", to: "./oracle-cloud/build/nginx.conf" },
   { from: join(workspaceRoot, "package.json"), to: "./oracle-cloud/build/package.json" },
   { from: join(workspaceRoot, "package-lock.json"), to: "./oracle-cloud/build/package-lock.json" },
 );

api/oracle-cloud/docker-compose.yml

@@ -1,12 +1,27 @@
 version: "3"
 services:
+  reverse-proxy:
+    image: nginx
+    ports:
+      - "80:80"
+    depends_on:
+      - api
+      - lhserver
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf
   api:
     build: "."
     # restart: always
     ports:
-      - "80:7070"
+      - "7070:7070"
     env_file:
       - /home/ubuntu/app-env/api.env
     volumes:
       - /home/ubuntu/app-data/api/fetch_cache:/usr/src/repo/api/fetch_cache
       - /home/ubuntu/app-data/api/sqlite_db:/usr/src/repo/api/sqlite_db
+  lhserver:
+    image: patrickhulce/lhci-server
+    ports:
+      - "9001:9001"
+    volumes:
+      - /home/ubuntu/app-data/web/lh_data:/data

api/oracle-cloud/nginx.conf

@@ -0,0 +1,32 @@
+events {
+}
+
+
+http {
+    server {
+        client_max_body_size 10M;
+        listen 80;
+        # redirect traffic from lh-stage.dzcode.io, lh_stage.dzcode.io, lh.dzcode.io to lhserver:9001
+        # and from api-stage.dzcode.io, api_stage.dzcode.io, api.dzcode.io to api:7070
+        location / {
+            if ($host ~* ^lh-stage.dzcode.io$) {
+                proxy_pass http://lhserver:9001;
+            }
+            if ($host ~* ^lh_stage.dzcode.io$) {
+                proxy_pass http://lhserver:9001;
+            }
+            if ($host ~* ^lh.dzcode.io$) {
+                proxy_pass http://lhserver:9001;
+            }
+            if ($host ~* ^api-stage.dzcode.io$) {
+                proxy_pass http://api:7070;
+            }
+            if ($host ~* ^api_stage.dzcode.io$) {
+                proxy_pass http://api:7070;
+            }
+            if ($host ~* ^api.dzcode.io$) {
+                proxy_pass http://api:7070;
+            }
+        }
+    }
+}

packages/tooling/.prettierignore

@@ -31,3 +31,4 @@ nodemon.json
 *.ts-prunerc
 *.patch
 *.sql
+*.conf

web/lighthouserc.cjs

@@ -0,0 +1,33 @@
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { allLanguages } = require("@dzcode.io/models/dist/language");
+
+const baseUrl = process.env.LH_TEST_BASE_URL;
+const serverBaseUrl = process.env.LH_SERVER_BASE_URL;
+const token = process.env.LH_SERVER_TOKEN;
+const overwriteURL = process.env.LH_OVERWRITE_URL;
+
+let urls = ["", "/contribute", "/team", "/projects", "/faq"];
+
+const args = process.argv.slice(2);
+if (args.includes("--output-urls")) {
+  console.log(`urls=${JSON.stringify(urls)}`);
+} else if (typeof overwriteURL !== "undefined") {
+  urls = [overwriteURL];
+}
+
+module.exports = {
+  ci: {
+    collect: {
+      url: urls.reduce((acc, path) => {
+        return acc.concat(
+          allLanguages.map(({ code }) => `${baseUrl}${code === "en" ? "" : `/${code}`}${path}`),
+        );
+      }, []),
+    },
+    upload: {
+      target: "lhci",
+      serverBaseUrl,
+      token,
+    },
+  },
+};

web/package.json

@@ -79,6 +79,8 @@
     "start:dev": "rsbuild dev --open",
     "test": "npm run build && npm run test:alone",
     "test:alone": "jest --config ../packages/tooling/jest.config.ts --rootDir .",
-    "test:watch": "npm-run-all build --parallel build:watch \"test:alone --watch {@}\" --"
+    "test:watch": "npm-run-all build --parallel build:watch \"test:alone --watch {@}\" --",
+    "lh:collect": "npx --yes @lhci/cli collect",
+    "lh:upload": "npx --yes @lhci/cli upload"
   }
 }