Boost Your Dev Workflow: Automate with GitHub Actions

This is a follow-up from an excellent article written by fellow community member @gervaisamoah, check it out if you haven't already: Introduction to GitHub Actions: Easy Guide

Now, what?

Building on that foundation, here are two additional examples that are not only easy to implement, but also help boost your dev workflow.

Example 1: Running Lighthouse CI

Lighthouse CI is a useful tool for auditing web performance, accessibility, SEO, and best practices. Integrating Lighthouse CI into your GitHub Actions workflow will not only grade your web application, but also provide you with helpful pointers on what you can do to improve the experience for your users.

Sample Lighthouse CI Report

Sample test with the 'Performance' and 'Accessibility' checks selected

Step 1: Install Lighthouse CI

Ensure you have Lighthouse CI installed as a development dependency:

npm install --save-dev @lhci/cli

Step 2: Create the .lighthouserc.js Configuration File

Create a .lighthouserc.js file at the root of your repository to configure Lighthouse CI.

module.exports = {
    ci: {
      collect: {
        // Define which URLs to run Lighthouse against.
        url: [
          'https://example.com', 
          'https://example.com/about-us',
          'https://example.com/products/sample', 
          'https://example.com/blogs/article'
        ],
        // Set no. of runs to minimise variance in calculations.
        numberOfRuns: 3, 
        settings: {
          chromeFlags: '--no-sandbox', // Chrome flags if necessary.
          onlyCategories: ['performance', 'accessibility'], // Specify categories to test - other available categories include: 'best-practices', 'seo'.
        }
      },
      assert: {
        // Define assertions and the thresholds for passing.
        assertions: {
          'categories:performance': ['warn', { minScore: 0.75, aggregationMethod: 'median-run' }], // Warn if performance score falls below 75%.
          'categories:accessibility': ['error', { minScore: 0.95, aggregationMethod: 'pessimistic' }] // Expect 95% accessibility score.
        }
      },
      upload: {
        // Optional: Configure report upload settings if needed.
        target: 'temporary-public-storage', // Simple public storage.
      }
    }
  };

Step 3: Update GitHub Actions Workflow

Finally, update your GitHub Actions workflow file to include Lighthouse CI. Here’s an example of how to do this:

name: Lighthouse CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

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

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 20

    - name: Install dependencies
      run: npm install

    - name: Run Lighthouse CI
      run: npx lhci autorun --config=.lighthouserc.js

With that, you have now automated Lighthouse CI to run each time a push is made to this repo. Check the progress of the automated workflow in the 'Actions' tab on GitHub. When complete, you will find the Lighthouse report has been generated and is linked to in the 'Run Lighthouse CI' job of your workflow.

What this means is that you no longer have an excuse for your web applications to not be snappy and accessible!

Example 2: Running a Scheduled cron Job

In addition to running tests on push, you might want to schedule a workflow to run at regular intervals, see cron. This can either help catch issues that might not be triggered by code changes, or help you make scheduled changes to your code.

For this, I'd love to share a live example: My GitHub Profile

Quick fun fact: You can create and personalise a profile README page to display whenever anyone views your GitHub profile - say NO to boring profile pages! All you need to do is create a public repo and set your GitHub username as the repo name - more details here. Go wild!

When you scroll to the bottom of my GitHub profile, you will notice a 'Featured Artist' section, which is just a small way for me to express my love for music. To refresh this section daily, I set up a cron job using GitHub Actions, to run my refresh-featured-artist.js script daily at midnight.

This is what my workflow file looks like:

name: Refresh Featured Artist

on: 
    schedule: 
        - cron: '0 0 * * *' # Run daily at midnight, based on server time

jobs:
    update-readme:
        runs-on: ubuntu-latest

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

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

            - name: Compile TypeScript
              run: npm run build

            - name: Run script to refresh featured artist
              run: node refresh-featured-artist.js

            - name: Commit and push changes (if any)
              env: 
                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
              run: |
                git add README.md
                git -c user.name='kevinweejh' -c user.email='hello@codebykevin.dev' commit -m "chore: refresh daily featured artist" || exit 1
                git push

Note: The final step in the above workflow commits and pushes the changes. To do this, you will need to assign read and write permissions under 'Workflow permissions'. This can be found by going to your Repo Page -> Settings -> Code and automation -> Actions -> General -> Workflow Permissions (see below)

Setting Workflow Permissions

Conclusion

Integrating Lighthouse CI and setting up scheduled CRON jobs with GitHub Actions can significantly enhance your productivity. I hope that these two simple examples help you to monitor your application’s performance better, and save you some time along the way!

Have you used GitHub Actions in other innovative ways to boost your development workflow? Or just want to showcase your GitHub profile README like a work of art? Share your experiences and profiles below!

If you found this helpful, drop a like and leave a comment below if you’d like more content on automating workflows.