DEV Community

Cover image for Run your Custom GitHub Action
Leonardo Montini
Leonardo Montini

Posted on

Run your Custom GitHub Action

GitHub Actions are a powerful tool to automate your workflow. They can be used to run tests, deploy your code, publish a package, and much more.

The cool thing is, there's a GitHub Actions Marketplace where you can find a lot of actions created by... the community.

But what if you can't find the action you need? You can create your own and publish it there!

How to use this tutorial

Read more...

In this tutorial we're going to see in detail how to:

  • Create a GitHub Action in Typescript
  • Expand our Action to support custom inputs
  • Integrate with GitHub's API to add labels to Pull Requests
  • Unit testing our action
  • Debugging in Visual Studio Code
  • Publishing our action to the GitHub Marketplace
  • Using our action in another repository
  • Some final touches to make our project more robust

The articles will be split into separate bite-sized chapters as technically each one can be a little tutorial by itself.

If you're interested in the full text all at once, you can find it here: https://leonardomontini.dev/typescript-github-action/

One more great piece of advice is to create a new repository and follow along with the steps. This way you'll have a working action at the end of the post and you'll be able to play with it and experiment, rather than just reading a long tutorial and forgetting about 90% of it.

The full code of this tutorial is available on GitHub on this repo, so you can always refer to it if you get stuck.

The full tutorial (all chapters at once) is also available as a video, which you can find here:

Chapter 2: Running the Action

If you already followed the Chapter 1, we're all set! It's time to run our action.

Creating a workflow

On GitHub, Actions are executed by workflows. A workflow is defined in a .yml file stored in the .github/workflows folder of the repository so let's create it.

mkdir -p .github/workflows
touch .github/workflows/greet.yml
Enter fullscreen mode Exit fullscreen mode

The name of the file doesn't matter, but it's good practice to give it a meaningful name.

What matters is the content of the file, which defines the workflow. To keep it simple, here are the minimal instructions you need.

name: Say Hello

on:
  workflow_dispatch:

jobs:
  run-my-action:
    name: Checks if this action works
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: ./
Enter fullscreen mode Exit fullscreen mode

In this case, the action will checkout the current repository and then run the action we just created. We put ./ as the action path because we want to run the action from the current repository, but we could also use a different repository.

How does GitHub know what action to run? It's defined in the action.yml file we created earlier.

One more line worth mentioning is on: workflow_dispatch: which tells GitHub to run the workflow when we manually trigger it from the Actions tab. I recorded a dedicated video about running GitHub Actions manually, if you want to learn more about it.

Running the workflow

We can now push our code to GitHub and see the action in action!

git add .
git commit -m "Add workflow"
git push
Enter fullscreen mode Exit fullscreen mode

Once the code is pushed, we can go to the Actions tab and trigger the workflow manually.

Trigger action manually

The workflow will start running and we'll see the logs of the action in the console.

Action running

Congratulations! You just created and ran your first GitHub Action!

Running the action locally

In case you want to run the action locally, without having to commit/push every time, you can use the act tool.

npm install -g act
Enter fullscreen mode Exit fullscreen mode

Then you can run the action by executing act in the root of the repository.

act
Enter fullscreen mode Exit fullscreen mode

You can find more in my video about running GitHub Actions locally.

Closing

And that was it for today! if you have any question or suggestion, feel free to add a comment :)

See you in the next chapter!


Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ❤️
You can find it here:
YouTube

Feel free to follow me to get notified when new articles are out ;)

Top comments (0)