Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Lighthouse Blogpost
# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
variables: {
ARTIFACT_FEED: '[YOUR_FEED_ID]',
CACHE_KEY_FILE: '**/package-lock.json, !**/node_modules/**/package-lock.json, !**/.*/**/package-lock.json',
CACHE_TARGET_FOLDER: '**/node_modules, !**/node_modules/**/node_modules',
WEBSITE_URL_DEV: 'https://[YOUR_DEV_WEBSITE_URL]',
WEBSITE_URL_TST: 'https://[YOUR_TST_WEBSITE_URL]'
}
stages:
- stage: build
displayName: Build
jobs:
- job: install
steps:
- task: RestoreAndSaveCache@1
inputs:
keyfile: '$(CACHE_KEY_FILE)'
targetfolder: '$(CACHE_TARGET_FOLDER)'
vstsFeed: '$(ARTIFACT_FEED)'
platformIndependent: true
displayName: Restore/save node modules from/to cache
- script: npm ci
displayName: Install Dependencies
condition: ne(variables['CacheRestored'], 'true')
- script: npm run build:prod
displayName: Angular build app
- publish: dist/my-angular9-app
artifact: build-artifact
displayName: Publish build artifact
- stage: deploy_dev
displayName: Deploy to dev
jobs:
- deployment: deploy
environment: my-angular9-app-dev
pool:
vmImage: 'ubuntu-latest'
variables:
- group: my-angular-app-dev
- name: 'AZURE_STORAGE_ACCOUNT'
value: '[MY_STORAGE_ACCOUNT_NAME_DEV]'
- name: 'AZURE_STORAGE_KEY'
value: $([MY_STORAGE_KEY_DEV])
strategy:
runOnce:
deploy:
steps:
- download: current
artifact: build-artifact
displayName: Download BuildArtifact
- bash: az storage blob delete-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -s \$web
displayName: Clean blob storage
- bash: az storage blob upload-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -d \$web -s $(Pipeline.Workspace)/build-artifact
displayName: Deploy website
- stage: lighthouse_tst_dev
displayName: Compare lighthouse reports between TST and DEV
jobs:
- job: install
displayName: Install NPM dependencies and run Google Lighthouse
steps:
- task: RestoreAndSaveCache@1
inputs:
keyfile: '$(CACHE_KEY_FILE)'
targetfolder: '$(CACHE_TARGET_FOLDER)'
vstsFeed: '$(ARTIFACT_FEED)'
platformIndependent: true
displayName: Restore/save node modules from/to cache
- script: npm ci
displayName: Install Dependencies
condition: ne(variables['CacheRestored'], 'true')
- bash: |
seo_score_dev=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_DEV))
seo_score_tst=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_TST))
echo "Seo score on DEV: $seo_score_dev"
echo "Seo score on TST: $seo_score_tst"
node -e "$seo_score_tst > $seo_score_dev ? console.error('SEO score on TST is better than on DEV') : console.log('SEO score on DEV is at least the same or better than on TST')"
displayName: Run lighthouse performance check
failOnStderr: true
enabled: true
- stage: deploy_tst
displayName: Deploy to Test
jobs:
- deployment: deploy
environment: my-angular9-app-tst
pool:
vmImage: 'ubuntu-latest'
variables:
- group: my-angular-app-tst
- name: 'AZURE_STORAGE_ACCOUNT'
value: '[MY_STORAGE_ACCOUNT_NAME_TST]'
- name: 'AZURE_STORAGE_KEY'
value: $([MY_STORAGE_KEY_TST])
strategy:
runOnce:
deploy:
steps:
- download: current
artifact: build-artifact
displayName: Download BuildArtifact
- bash: az storage blob delete-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -s \$web
displayName: Clean blob storage
- bash: az storage blob upload-batch --account-name $(AZURE_STORAGE_ACCOUNT) --account-key $(AZURE_STORAGE_KEY) -d \$web -s $(Pipeline.Workspace)/build-artifact
displayName: Deploy website
- stage: lighthouse_tst_dev
displayName: Compare lighthouse reports between TST and DEV
jobs:
- job: install
displayName: Install NPM dependencies and run Google Lighthouse
steps:
- task: RestoreAndSaveCache@1
inputs:
keyfile: '$(CACHE_KEY_FILE)'
targetfolder: '$(CACHE_TARGET_FOLDER)'
vstsFeed: '$(ARTIFACT_FEED)'
platformIndependent: true
displayName: Restore/save node modules from/to cache
- script: npm ci
displayName: Install Dependencies
condition: ne(variables['CacheRestored'], 'true')
- bash: |
seo_score_dev=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_DEV))
seo_score_tst=$(npm run --silent lighthouse -- --url=$(WEBSITE_URL_TST))
echo "Seo score on DEV: $seo_score_dev"
echo "Seo score on TST: $seo_score_tst"
node -e "$seo_score_tst > $seo_score_dev ? console.error('SEO score on TST is better than on DEV') : console.log('SEO score on DEV is at least the same or better than on TST')"
displayName: Run lighthouse performance check
failOnStderr: true
enabled: true
<meta name="description" content="A sample Angular application">
<img src="https://picsum.photos/200">
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const argv = require('yargs').argv;
function launchChromeAndRunLighthouse(url, opts, config = null) {
return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
opts.port = chrome.port;
return lighthouse(url, opts, config).then(results => {
// use results.lhr for the JS-consumable output
// https://github.com/GoogleChrome/lighthouse/blob/master/types/lhr.d.ts
// use results.report for the HTML/JSON/CSV output as a string
// use results.artifacts for the trace/screenshots/other specific case you need (rarer)
return chrome.kill().then(() => results.lhr);
});
});
}
const opts = {
chromeFlags: ['--headless'],
// Use to get the report for desktop clients, default is mobile
emulatedFormFactor: 'desktop'
};
let url: string;
argv.url ? url = argv.url : url = 'http://localhost:4200';
launchChromeAndRunLighthouse(url, opts).then(results => {
console.log(results.categories.seo.score);
});
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const argv = require('yargs').argv;
function launchChromeAndRunLighthouse(url, opts, config = null) {
return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
opts.port = chrome.port;
return lighthouse(url, opts, config).then(results => {
// use results.lhr for the JS-consumable output
// https://github.com/GoogleChrome/lighthouse/blob/master/types/lhr.d.ts
// use results.report for the HTML/JSON/CSV output as a string
// use results.artifacts for the trace/screenshots/other specific case you need (rarer)
return chrome.kill().then(() => results.lhr);
});
});
}
const opts = {
chromeFlags: ['--headless'],
// Use to get the report for desktop clients, default is mobile
emulatedFormFactor: 'desktop'
};
let url: string;
argv.url ? url = argv.url : url = 'http://localhost:4200';
launchChromeAndRunLighthouse(url, opts).then(results => {
console.log(results.categories.seo.score);
});
{
"scripts": {
"lighthouse": "ts-node lighthouse/src/lighthouse.ts"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.