Boost Your Dev Workflow: Automate with GitHub Actions
Tags: githubactions, beginners, webdev, automation
Published: 2024-06-21 07:08:03

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](https://dev.to/gervaisamoah/introduction-to-github-actions-easy-guide-3p23) 

## 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](https://github.com/GoogleChrome/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 Lighthouse CI Report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7stcd5zb1f0z5zvxnrui.png)*Sample test with the 'Performance' and 'Accessibility' checks selected*

### Step 1: Install Lighthouse CI
Ensure you have Lighthouse CI installed as a development dependency:

```bash
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. 

```javascript
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:

```yaml
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](https://en.wikipedia.org/wiki/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](https://github.com/kevinweejh/kevinweejh)

> 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](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme#adding-a-profile-readme). 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: 
```yaml
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1gmvfyzblxarya84609.png)*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.