Enhancing TILvert: GitHub Actions CI and Release Workflow
Tags: typescript, testing, githubactions, vite
Published: 2023-11-17 20:38:55

Introduction

Continuous Integration (CI) has become a crucial aspect of maintaining project quality and stability. In this blog post, I'll share how I went about setting up GitHub Actions CI Workflow for my TypeScript Static Site Generator (SSG) app, [TILvert](https://github.com/omalk98/TILvert), and the subsequent release workflow.

## Setting Up GitHub Actions CI Workflow

To ensure the reliability of TILvert, I decided to implement a CI workflow using GitHub Actions. The `main.yml` file in the `.github/workflows` directory outlines the steps for linting, testing, and building the project on every pull request to the master branch.

```yaml
# main.yml

name: CI
on:
  pull_request:
    branches:
      - "master"

jobs:
  lint:
    # ... (steps for linting)

  test:
    # ... (steps for testing)

  build:
    # ... (steps for building)
```

The workflow includes three jobs: 
- linting
- testing
- building 

Each job is configured to run on an Ubuntu environment and utilizes the pnpm package manager for dependency management.

## Comparing with My Partner's Repo

Collaborating on a project with a partner introduced me to different testing setups and CI configurations. While my project uses `Vitest` for testing, my partner's repo employed a different testing framework, `Jest`. Writing tests for a project I didn't create required understanding their codebase and testing conventions. It was a valuable experience that helped better understand testing practices others prefer to use and encouraged me to adopt a more versatile approach. [Pull Request](https://github.com/sdthaker/Node-TILify/pull/19)

## Reflection on CI Implementation

Now that I've set up CI for TILvert, I appreciate the seamless integration of GitHub Actions into my workflow. The automatic execution of linting, testing, and building processes on each pull request provides quick feedback, enabling me to catch issues early in the development cycle. CI has become an important part of my development process, boosting my confidence in the project's stability and ensuring a consistent code quality standard.

## Release Workflow for TILvert

In addition to CI, I implemented a release workflow to automate the process of creating a release branch on the master branch push.

```yaml
# release.yml

name: Release
on:
  push:
    branches:
      - "master"

jobs:
  release:
    # ... (steps for linting, testing, building)

      - name: Create release branch
        run: |
          git config user.email "77292466+omalk98@users.noreply.github.com"
          git config user.name "Omar Hussein"
          git checkout -b release
          git add -f dist/ package.json
          git commit -m "Create release branch"
          git push origin release --force
```

This workflow, triggered on a master branch push, ensures that the latest changes are thoroughly tested before creating a release branch. The release branch includes the dist/ directory and the package.json file, ready for installation. 

[Successful Run](https://github.com/omalk98/TILvert/actions/runs/6908472849)

## Optional Challenges and Learnings

As an additional challenge, I configured the release workflow to force-push the release branch to the remote repository. This posed some initial challenges related to authentication and permissions, but once resolved, it streamlined the release process. I learned about GitHub Actions secrets and the importance of secure practices in automated workflows.

## Conclusion

Integrating CI and release workflows into TILvert has been a rewarding journey. The automated processes have enhanced collaboration, code quality, and overall project reliability. As I continue to iterate on TILvert and explore new features, these workflows will remain integral to maintaining a robust and dependable TypeScript SSG. I encourage fellow developers to delve into GitHub Actions and explore the possibilities it offers for improving their development workflows.