Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

336-feat: configure workflow for lighthouse to run on deployments #351

Merged
merged 2 commits into from
Jun 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions .github/workflows/lighthouse.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
name: Lighthouse test

on:
repository_dispatch:
types: [preview-created]

jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4

- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '20.x'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use the NODE_VERSION env variable as in other workflows


- name: Install dependencies
run: npm install && npm install -g @lhci/[email protected]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd use bahmutov/npm-install@v1 github action


- name: Run Lighthouse
run: lhci autorun --collect.url=https://pr${{ github.event.client_payload.number }}.rs.school
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can I use npx lhci here and remove npm install -g @lhci/[email protected] from the previos step?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried and there is no benefits, workflow execution time becomes even longer. Same with npm-install action.
And the method used here is recommended from lighthouse docs.


- name: Upload Lighthouse artifacts
uses: actions/upload-artifact@v4
with:
name: lighthouse-report
path: '.lighthouseci/*'

- name: Generate Lighthouse report summary
id: generate_report
run: |
REPORT_PATH=$(ls .lighthouseci/lhr-*.json | head -n 1)
FINAL_URL=$(jq -r '.finalUrl' "$REPORT_PATH")
LINKS_PATH=$(ls .lighthouseci/links.json | head -n 1)
REPORT_URL=$(jq -r --arg FINAL_URL "$FINAL_URL" '.[$FINAL_URL]' "$LINKS_PATH")
PERFORMANCE=$(jq -r '.categories.performance.score * 100' "$REPORT_PATH")
ACCESSIBILITY=$(jq -r '.categories.accessibility.score * 100' "$REPORT_PATH")
BEST_PRACTICES=$(jq -r '.categories["best-practices"].score * 100' "$REPORT_PATH")
SEO=$(jq -r '.categories.seo.score * 100' "$REPORT_PATH")
echo "performance=$PERFORMANCE" >> $GITHUB_OUTPUT
echo "accessibility=$ACCESSIBILITY" >> $GITHUB_OUTPUT
echo "bestPractices=$BEST_PRACTICES" >> $GITHUB_OUTPUT
echo "seo=$SEO" >> $GITHUB_OUTPUT
echo "reportUrl=$REPORT_URL" >> $GITHUB_OUTPUT

- name: Post Lighthouse results to PR
uses: peter-evans/create-or-update-comment@v4
with:
issue-number: ${{ github.event.client_payload.number }}
body: |
**Lighthouse Report**:
- Performance: ${{ steps.generate_report.outputs.performance }} / 100
- Accessibility: ${{ steps.generate_report.outputs.accessibility }} / 100
- Best Practices: ${{ steps.generate_report.outputs.bestPractices }} / 100
- SEO: ${{ steps.generate_report.outputs.seo }} / 100

[View detailed report](${{ steps.generate_report.outputs.reportUrl }})
8 changes: 8 additions & 0 deletions lighthouserc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"ci": {
"collect": { "numberOfRuns": 1 },
"upload": {
"target": "temporary-public-storage"
}
}
}
Loading