-
Notifications
You must be signed in to change notification settings - Fork 1
refactor: major exercise content and workflows refresh #1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
d3087e6
b767426
37779be
a0259ea
16c67a4
5210d74
b740fde
d93092e
0531651
b41d11f
a142a8e
27666af
8e6d2ad
42805bb
f7c937d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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": {} | ||
| } | ||
| } |
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
| 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. | ||
|
|
||
| [](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: | ||
FidelusAleksander marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ```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 | ||
| ``` | ||
|
|
||
FidelusAleksander marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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> | ||
This file was deleted.
| 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. | ||
FidelusAleksander marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| > | ||
| > 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. | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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.
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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: | ||
FidelusAleksander marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ```sh | ||
| git add src/ | ||
| git commit -m "Add Dad Joke action source files" | ||
| git push | ||
| ``` | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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.
FidelusAleksander marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| 1. With the changes pushed to GitHub, Mona will check your work and share the next steps. | ||
This file was deleted.

Uh oh!
There was an error while loading. Please reload this page.