Create a JavaScript Action with tests, linting, workflow, publishing, and versioning
Go to file Use this template
Nick Alteen e3dfacee59
Merge pull request #421 from actions/dependabot/npm_and_yarn/eslint-8.57.1
Bump eslint from 8.57.0 to 8.57.1
2024-09-23 13:33:23 -04:00
.devcontainer Update devcontainer.json 2024-03-02 20:57:50 -05:00
.github Bump super-linter/super-linter from 6 to 7 2024-08-19 09:02:30 +00:00
__tests__ Update extension in test 2023-11-07 09:33:16 -05:00
badges Update workflows 2023-09-14 10:37:52 -04:00
dist Update npm scripts 2024-02-22 11:41:07 -05:00
src Restructure source and tests 2023-09-14 10:36:27 -04:00
.eslintignore Add directories to .eslintignore 2023-09-14 10:34:37 -04:00
.gitattributes Enforce line-ending style 2023-11-28 12:43:55 -05:00
.gitignore Update git configuration 2023-09-14 10:34:58 -04:00
.node-version Format and updates 2023-11-28 00:03:31 -05:00
.prettierignore Add prettier configuration 2023-09-14 10:35:08 -04:00
.prettierrc.json Add prettier configuration 2023-09-14 10:35:08 -04:00
CODEOWNERS Update CODEOWNERS 2023-12-15 10:18:01 -05:00
LICENSE Update LICENSE to standard 2023-11-16 10:25:40 -05:00
README.md Update links to use "main" instead of "master" 2024-07-12 11:02:24 +02:00
action.yml Commend and format action.yml 2023-09-14 10:35:27 -04:00
package-lock.json Bump eslint from 8.57.0 to 8.57.1 2024-09-23 09:46:50 +00:00
package.json Bump eslint from 8.57.0 to 8.57.1 2024-09-23 09:46:50 +00:00

Create a JavaScript Action

GitHub Super-Linter CI

Use this template to bootstrap the creation of a JavaScript action. 🚀

This template includes compilation support, tests, a validation workflow, publishing, and versioning guidance.

If you are new, there's also a simpler introduction in the Hello world JavaScript action repository.

Create Your Own Action

To create your own action, you can use this repository as a template! Just follow the below instructions:

  1. Click the Use this template button at the top of the repository
  2. Select Create a new repository
  3. Select an owner and name for your new repository
  4. Click Create repository
  5. Clone your new repository

[!IMPORTANT]

Make sure to remove or update the CODEOWNERS file! For details on how to use this file, see About code owners.

Initial Setup

After you've cloned the repository to your local machine or codespace, you'll need to perform some initial setup steps before you can develop your action.

[!NOTE]

You'll need to have a reasonably modern version of Node.js handy. If you are using a version manager like nodenv or nvm, you can run nodenv install in the root of your repository to install the version specified in package.json. Otherwise, 20.x or later should work!

  1. 🛠️ Install the dependencies

    npm install
    
  2. 🏗️ Package the JavaScript for distribution

    npm run bundle
    
  3. Run the tests

    $ npm test
    
    PASS  ./index.test.js
      ✓ throws invalid number (3ms)wait 500 ms (504ms)test runs (95ms)
    
    ...
    

Update the Action Metadata

The action.yml file defines metadata about your action, such as input(s) and output(s). For details about this file, see Metadata syntax for GitHub Actions.

When you copy this repository, update action.yml with the name, description, inputs, and outputs for your action.

Update the Action Code

The src/ directory is the heart of your action! This contains the source code that will be run when your action is invoked. You can replace the contents of this directory with your own code.

There are a few things to keep in mind when writing your action code:

  • Most GitHub Actions toolkit and CI/CD operations are processed asynchronously. In main.js, you will see that the action is run in an async function.

    const core = require('@actions/core')
    //...
    
    async function run() {
      try {
        //...
      } catch (error) {
        core.setFailed(error.message)
      }
    }
    

    For more information about the GitHub Actions toolkit, see the documentation.

So, what are you waiting for? Go ahead and start customizing your action!

  1. Create a new branch

    git checkout -b releases/v1
    
  2. Replace the contents of src/ with your action code

  3. Add tests to __tests__/ for your source code

  4. Format, test, and build the action

    npm run all
    

    [!WARNING]

    This step is important! It will run ncc to build the final JavaScript action code with all dependencies included. If you do not run this step, your action will not work correctly when it is used in a workflow. This step also includes the --license option for ncc, which will create a license file for all of the production node modules used in your project.

  5. Commit your changes

    git add .
    git commit -m "My first action is ready!"
    
  6. Push them to your repository

    git push -u origin releases/v1
    
  7. Create a pull request and get feedback on your action

  8. Merge the pull request into the main branch

Your action is now published! 🚀

For information about versioning your action, see Versioning in the GitHub Actions toolkit.

Validate the Action

You can now validate the action by referencing it in a workflow file. For example, ci.yml demonstrates how to reference an action in the same repository.

steps:
  - name: Checkout
    id: checkout
    uses: actions/checkout@v3

  - name: Test Local Action
    id: test-action
    uses: ./
    with:
      milliseconds: 1000

  - name: Print Output
    id: output
    run: echo "${{ steps.test-action.outputs.time }}"

For example workflow runs, check out the Actions tab! 🚀

Usage

After testing, you can create version tag(s) that developers can use to reference different stable versions of your action. For more information, see Versioning in the GitHub Actions toolkit.

To include the action in a workflow in another repository, you can use the uses syntax with the @ symbol to reference a specific branch, tag, or commit hash.

steps:
  - name: Checkout
    id: checkout
    uses: actions/checkout@v4

  - name: Run my Action
    id: run-action
    uses: actions/javascript-action@v1 # Commit with the `v1` tag
    with:
      milliseconds: 1000

  - name: Print Output
    id: output
    run: echo "${{ steps.run-action.outputs.time }}"