You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .github/steps/1-step.md
+9-3Lines changed: 9 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,14 @@
1
-
## Step 1: Initializing the Dad Jokes GitHub Action
1
+
## Step 1: Setting up the project
2
2
3
-
Imagine you have a repetitive task that you want to automate. You've searched through the [**GitHub Marketplace**](https://github.com/marketplace?type=actions)to see if there are any existing actions that suit your needs, but found nothing - because your task is very specific: **generating DAD JOKES**! 🎭
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
4
5
-
Since no pre-built action exists for your quirky automation needs, it's time to roll up your sleeves and create your own
5
+
Maybe that’s because your task is a bit _too_ unique 😆
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.
4
13
5
-
Author the action’s core logic and verify it runs locally before bundling.
6
14
7
15
### ⌨️ Activity: Implement the Dad Jokes Action
8
16
9
17
Now that your project is initialized and dependencies are installed, it's time to create the source files for your Dad Jokes GitHub Action.
10
18
11
-
12
19
1. Create `src/` directory to hold your GitHub Action JavaScript files:
13
20
14
21
```sh
@@ -38,28 +45,34 @@ Now that your project is initialized and dependencies are installed, it's time t
38
45
module.exports= getJoke;
39
46
```
40
47
48
+
The `getJoke` function makes an HTTP GET request to the `icanhazdadjoke.com` API and returns a random dad joke.
49
+
50
+
We export the `getJoke` function so it can be used in other files.
51
+
41
52
1. Create `src/main.js` that will be the main entry point for your action:
42
53
43
-
```js
44
-
constgetJoke=require("./joke");
45
-
constcore=require("@actions/core");
54
+
```js
55
+
constgetJoke=require("./joke");
56
+
constcore=require("@actions/core");
46
57
47
-
asyncfunctionrun() {
48
-
constjoke=awaitgetJoke();
49
-
console.log(joke);
50
-
core.setOutput("joke-output", joke);
51
-
}
58
+
asyncfunctionrun() {
59
+
constjoke=awaitgetJoke();
60
+
console.log(joke);
61
+
core.setOutput("joke", joke);
62
+
}
52
63
53
-
run();
54
-
```
64
+
run();
65
+
```
66
+
67
+
We call the `getJoke` function and call the `core.setOutput()` method to set the `joke` output of your GitHub Action.
55
68
56
69
1. Run the action locally to verify it works:
57
70
58
71
```sh
59
72
node src/main.js
60
73
```
61
74
62
-
<!--TODO:Add screenshot example-->
75
+
<!-- TODO: ADD SCREENSHOT-->
63
76
64
77
1. Commit and push:
65
78
@@ -68,43 +81,3 @@ Now that your project is initialized and dependencies are installed, it's time t
68
81
git commit -m "Add Dad Joke action source files"
69
82
git push
70
83
```
71
-
72
-
### 🛠 Activity (Optional): Debug your action
73
-
74
-
>[!NOTE]
75
-
> This activity is optional and not required to complete the exercise.
76
-
>
77
-
> Learning how to debug your action code can be very helpful!
Copy file name to clipboardExpand all lines: .github/steps/3-step.md
+22-10Lines changed: 22 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,37 @@
1
1
## Step 3: Bundle the Action
2
2
3
-
### 📖 Theory: Bundling the action
3
+
Good job! :tada:
4
4
5
+
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.
6
+
7
+
### 📖 Theory: Bundling Your Action
8
+
9
+
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.
10
+
11
+
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.
5
12
6
13
7
14
### ⌨️ Activity: Build Setup & Bundle
8
15
9
16
1. Add a build script to `package.json` (inside the existing scripts block or create one):
10
17
11
-
```json
12
-
"scripts": {
13
-
"build": "ncc build src/main.js -o dist"
14
-
}
15
-
16
-
```
18
+
```json
19
+
"scripts": {
20
+
"build": "ncc build src/main.js -o dist"
21
+
}
22
+
```
17
23
18
24
1. Run the build command. This should create a `dist/` directory with a bundled `index.js` file:
19
25
20
-
```sh
21
-
npm run build
22
-
```
26
+
```sh
27
+
npm run build
28
+
```
29
+
30
+
1. (optional) Run the bundled action to verify it works:
31
+
32
+
```sh
33
+
node dist/index.js
34
+
```
23
35
24
36
1. Commit and push the changes to the `main` branch:
Copy file name to clipboardExpand all lines: .github/steps/4-step.md
+48-13Lines changed: 48 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,61 @@
1
1
## Step 4: Add Action Metadata
2
2
3
-
### 📖 Theory
3
+
Great work! :tada: You've successfully bundled your Dad Jokes GitHub Action into a single file.
4
4
5
-
Define the action’s interface (name, description, outputs, runtime, main entry) via `action.yml` pointing to the bundled file.
5
+
Now it's time to create the **action metadata file** - this special file tells GitHub exactly how to use your action when someone includes it in their workflow!
6
+
7
+
### 📖 Theory: Action Metadata
8
+
9
+
Every GitHub Action requires a metadata file that defines how the action should be executed and what parameters it accepts.
10
+
11
+
#### Metadata File Requirements
12
+
13
+
The metadata file has specific requirements:
14
+
15
+
-**Filename**: Must be `action.yml`
16
+
-**Required for**: All actions types - JavaScript, Docker container, and composite actions
|**`description`**| A short description of what your action does. | ✅ |
25
+
|**`author`**| The name of the action's author. | ❌ |
26
+
|**`inputs`**| Data that the action expects to receive. | ❌ |
27
+
|**`outputs`**| Data that other actions can use after this action runs. | ❌ |
28
+
|**`runs`**| Tells GitHub how to execute your action. | ✅ |
29
+
|**`branding`**| Optional color and icon for your action in GitHub Marketplace. | ❌ |
30
+
31
+
#### JavaScript Action `runs` Configuration
32
+
33
+
For JavaScript actions, the `runs` section needs:
34
+
35
+
-**`using`**: Which Node.js version to use
36
+
-**`main`**: The main JavaScript file to run
37
+
38
+
> [!TIP]
39
+
> For complete details on all available metadata parameters, optional fields, and advanced configurations, see the official [GitHub Actions metadata syntax documentation](https://docs.github.com/en/actions/reference/workflows-and-actions/metadata-syntax).
40
+
41
+
---
6
42
7
43
### ⌨️ Activity: Create Metadata File
8
44
9
45
1. Create `action.yml` at the repository root (same level as `package.json`).
10
46
11
-
```yaml
12
-
name: "Joke Action"
13
-
description: "Fetches a random joke and exposes it as an output"
14
-
15
-
outputs:
16
-
joke:
17
-
description: "The fetched joke text"
47
+
```yaml
48
+
name: "Joke Action"
49
+
description: "Fetches a random joke and exposes it as an output"
Copy file name to clipboardExpand all lines: .github/steps/5-step.md
+15-7Lines changed: 15 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,13 @@
1
1
## Step 5: Create Workflow & Consume Output
2
2
3
-
### 📖 Theory
3
+
Well done! :clap: You've created the Dad Jokes GitHub Action and defined its metadata.
4
4
5
-
Use a workflow triggered by `issue_comment`to run the local action and then post the retrieved joke as a comment.
5
+
Your action should be ready to use in any GitHub repository now!
6
6
7
7
### ⌨️ Activity: Author Workflow
8
8
9
+
Let's see your Dad Jokes action in action by creating a GitHub Actions workflow that uses it!
10
+
9
11
1. Create a new GitHub Actions workflow file with the following name
10
12
11
13
```txt
@@ -17,10 +19,10 @@ Use a workflow triggered by `issue_comment` to run the local action and then pos
17
19
```yaml
18
20
name: Joke Action
19
21
on:
20
-
issue_comment:
21
-
types: [created]
22
+
issue_comment:
23
+
types: [created]
22
24
23
-
permissions:
25
+
permissions:
24
26
issues: write
25
27
contents: read
26
28
@@ -40,6 +42,12 @@ Use a workflow triggered by `issue_comment` to run the local action and then pos
40
42
body: {% raw %}${{ steps.get-joke.outputs.joke }}{% endraw %}
41
43
```
42
44
43
-
The workflow will run on every issue comment created event. If the comment starts with `/joke`, it will execute the Dad Jokes action and post the joke as a comment in the same issue.
45
+
This workflow triggers when someone comments `/joke` on an issue and responds with a joke!
46
+
47
+
1. Commit and push the workflow file to the `main` branch:
44
48
45
-
1. Commit and push the workflow file to the `main`:
### Congratulations, you've completed this course!
7
+
Here's a recap of your accomplishments:
11
8
12
-
In this course, you've learned a lot about developing custom actions using JavaScript and Actions Toolkit.
13
-
14
-
## Publishing your actions
15
-
16
-
Publishing your actions is a great way to help others in your team and across the GitHub community. Although actions do not need to be published to be consumed, by adding them to the marketplace you make them easier to find.
17
-
18
-
Some notable actions you will find on the marketplace are:
19
-
20
-
-[Actions for Discord](https://github.com/marketplace/actions/actions-for-discord)
21
-
-[GitHub Action for Slack](https://github.com/marketplace/actions/github-action-for-slack)
And that just scratches the surface of the 1600+ and counting actions you will find on the marketplace
26
-
27
-
Follow [this guide](https://help.github.com/en/actions/automating-your-workflow-with-github-actions/publishing-actions-in-github-marketplace#publishing-an-action) to learn how to publish your actions to the GitHub Marketplace
9
+
-**Initialized a Node.js project** with proper dependencies and excluded `node_modules` with a `.gitignore` configuration
10
+
-**Created JavaScript source files** implementing a Dad Jokes action and leveraged the `@actions/core` library to handle action outputs
11
+
-**Bundled your action** into a single distributable `dist/index.js` file
-**Authored a GitHub Actions workflow** that uses your custom action
14
+
-**Tested your action** by triggering it with issue comments and validating the output
28
15
29
16
### What's next?
30
17
31
-
-[Take another GitHub Skills course](https://github.com/skills).
32
-
- We'd love to hear what you thought of this course in our [discussion board](https://github.com/orgs/skills/discussions/categories/write-javascript-actions).
33
-
-[Read the GitHub Getting Started docs](https://docs.github.com/en/get-started).
34
-
- To find projects to contribute to, check out [GitHub Explore](https://github.com/explore).
18
+
- Check out the other [GitHub Skills exercises](https://learn.github.com/skills).
19
+
- Try using your Dad Jokes action in your other repositories to add some humor to your workflows!
20
+
21
+
-**Create your next action** using GitHub's template repositories with best practices like tests and linting already built-in:
0 commit comments