Fixing GitHub Actions development using GitHub Actions
Tags: github, actions, git, javascript
Published: 2021-01-06 15:40:06

---
title: Fixing GitHub Actions development using GitHub Actions
published: true
description: Stop manually pushing JavaScript bundles to git for your GithHub Actions. 
tags: github, actions, git, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/e63azfy4jsu0rt0hlqwp.png
---

If you ever browsed the source code of any GitHub Action that you had encountered in the wild, for sure you realized that most authors **push bundled JavaScript code directly to a git repository**. Usually - it's a single file like `action.js`, but in the worst case it's a set of files with the whole `node_modules` committed directly to the git 😱

## Why is it a bad idea?

There are various reasons why you might want to avoid that. First of all, it makes code reviews harder. Reviewers now have to take a look at the committed bundle or add additional tooling to verify if the user doesn't try pushing anything fishy instead of a proper bundle. It's a 10k line blob - who's gonna check it anyway?
 
Bundled files can easily produce merge conflicts which add even more unnecessary work for maintainers. It's confusing for newcomers too, "should I commit this blob or what?". Not to mention, it's just plain ugly to keep these files in the git repo.

![node_modules meme](https://dev-to-uploads.s3.amazonaws.com/i/9z37r0mpfsutak9c3n79.png)

## Automation for the rescue

Usually, committing anything that can be **derived** from the source to the git repositories is a bad practice. Sadly, we can't get rid of pushing JavaScript bundles entirely because GitHub Actions Runner requires it but at least we can hide that fact.

GitHub Actions are all about making developing code easier so **let's use GitHub Actions to develop GitHub Actions**! 

The plan is to develop GitHub Actions as any other JavaScript code - with bundles/`node_modules` git-ignored. Let's have another branch for build artifacts. This release branch will be automatically updated by GitHub Actions on every push to the main branch.

To make this task easier I've created a helper action called: [branch-push-action](https://github.com/ActionwareIO/branch-push-action). 

Here's the complete workflow:

```yml
name: Deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: yarn --no-progress --non-interactive --frozen-lockfile

      - run: yarn build

      - uses: ActionwareIO/branch-push-action@action
        with:
          branch: action
          files: |
            README.md
            action.yml
            ./dist/index.js
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

The `build` task uses `ncc` to produce a single file bundle. `branch-push-action` will save specified files, checkout target branch (`action` in this example), and commit updates. A branch will be automatically created if it doesn't exist and it will contain only necessary files. 

The last thing is that you need to point users of your GitHub Action to the branch with bundled code like:

```yml
- uses: your-awesome-action@action
```

Of course, you can tweak this workflow to your needs - use `dev` and `master` branches or even commit files to the same branch. I prefer to keep build artifacts on a separate branch as this allows me to completely git ignore any unnecessary files on the default branch.

## Summary

Now you can develop GitHub Actions without worrying about build artifacts. I prefer to use TypeScript while creating Actions and pushing compiled JavaScript code was messing up language statistics on GitHub. Now I can brag about that beautiful 100% TypeScript badge ;) 

In case you're wondering - yes, `branch-push-action` is also deployed using itself ;) For the complete solution for automatic deployment browse its [source code](https://github.com/ActionwareIO/branch-push-action/blob/master/.github/workflows/release.yml).

Now, you know how to continuously deploy GitHub Actions, but you wouldn't want to push a broken release, would you? In my next article, I will dive into testing GitHub Actions properly - given their nature, which is full of side effects, it's not that easy. If you don't want to miss it follow me on 🤜 [twitter](https://twitter.com/krzKaczor) 🤛!