Exercise: Write JavaScript Actions

[github-actions]

Write JavaScript Actions

👋 Hey there @vaclavbasniar! Welcome to your Skills exercise!

Learn to create and use custom JavaScript actions in your GitHub workflows

---

✨ This is an interactive, hands-on GitHub Skills exercise!

As you complete each step, I’ll leave updates in the comments:

• ✅ Check your work and guide you forward
• 💡 Share helpful tips and resources
• 🚀 Celebrate your progress and completion

Let’s get started - good luck and have fun!

_{— Mona}

_{If you encounter any issues along the way please report them here.}

[github-actions]

Step 1: Setting up the project

Imagine you’ve got a repetitive task you’d love to automate. You've searched through the GitHub Marketplace for existing actions that might help, you come up empty-handed…

Maybe that’s because your task is a bit too unique 😆

GENERATING DAD JOKES! 🎭

Since no pre-built action exists for your quirky automation needs, it's time to roll up your sleeves and create your own!

⌨️ Activity: Set up your development environment

Let's use GitHub Codespaces to set up a cloud-based development environment and work in it for the remainder of the exercise!

1. Right-click the below button to open the Create Codespace page in a new tab. Use the default configuration.

   

2. Confirm the Repository field is your copy of the exercise, not the original, then click the green Create Codespace button.

   • ✅ Your copy: /vaclavbasniar/skills-write-javascript-actions
   • ❌ Original: /skills/write-javascript-actions

3. Wait a moment for Visual Studio Code to load in your browser.

4. Verify that Node.js is available by opening a terminal and running:

   node --version
   npm --version

   Having trouble? 🤷

   
   

   • Make sure you selected your personal copy of the repository, not the original template.
   • If the Codespace fails to start, try refreshing the page and creating a new one.
   • Node.js and npm should be pre-installed in the development environment.

⌨️ Activity: Initialize Project

Now that your Codespace is ready, let's initialize a new Node.js project and install the dependencies needed for your Dad Jokes action.

1. Within your GitHub Codespace terminal window initialize a new project:

   npm init -y

2. Install the required dependencies:

   npm install request request-promise @actions/core @vercel/ncc

   🪧 Note: You will learn each library purpose in the next steps

3. Review package.json to confirm dependencies are listed in the dependencies section.

4. Open the .gitignore file and add an entry to exclude the node_modules directory from being tracked by Git:

   node_modules/
   

   We don't want to commit node_modules because it contains thousands of files that would bloat the repository.

   🪧 Note: Instead, later in the exercise you will bundle your action into a single JavaScript file with all dependencies included.

5. Commit and push your changes:

   git status
   git add .
   git commit -m "Initialize project"
   git push

6. With the changes pushed to GitHub, Mona will check your work and share the next steps.

Having trouble? 🤷

• Ensure you are at the repository root before running npm init -y.
• Do not commit node_modules/ to the repository; ensure it's listed in .gitignore.

[github-actions]

Step 1 - Passed ✅

Status	Description
✅ - Pass	package.json file exists
✅ - Pass	@actions/core dependency present
✅ - Pass	request dependency present
✅ - Pass	request-promise dependency present
✅ - Pass	@vercel/ncc dependency present
✅ - Pass	.gitignore excludes node_modules/
✅ - Pass	node_modules properly excluded from repository

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Create Source Files & Run Locally

Nice! Now that we have the project initialized and dependencies installed, it's time to create the source files for your Dad Jokes GitHub Action.

📖 Theory: The GitHub Actions Toolkit

The @actions/core library is the main library from the GitHub Actions Toolkit, a collection of packages for building JavaScript GitHub Actions. It provides essential methods to interact with the GitHub Actions runtime environment, accept action inputs, and produce outputs for other workflow steps.

Tip

The GitHub Actions Toolkit includes other useful libraries like @actions/github for interacting with the GitHub API and @actions/artifact for uploading and downloading artifacts.

Visit the actions/toolkit repository for more.

⌨️ Activity: Implement the Dad Jokes Action

Let's create the source files and implement the logic for your action.

1. Create src/ directory to hold your JavaScript files:

2. Create src/joke.js file to hold the logic for fetching a joke from the icanhazdadjoke.com API:

   const request = require("request-promise");
   
   const options = {
     method: "GET",
     uri: "https://icanhazdadjoke.com/",
     headers: {
       Accept: "application/json",
       "User-Agent": "Writing JavaScript action GitHub Skills exercise.",
     },
     json: true,
   };
   
   async function getJoke() {
     const res = await request(options);
     return res.joke;
   }
   
   module.exports = getJoke;

   The getJoke function makes an HTTP GET request to the icanhazdadjoke.com API and returns a random dad joke.

   We export the getJoke function so it can be used in other files.

3. Create src/main.js that will be the main entry point for your action:

   const getJoke = require("./joke");
   const core = require("@actions/core");
   
   async function run() {
     const joke = await getJoke();
     console.log(joke);
     core.setOutput("joke", joke);
   }
   
   run();

   We call the getJoke function and follow up with core.setOutput() to set the joke output of your GitHub Action.

4. Run the action locally to verify it works:

   node src/main.js

5. Commit and push:

   git add src/
   git commit -m "Add Dad Joke action source files"
   git push

6. With the changes pushed to GitHub, Mona will check your work and share the next steps.

[github-actions]

Step 2 - Passed ✅

Status	Description
✅ - Pass	Checked for src/main.js file
✅ - Pass	Checked for src/joke.js file

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 3! One moment... 🤓

[github-actions]

Step 3: Bundle the Action

Good job! 🎉

Now that you've created the source files for your Dad Jokes GitHub Action and tested it locally, it's time to bundle the action so it can be used in GitHub workflows.

📖 Theory: Bundling Your Action

When someone uses your action in their workflow, GitHub downloads and executes it as a complete package of code. This means you must include any package dependencies required to run the JavaScript code, such as the @actions/core and request-promise packages your action uses.

Rather than committing your node_modules directory (which causes problems with repository size and performance), you can use bundling tools like @vercel/ncc to combine your code and dependencies into a single dist/index.js file for distribution.

⌨️ Activity: Build Setup & Bundle

1. Add a new build script to package.json (inside the existing scripts object):

   "scripts": {
      // Existing scripts...
     "build": "ncc build src/main.js -o dist"
   }

2. Run the build command. This should create a dist/ directory with a bundled index.js file:

   npm run build

3. (optional) Run the bundled action to verify it works:

   node dist/index.js

4. Commit and push the changes to the main branch:

   git add .
   git commit -m "Add ncc build script and bundled dist/index.js"
   git push

5. With the changes pushed to GitHub, Mona will check your work and share the next steps.

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐