Skip to content

Commit 91d7840

Browse files
refactor: major exercise content and workflows refresh
* Update workflows * Update readme * Add node_modules to gitignore * feat: initial rewrite of the exercise (#1) * Test run updates * Theory updates (skills#2) * Test run updates * Revise README for clarity and time estimate Updated the project description and estimated completion time. * Step 1-3 review updates * Apply suggestion from @chriswblake Co-authored-by: Christopher W. Blake <[email protected]> * fix: update action metadata requirements and workflow example * Apply suggestion from @chriswblake Co-authored-by: Christopher W. Blake <[email protected]> * Revise monitoring steps for Joke Action workflow Updated instructions for monitoring the Joke Action workflow. * Update exercise copy link in README * Add mona comments for next steps --------- Co-authored-by: Christopher W. Blake <[email protected]>
1 parent d300b93 commit 91d7840

35 files changed

+1384
-1078
lines changed

.devcontainer/devcontainer.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"image": "mcr.microsoft.com/devcontainers/universal:2",
3+
"features": {
4+
"ghcr.io/devcontainers/features/node:1": {}
5+
}
6+
}

.github/dependabot.yml

Lines changed: 0 additions & 6 deletions
This file was deleted.

.github/steps/-step.txt

Lines changed: 0 additions & 1 deletion
This file was deleted.

.github/steps/0-welcome.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

.github/steps/1-initialize-javascript-project.md

Lines changed: 0 additions & 85 deletions
This file was deleted.

.github/steps/1-step.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
## Step 1: Setting up the project
2+
3+
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…
4+
5+
Maybe that’s because your task is a bit _too_ unique 😆
6+
7+
**GENERATING DAD JOKES**! 🎭
8+
9+
<img width="600" alt="dadjoke-mona" src="https://github.com/user-attachments/assets/46b6b931-8d1f-4a01-88f4-4568704039a0" />
10+
11+
Since no pre-built action exists for your quirky automation needs, it's time to roll up your sleeves and create your own!
12+
13+
### ⌨️ Activity: Set up your development environment
14+
15+
Let's use **GitHub Codespaces** to set up a cloud-based development environment and work in it for the remainder of the exercise!
16+
17+
1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
18+
19+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
20+
21+
1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
22+
23+
- ✅ Your copy: `/{{full_repo_name}}`
24+
- ❌ Original: `/skills-dev/write-javascript-actions`
25+
26+
1. Wait a moment for Visual Studio Code to load in your browser.
27+
28+
1. Verify that **Node.js** is available by opening a terminal and running:
29+
30+
```sh
31+
node --version
32+
npm --version
33+
```
34+
35+
<details>
36+
<summary>Having trouble? 🤷</summary><br/>
37+
38+
- Make sure you selected your personal copy of the repository, not the original template.
39+
- If the Codespace fails to start, try refreshing the page and creating a new one.
40+
- Node.js and npm should be pre-installed in the development environment.
41+
42+
</details>
43+
44+
### ⌨️ Activity: Initialize Project
45+
46+
Now that your Codespace is ready, let's initialize a new Node.js project and install the dependencies needed for your Dad Jokes action.
47+
48+
1. Within your GitHub Codespace terminal window initialize a new project:
49+
50+
```sh
51+
npm init -y
52+
```
53+
54+
1. Install the required dependencies:
55+
56+
```sh
57+
npm install request request-promise @actions/core @vercel/ncc
58+
```
59+
60+
> 🪧 **Note:** You will learn each library purpose in the next steps
61+
62+
1. Review `package.json` to confirm dependencies are listed in the `dependencies` section.
63+
64+
1. Open the `.gitignore` file and add an entry to exclude the `node_modules` directory from being tracked by Git:
65+
66+
```text
67+
node_modules/
68+
```
69+
70+
We don't want to commit `node_modules` because it contains thousands of files that would bloat the repository.
71+
72+
> 🪧 **Note:** Instead, later in the exercise you will bundle your action into a single JavaScript file with all dependencies included.
73+
74+
1. Commit and push your changes:
75+
76+
```sh
77+
git status
78+
git add .
79+
git commit -m "Initialize project"
80+
git push
81+
```
82+
83+
1. With the changes pushed to GitHub, Mona will check your work and share the next steps.
84+
85+
<details>
86+
<summary>Having trouble? 🤷</summary><br/>
87+
88+
- Ensure you are at the repository root before running `npm init -y`.
89+
- Do not commit `node_modules/` to the repository; ensure it's listed in `.gitignore`.
90+
91+
</details>

.github/steps/2-configure-your-action.md

Lines changed: 0 additions & 42 deletions
This file was deleted.

.github/steps/2-step.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
## Step 2: Create Source Files & Run Locally
2+
3+
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.
4+
5+
### 📖 Theory: The GitHub Actions Toolkit
6+
7+
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.
8+
9+
> [!TIP]
10+
> 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.
11+
>
12+
> Visit the [actions/toolkit](https://github.com/actions/toolkit) repository for more.
13+
14+
15+
### ⌨️ Activity: Implement the Dad Jokes Action
16+
17+
Let's create the source files and implement the logic for your action.
18+
19+
1. Create `src/` directory to hold your JavaScript files:
20+
21+
1. Create `src/joke.js` file to hold the logic for fetching a joke from the `icanhazdadjoke.com` API:
22+
23+
```js
24+
const request = require("request-promise");
25+
26+
const options = {
27+
method: "GET",
28+
uri: "https://icanhazdadjoke.com/",
29+
headers: {
30+
Accept: "application/json",
31+
"User-Agent": "Writing JavaScript action GitHub Skills exercise.",
32+
},
33+
json: true,
34+
};
35+
36+
async function getJoke() {
37+
const res = await request(options);
38+
return res.joke;
39+
}
40+
41+
module.exports = getJoke;
42+
```
43+
44+
The `getJoke` function makes an HTTP GET request to the `icanhazdadjoke.com` API and returns a random dad joke.
45+
46+
We export the `getJoke` function so it can be used in other files.
47+
48+
1. Create `src/main.js` that will be the main entry point for your action:
49+
50+
```js
51+
const getJoke = require("./joke");
52+
const core = require("@actions/core");
53+
54+
async function run() {
55+
const joke = await getJoke();
56+
console.log(joke);
57+
core.setOutput("joke", joke);
58+
}
59+
60+
run();
61+
```
62+
63+
We call the `getJoke` function and follow up with `core.setOutput()` to set the `joke` output of your GitHub Action.
64+
65+
1. Run the action locally to verify it works:
66+
67+
```sh
68+
node src/main.js
69+
```
70+
71+
1. Commit and push:
72+
73+
```sh
74+
git add src/
75+
git commit -m "Add Dad Joke action source files"
76+
git push
77+
```
78+
79+
1. With the changes pushed to GitHub, Mona will check your work and share the next steps.

.github/steps/3-create-metadata-file.md

Lines changed: 0 additions & 64 deletions
This file was deleted.

0 commit comments

Comments
 (0)