Instructions on how to setup lighthouse ci

LIGHTHOUSECI.md

To set up LHCI autorun in your Rails app, you can add the following steps to your Rails CI pipeline:

1. Install LHCI
2. Create a LHCI configuration file
3. Add a step to your CI pipeline that runs LHCI autorun

Install LHCI

npm install lhci

Create a LHCI configuration file

{
  "extends": "lighthouse:recommended",
  "audits": ["performance"],
  "categories": {
    "performance": {
      "weight": 1
    }
  }
}

Add a step to your CI pipeline that runs LHCI autorun

npm run lhci autorun

Example Rails CI pipeline

name: Arc Platform CI Workflow
on: [push, pull_request]
jobs:
  linters:
    name: RuboCop Linter
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Ruby 3.0.2
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.0.2' # Not needed with a .ruby-version file
          bundler-cache: true

      - run: bundle exec rubocop

  test:
    name: Rails Test
    runs-on: ubuntu-latest
    services:
      db:
        image: postgres:11@sha256:85d79cba2d4942dad7c99f84ec389a5b9cc84fb07a3dcd3aff0fb06948cdc03b
        ports: ['5432:5432']
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
      - uses: actions/checkout@v3
      - name: Setup Ruby 3.0.2
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.0.2' # Not needed with a .ruby-version file
          bundler-cache: true

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16.13.1
      - name: Find yarn cache location
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - name: JS package cache
        uses: actions/cache@v1
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: Install packages
        run: |
          yarn install --pure-lockfile

      - name: Build and run tests
        env:
          DATABASE_URL: postgres://postgres:@localhost:5432/test
          #POSTGRES_PASSWORD: postgres
          RAILS_ENV: test
          #RAILS_MASTER_KEY: ${{ secrets.RAILS_MASTER_KEY }}
        run: |
          sudo apt-get -yqq install libpq-dev
          gem install bundler
          bundle install --jobs 4 --retry 3
          bin/rails javascript:build
          bin/rails css:build
          bundle exec rails db:prepare
          bundle exec rails test

      - name: Run LHCI autorun
        run: npm run lhci autorun

This Rails CI pipeline will run LHCI autorun at every push to your GitHub repository. The Lighthouse report will be generated in the lhci folder. You can then review the report in the lhci folder.

Benefits of using LHCI autorun

• LHCI autorun will automatically start the Rails server and run Lighthouse on the specified URL.
• LHCI autorun will generate a Lighthouse report in the lhci folder. This report can be reviewed to identify any performance issues that need to be addressed.
• LHCI autorun can be integrated into your CI pipeline to ensure that your Rails app is always performing at its best.