Add npm Packages to a Custom Github Action to Use Open Source Libraries
In this lesson, you'll learn how to use npm packages to add functionality to your custom Github Action. We'll walk through installing the npm package Axios, using it to fetch a quote from a Futurama Character API, compiling our action to a single file, and updating our configuration to use our updated Action.
Colby Fayock: [0:00] We're going to start off with a GitHub Action that logs hello world. Instead of hello world, we want to log something fun. We're going to use the Futurama API to log quotes from a character.
[0:09] To do this, we need to make request. We're going to add the library axios, yarn add axios, and we're going to save it as a dev dependency. Now that we have axios, we can say const axios = require('axios').
[0:21] I like to use async await. I'm going to create an asynchronous function that wraps this. We're going to say async function run(), we can put our hello world inside of that, then we're going to run it immediately. We can go ahead and run it just to make sure that it's still working, and we see hello world.
[0:36] Next, let's make our request. We're going to say const response = await axios.get(). For this, we're going to use GET 'count' Quotes By A Character from the API.
[0:48] Then inside of my get, I'm going to paste that endpoint. For this one, I'm going to use dr-zoidberg with a count of 1 quote. Instead of hello world, let's simply log out that response. Now, if we run that file again, we can see our data with the quote.
[1:01] We don't want to console log all that other data out. Let's grab just that data. Inside our function, we can destructure it and say data = response. Since we know we're only grabbing one, we can say const firstEntry = data .
[1:15] We can go ahead and change our console.log, so that we can say the firstEntry.character, then we can say the firstEntry.quote. If we try running that again, we can see we have our character name and our quote.
[1:30] For this to run on GitHub, we need to include all those modules inside one package file. To do that, we're going to use a compiler tool called ncc from Zeit. First, let's go ahead and install that with yarn, so yarn add that package -D for development. We're also going to add a new script to run that command.
[1:47] Here, we're running ncc with the command of build, we're going to say to pick it up from the src/action.js file. We're going to say the output is for the dist directory. That's not currently where our file lives, so we're going to need to update that.
[1:59] In our project, let's create a new folder, and let's call it src. We're also going to move in our index.js file to that directory. Finally, let's rename that to action.
[2:08] Now, let's run yarn build, and we can see our new folder with our new compiled file. We can also try running that file to make sure it works. Node dist/index.js and we can see our quote.
[2:19] Lastly, we want to make sure we update locations like main in our package.json file so that it points to the right place. Here, let's update that to dist/index.js, and inside our action.yml file, we want to update main to dist/index.js. Once we push it to GitHub, we can see our job kick off. Once it's done, we can see our logs and our quote.
[2:38] In review, instead of hello world, we wanted to log the character quote from Futurama. To do this, we used axios to make a request to the API, and we parsed that data to log our quote.
[2:48] In order to package our dependencies, we used zeit/ncc to add a script to build our file. Once we built that file, we pushed it up to GitHub where our job ran, where we can see our logs and our quote.