Use Custom Inputs in your GitHub Action
Tags: github, githubactions, devops, tutorial
Published: 2023-08-13 12:37:00

**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

{% details 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](https://github.com/Balastrong/ga-label-issue), so you can always refer to it if you get stuck.

{% enddetails %}

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

{% youtube N26xgQ7kLKo %}

## Chapter 3: Reading inputs

Let's make our action a bit more interesting by reading an input from the workflow.

### Add inputs to the action definition

As usual, the first step is to define the input in the `action.yml` file.

```yaml
inputs:
  name:
    description: 'The name of the person to greet'
    required: true
    default: 'World'
```

### Read the input in the action code

Then we can read the input in the action code.

```ts
const name = getInput('name');

console.log(`Hello ${name}!`);
```

But where does the `getInput` function come from? It's defined in the `@actions/core` package, which we need to install.

```bash
npm install @actions/core
```

And then add the import on top of the `index.ts` file.

```ts
import { getInput } from '@actions/core';
```

### Update the workflow

Finally, we need to update the workflow to pass the input to the action.

```yaml
- uses: ./
  with:
    name: 'Leonardo'
```

By adding the `with` section, we're passing the `name` input to the action.

### Run the hello action

We can now run the action again and see the input being passed to the action.

![Input passed to the action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffzycizo4pen9aqvwl5n.png)

If it doesn't work (`Error: Cannot find module '@actions/core'`) that's ok, we'll fix it in the next section when we inlude `@vercel/ncc` in the workflow.

## 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](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}