Skip to main content
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.
The image shows a GitHub documentation page titled "Creating a JavaScript action," which provides a guide on building a JavaScript action using the actions toolkit. The page includes an introduction and a sidebar with related topics.

​
Prerequisites

Before you begin, verify that you have the following:
RequirementDescription
Node.js 20.xJavaScript runtime for your action
npmPackage manager to install dependencies
GitHub accountHost your repository and run workflows
The image shows a GitHub documentation page about creating a JavaScript action, including prerequisites like downloading Node.js and creating a GitHub repository.

​
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'
The github-token input is usually provided via ${{ secrets.GITHUB_TOKEN }}.
Be sure to store your giphy-api-key in GitHub Secrets to keep it secure.

​
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:
PackageVersionPurpose
@actions/core^1.10.0Read inputs, set outputs, and report failures
@actions/github^5.1.1Access GitHub context and helpers
@octokit/rest^20.0.1Interact with the GitHub REST API
giphy-api^2.0.2Fetch random or search-based GIFs from Giphy API
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();
The image shows a GitHub repository page for "docker-action-pr-giphy-comment," displaying files like Dockerfile, README.md, and action.yml, along with recent commit activity.

​
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
ncc produces dist/index.js with your action logic and all dependencies. This simplifies deployment.

​
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
The image shows a GitHub interface for creating a new repository, with fields for the repository name, description, visibility options, and initialization settings.
After pushing, your repository will look like this:
The image shows a GitHub repository page titled "js-action-pr-giphy-comment," displaying files like .gitignore, README.md, and index.js. The repository is public with no stars or forks.
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!

Watch Video