Create a Javascript Action

In this tutorial, you’ll build a JavaScript GitHub Action that posts a random “thank you” GIF from Giphy whenever a new pull request is opened. We’ll cover project setup, metadata definition, coding, bundling dependencies, and publishing to your GitHub repository.

Prerequisites

Before you begin, verify that you have the following:

1. Project Setup

Create a fresh directory and initialize npm. This scaffolds your package and creates essential files:

mkdir js-action-pr-giphy-comment
cd js-action-pr-giphy-comment
npm init -y
touch README.md action.yml index.js

2. Define Action Metadata

The action.yml file tells GitHub how to run your action. Specify inputs and the entrypoint:

name: 'Giphy PR Comment'
description: 'Posts a Giphy GIF comment on new pull requests.'
inputs:
  github-token:
    description: 'GitHub token for authentication'
    required: true
  giphy-api-key:
    description: 'Your Giphy API key'
    required: true
runs:
  using: 'node20'
  main: 'dist/index.js'

3. Install Dependencies

Install the GitHub Actions Toolkit and Giphy client:

npm install @actions/[email protected] \
            @actions/[email protected] \
            @octokit/[email protected] \
            [email protected]

Here’s a quick reference of what each package does:

Check your package.json to confirm these are listed under dependencies.

4. Write the Action Code

In index.js, import the necessary modules, fetch a random “thank you” GIF, and post it as a comment on the pull request:

const core = require('@actions/core');
const github = require('@actions/github');
const { Octokit } = require('@octokit/rest');
const Giphy = require('giphy-api');

async function run() {
  try {
    const githubToken = core.getInput('github-token');
    const giphyApiKey = core.getInput('giphy-api-key');
    const octokit = new Octokit({ auth: githubToken });
    const giphy = Giphy(giphyApiKey);

    const { owner, repo, number: issue_number } = github.context.issue;
    const prComment = await giphy.random('thank you');

    await octokit.issues.createComment({
      owner,
      repo,
      issue_number,
      body: [
        '### 🎉 Thank you for your contribution!',
        '',
        `![Giphy](${prComment.data.images.downsized.url})`
      ].join('\n')
    });

    core.setOutput('comment-url', prComment.data.images.downsized.url);
  } catch (error) {
    core.setFailed(error.message);
  }
}

run();

5. Bundle with ncc

To avoid committing node_modules, bundle your code and dependencies into a single file using Vercel ncc:

npm install --save-dev @vercel/[email protected]
npx ncc build index.js -o dist

6. Ignore Unnecessary Files

Add a .gitignore to keep your repository clean:

node_modules
dist/**/*.map

7. Publish to GitHub

Initialize and push your project:

git init
git add .
git commit -m "Initial JavaScript action"
git branch -M main
git remote add origin https://github.com/<your-username>/js-action-pr-giphy-comment.git
git push -u origin main

After pushing, your repository will look like this:

You’ve now successfully created, bundled, and published a JavaScript GitHub Action. Next, tag a release and submit it to the GitHub Marketplace so others can use it!

Links and References

• GitHub Actions Toolkit
• Vercel ncc – Next.js Compiler
• GitHub Marketplace
• GitHub Actions Documentation
• Giphy Developers