Because who doesn't want good boys to show up whenever they push? The long awaited GitHub Action feature is finally out of beta and ready to be present in every repositories. GitHub even organized through out March to encourage folks to create more awesome and useful actions. While browsing through the submissions, I found that posts cat gifs on pull requests. Shout out to with his cool idea 👏👏👏. a Hackathon a cool GitHub Action Ruairidh It'll only do justice to dogs if there's an action that deliver them good boys to our PRs. That moment I knew exactly what my next Github Action project would be. Time to get to work. The gist of creating a GitHub Action are basically premade (with ❤️) units of work to be used GitHub workflows (think 's builds). Github actions can be either built with or . An advantage to creating a GitHub action with JS/TS is readily available modules from . With such integration support, it's much easier to connect with GitHub services (C'mon 🙄 Who wanna write commands to make API calls). It's obvious to go with . With that decision made, let's get down to writing . GitHub actions Travis Docker containers JS/TS scripts GitHub toolkit curl TypeScript action template action-dogs The main run file In a JS/TS GitHub action, workload will be started out from a main entrypoint (think running to start a Node process for web applications, etc). For action-dogs, this is my basic setup for the main program node src/index.js * core ; * github ; { generate } ;

( { { ctx = github.context; (!ctx.payload.pull_request) { ( );
    } ghCli = github.GitHub(core.getInput( )); doggo = generate();
    ghCli.issues.createComment({
      ...ctx.repo,
      issue_number: ctx.payload.pull_request.number,
      body: });
  } (e) {
    core.setFailed(e.message);
  }
})(); import as from "@actions/core" import as from "@actions/github" import from "./doggo/generator" async ( ): < > function run Promise void try const if throw new Error "Not in the context of a PR!" const new "github-token" const `![Doggo]( )` ${doggo} catch During an event that can trigger GitHub workflows, we are provided with a context object that can be accessed through module. Using that, I'm able to check whether my payload is coming from a and reject otherwise. Next up, I need to post a comment to the corresponding pull request with content of a doggo gif. Given that my doggo generator (of which I will explain in the next section) works properly, I can retrieve an URL of a doggo gif, creating a comment on pull requests is super simple as I just need to pass in the repo's information from our context object and the PR's number. Also, in case we get any errors during these operations, calling will mark the build as failed with the error message. @actions/github pull_request core.setFailed(e.message) The doggo generator After much research with the intention to use one of the public APIs to get random doggo gifs, I couldn't find one that's public (like ) and also serves gifs (like ). Since there's no avenue for me to store my GIPHY API key securely to be used in action-dogs, I fell back to the good-ol-way of static JSON array. dog.ceo GIPHY Wanna know how I obtained my array full of doggo awesomeness (from ❤️ ❤️) without any API key generated in the process? I actually went to GIPHY site, searched for doggoes, and scrolled down util a good amount of "giffy-boys" got rendered before pulling up my console GIPHY And with these few lines of JS dogsData = []; .querySelectorAll( )
  .forEach( dogsData.push(e.href)); dataStr = + ( .stringify(dogsData)); dlAnchorElem = .createElement( );
dlAnchorElem.setAttribute( , dataStr);
dlAnchorElem.setAttribute( , );
dlAnchorElem.click(); const document "a._2SwDiFPqIlZmUDkxHNOeqU" => e var "data:text/json;charset=utf-8," encodeURIComponent JSON var document "a" "href" "download" "dogs.json" which basically grab `href` values from all "copy link" elements on the search results page, stream them to a JSON array and fill in a file for me to "download", "generating" is simply picking a random URL from the array. dogs ; { dogs[ .floor( .random() * dogs.length)];
} import from "./dogs.json" export ( ): function generate string return Math Math Testing I wrote a unit test for my doggo generator using jest (but actually mainly as an avenue for funny descriptions). { generate } ;

describe( , () => {
  test( , () => { .random = jest.fn().mockReturnValue( ); good = ; boy = generate();
    expect(boy).toBe(good);
  });
}); import from "../../src/doggo/generator" "doggo generator" "to return a good boy" Math 0 const "https://media3.giphy.com/media/mCRJDo24UvJMA/giphy.gif" const But the real test is a workflow using itself (Yes, you can use a GitHub action on its own repo 🤯). action-dogs name: "doggo" on: pull_request jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: stanleynguyen/action-dogs@master with: github-token: ${{ secrets.GITHUB_TOKEN }} Now I can see in action with . Hurray 🙌🙌🙌!! Now I can safely . action-dogs a sample PR publish it on GitHub Marketplace Outtro So that's my story of creating for fun and learning. You can find source code right on (well, because where else could it be 🤷‍♂️) and on . action-dogs GitHub action-dogs Marketplace

Super

Book a call

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Building my Github Action to Deliver Doggoes to PRs

Too Long; Didn't Read

Company Mentioned

Stanley Nguyen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building my Github Action to Deliver Doggoes to PRs

Too Long; Didn't Read

Company Mentioned

Stanley Nguyen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES