Integrating Lighthouse CI with Popular CI/CD Tools

In today’s fast-paced digital world, ensuring that your web applications are performing optimally is more critical than ever. Google’s Lighthouse is an open-source, automated tool that helps developers improve the quality of their web pages. It runs audits for performance, accessibility, SEO, and more. Integrating Lighthouse CI into your CI/CD (Continuous Integration/Continuous Deployment) pipeline can automate these audits, providing continuous feedback and ensuring that your web applications maintain high standards over time.

This blog will guide you through integrating Lighthouse CI with some popular CI/CD tools: Jenkins, GitHub Actions, and GitLab CI. By the end of this blog, you’ll have a comprehensive understanding of how to automate Lighthouse audits in your CI/CD pipelines.

What is Lighthouse CI?

Lighthouse CI (LHCI) is a suite of tools that make it easy to run Lighthouse audits as part of your CI process. It provides features like performance monitoring, data storage, and result comparisons over time. Integrating Lighthouse CI into your CI/CD pipeline allows you to:

1. Automate Audits: Run Lighthouse audits on every commit or deployment.
2. Monitor Performance: Track performance metrics over time.
3. Catch Regressions: Identify performance regressions early in the development process.
4. Ensure Quality: Maintain high standards for performance, accessibility, SEO, and best practices.

Setting Up Lighthouse CI

Before integrating Lighthouse CI with any CI/CD tool, you need to set up Lighthouse CI in your project. Here’s how:

1. Install Lighthouse CI:

npm install -g @lhci/cli

2. Create a Configuration File: Create an lighthouserc.json file in your project root:

{
  "ci": {
    "collect": {
      "url": ["http://localhost:8080"],
      "numberOfRuns": 5
    },
    "assert": {
      "preset": "lighthouse:recommended"
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

3. Run Lighthouse CI Locally: To ensure everything is set up correctly, run:

lhci autorun

Now that Lighthouse CI is set up, let’s integrate it with popular CI/CD tools.

Integrating with Jenkins

Jenkins is a popular open-source automation server. Integrating Lighthouse CI with Jenkins involves the following steps:

1. Install Node.js: Ensure Node.js is installed on your Jenkins server. You can install Node.js using the NodeJS Plugin for Jenkins.

2. Create a Jenkins Pipeline: Create a new pipeline job in Jenkins and add the following script:

pipeline {
    agent any

    stages {
        stage('Checkout') {
            steps {
                checkout scm
            }
        }

        stage('Install Dependencies') {
            steps {
                sh 'npm install'
                sh 'npm install -g @lhci/cli'
            }
        }

        stage('Build') {
            steps {
                sh 'npm run build'
            }
        }

        stage('Start Server') {
            steps {
                sh 'npm start &'
                script {
                    sleep 10 // Wait for the server to start
                }
            }
        }

        stage('Run Lighthouse CI') {
            steps {
                sh 'lhci autorun'
            }
        }
    }

    post {
        always {
            sh 'pkill -f "npm start"' // Kill the server
        }
    }
}

3. Run the Pipeline: Trigger the Jenkins pipeline and monitor the output. Lighthouse CI will run during the Run Lighthouse CI stage, and the results will be available in the Jenkins console output.

Integrating with GitHub Actions

GitHub Actions is GitHub’s CI/CD platform that allows you to automate workflows directly in your GitHub repository. Here’s how to integrate Lighthouse CI with GitHub Actions:

1. Create a GitHub Actions Workflow: Create a new workflow file .github/workflows/lighthouse-ci.yml in your repository.

name: Lighthouse CI

on: [push, pull_request]

jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm install

    - name: Install Lighthouse CI
      run: npm install -g @lhci/cli

    - name: Build project
      run: npm run build

    - name: Start server
      run: |
        npm start &
        sleep 10

    - name: Run Lighthouse CI
      run: lhci autorun

2. Commit and Push: Commit and push the workflow file to your repository. GitHub Actions will automatically trigger the workflow on every push or pull request.

3. Monitor the Workflow: Navigate to the Actions tab in your GitHub repository to monitor the workflow. You’ll see the results of the Lighthouse CI run in the workflow logs.

Integrating with GitLab CI

GitLab CI is a powerful CI/CD tool integrated into GitLab. To integrate Lighthouse CI with GitLab CI, follow these steps:

1. Create a .gitlab-ci.yml file in your repository:

stages:
  - build
  - test

install_dependencies:
  stage: build
  script:
    - npm install
    - npm install -g @lhci/cli

build:
  stage: build
  script:
    - npm run build

lighthouse_ci:
  stage: test
  script:
    - npm start &
    - sleep 10
    - lhci autorun
  after_script:
    - pkill -f "npm start"

2. Commit and Push: Commit and push the .gitlab-ci.yml file to your repository. GitLab CI will automatically trigger the pipeline.

3. Monitor the Pipeline: Navigate to the CI/CD > Pipelines section in your GitLab project to monitor the pipeline. You’ll see the results of the Lighthouse CI run in the pipeline logs.

Conclusion

Integrating Lighthouse CI into your CI/CD pipeline is a powerful way to automate performance, accessibility, SEO, and best practices audits for your web applications. Whether you use Jenkins, GitHub Actions, or GitLab CI, the process is straightforward and can be customized to fit your specific needs.

By following the steps outlined in this blog, you can ensure that your web applications maintain high standards over time, catch regressions early, and continuously monitor performance metrics. This not only improves the quality of your web applications but also enhances the overall user experience.

Start integrating Lighthouse CI with your CI/CD tools today and take a proactive approach to maintaining the quality of your web applications!

I hope this gave you some useful insights. Please feel free to drop any comments, questions or suggestions. Thank You !!!