GitHub Actions Uploading Build Artifacts

Introduction

In a Continuous Integration (CI) pipeline, one job often produces files (like compiled binaries, webpack bundles, or test reports) that you want to keep or share with other jobs. These files are called artifacts.

By default, the files created during a workflow run are lost when the run finishes. To persist them, you need to "upload" them as artifacts.

In this lab, you will modify your Node.js workflow to simulate a build process that creates a dist directory, and then use the actions/upload-artifact action to save that directory.

This lab builds on the repository you created in the previous labs. You will work with the github-actions-demo repository.

Update workflow to generate a build file

In this step, you will modify the workflow file to simulate a build process. You will add a step that creates a dist directory and a dummy artifact file.

1. On your GitHub repository page for github-actions-demo, click the green Code button.
2. Ensure the HTTPS tab is selected and copy the URL. It should look like https://github.com/your-username/github-actions-demo.git.
3. Open the terminal in the LabEx environment. The default path is ~/project.
4. Use the git clone command to download the repository. Replace your-username with your actual GitHub username.

cd ~/project
git clone https://github.com/your-username/github-actions-demo.git

Example Output:

Cloning into 'github-actions-demo'...
remote: Enumerating objects: X, done.
remote: Counting objects: 100% (X/X), done.
remote: Total X (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (X/X), done.

5. Navigate into the cloned repository:

cd ~/project/github-actions-demo

3. Create a new workflow file .github/workflows/upload-artifacts.yml using the WebIDE editor. You can find the file in the file explorer on the left side under project/github-actions-demo/.github/workflows/.

4. Start by creating the basic workflow structure. Add the workflow name and trigger:

name: Upload Artifacts

on: [push]

5. Add the jobs section and define the build job with its runner:

jobs:
  build:
    runs-on: ubuntu-latest

6. Add the steps section. First, add the checkout step:

steps:
  - uses: actions/checkout@v4

7. Add the Node.js setup step:

- name: Use Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20"

8. Add the step to install dependencies:

- name: Install dependencies
  run: npm install

9. Add the build step that creates the dist directory and a file inside it:

- name: Build project
  run: |
    mkdir dist
    echo "This is the build artifact" > dist/build.txt

10. Add the test step:

- name: Run tests
  run: npm test

Your complete file should now look like this:

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test

Explanation

• mkdir dist: Creates a directory named dist.
• echo ... > dist/build.txt: Creates a simple text file inside dist to simulate a compiled asset.

Save the file (Ctrl+S or Cmd+S) after making changes.

Use actions/upload-artifact@v4 to upload the dist directory

Now that we have produced some files, we need to upload them. We will use the official actions/upload-artifact action.

1. In .github/workflows/upload-artifacts.yml, add a new step at the end of the job:

- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: build-assets
    path: dist

2. Your complete file should look similar to this:

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test
      - name: Upload build artifact
        uses: actions/upload-artifact@v4
        with:
          name: build-assets
          path: dist

Explanation

• uses: actions/upload-artifact@v4: Calls the action to handle the upload.
• name: build-assets: The name of the artifact as it will appear in the GitHub UI.
• path: dist: The directory (or file) to upload.

Save the file (Ctrl+S or Cmd+S).

Commit, push, and verify the artifact in the GitHub UI

In this step, you will commit the changes and push them to GitHub. This will trigger the workflow you just updated.

1. Ensure you are in the repository directory:

cd ~/project/github-actions-demo

2. Stage the changes:

git add .

3. Commit the changes:

git commit -m "Add build step and upload artifacts"

4. Push the changes to the remote repository on GitHub:

git push

Note on Authentication

When you run git push, the WebIDE will automatically prompt you to authenticate. Follow these detailed steps:

1. A popup will appear with the message: "The extension 'GitHub' wants to sign in using GitHub." Click Allow.
2. A new notification will appear. Click "Copy&Continue to GitHub", then click "Open" in the next prompt.
3. Log in to your GitHub account in the browser window that opens, and enter the authorization code that was copied. After confirming the authorization, the page will automatically close.
4. Wait a few seconds, and you will see the terminal successfully complete the push operation.

Privacy Note: The WebIDE will request full access to your GitHub account for authentication purposes. You don't need to worry about privacy concerns - the LabEx VM will be immediately destroyed after you complete the current lab, and your credentials and authorization information will not be retained.

This authentication process does not require manual configuration of username or Personal Access Token.

Verify on GitHub

1. Visit your repository on GitHub in a web browser.
2. Click on the Actions tab.
3. Click on the latest workflow run (e.g., "Add build step and upload artifacts").
4. Scroll down to the bottom of the summary page. You should see a section titled Artifacts.
5. You should see an artifact named build-assets.
6. Click on it to download it. It will be a zip file containing build.txt.

Summary

In this lab, you learned how to persist data from a workflow run using artifacts. You:

1. Created a "build" step that generated output files.
2. Used actions/upload-artifact to save the dist directory.
3. Verified that the artifact was available for download in the GitHub UI.

Artifacts are essential for sharing files between jobs (e.g., build job to deploy job) or for debugging failures by uploading logs.