Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"image": "mcr.microsoft.com/devcontainers/universal:2",
"features": {
"ghcr.io/devcontainers/features/node:1": {}
}
}
6 changes: 0 additions & 6 deletions .github/dependabot.yml

This file was deleted.

1 change: 0 additions & 1 deletion .github/steps/-step.txt

This file was deleted.

1 change: 0 additions & 1 deletion .github/steps/0-welcome.md

This file was deleted.

85 changes: 0 additions & 85 deletions .github/steps/1-initialize-javascript-project.md

This file was deleted.

91 changes: 91 additions & 0 deletions .github/steps/1-step.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
## 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**](https://github.com/marketplace?type=actions) 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**! 🎭

<img width="600" alt="dadjoke-mona" src="https://github.com/user-attachments/assets/46b6b931-8d1f-4a01-88f4-4568704039a0" />

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.

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)

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

- ✅ Your copy: `/{{full_repo_name}}`
- ❌ Original: `/skills-dev/write-javascript-actions`

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

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

```sh
node --version
npm --version
```

<details>
<summary>Having trouble? 🤷</summary><br/>

- 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.

</details>

### ⌨️ 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:

```sh
npm init -y
```

1. Install the required dependencies:

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

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

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

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

```text
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.

1. Commit and push your changes:

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

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

<details>
<summary>Having trouble? 🤷</summary><br/>

- 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`.

</details>
42 changes: 0 additions & 42 deletions .github/steps/2-configure-your-action.md

This file was deleted.

79 changes: 79 additions & 0 deletions .github/steps/2-step.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
## 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](https://github.com/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](https://github.com/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](https://github.com/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:

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

```js
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.

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

```js
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might mention why 'core.setOutput' is needed, since you clearly write it to console already.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't it self explanatory?


1. Run the action locally to verify it works:

```sh
node src/main.js
```

1. Commit and push:

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you mean to overwrite the "watching" comment? (you overwrote with the 1->2 transition).

Image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be overwritten by the grading job.

I can see in your exercise run it was properly edited so not sure what you mean? This screenshot doesn't match whats in your issue.

chriswblake/skills-write-javascript-actions#1 (comment)


1. With the changes pushed to GitHub, Mona will check your work and share the next steps.
64 changes: 0 additions & 64 deletions .github/steps/3-create-metadata-file.md

This file was deleted.

Loading