Improve CI

[rosseboe]

No description provided.

[github-learning-lab]

The title of this pull request isn't what I expected!

To rename your pull request:

1. Click on Edit next to the pull request's title.
2. The title will turn to a text field, Improve CI in the title field.
3. Click Save.

I'll respond when I detect this pull request has been renamed.

[github-learning-lab]

Matrix builds

Great work so far! By targeting specific versions of Node, we've configured a build matrix which allow us to test across multiple operating systems, platforms, and language versions. See Configuring a matrix build in GitHub Help if you'd like to learn more.

I'll respond when you commit the changes in the comment below.

[github-learning-lab]

New Job

Great, if you look at the logs now, you'll notice that multiple builds will exist: 4 build to be exact! That's because for each of the 2 operating systems we're running tests against 2 versions so: 2 OS ✖️ 2 Node.js versions = 4 builds.

Our custom workflow now accounts for:

• ✅ test against multiple targets so that we know if our supported operating systems and Node.js versions are working

Step 9: Use multiple jobs

Let's now try to create a dedicated test job and satisfy the second item in our custom workflow checklist.

This will allow us to separate the build and test functions of our workflow into more than one job that will run when our workflow is triggered.

Activity: Edit your workflow file to separate build and test jobs

1. Edit your workflow file
2. Create a new job called "test" as follows (we'll use ellipses ... to only show the parts of the workflow we're interested in, but you should not copy the ellipses directly):

   name: Node CI
   
   on: [push]
   
   jobs:
     build:
       ...
     test:
       ...

3. In the build job, include the following portions of your existing workflow:

   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: npm install and build webpack
         run: |
           npm install
           npm run build

4. In the newly created test job, include the following portions of your existing workflow:

   test:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         os: [ubuntu-latest, windows-2016]
         node-version: [12.x, 14.x]
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
     - name: npm install, and test
       run: |
         npm install
         npm test
       env:
         CI: true

If you'd like to copy and paste the full workflow file instead, click here to see it in its entirety.

name: Node CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: npm install and build webpack
        run: |
          npm install
          npm run build

  test:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        os: [ubuntu-latest, windows-2016]
        node-version: [12.x, 14.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, and test
      run: |
        npm install
        npm test
      env:
        CI: true

When you commit to this branch, the workflow should run again. I'll respond when it is finished running.

---

Actions workflow not running? Click here

When a GitHub Actions workflow is running, you should see some checks in progress, like the screenshot below.

If the checks don't appear or if the checks are stuck in progress, there's a few things you can do to try and trigger them:

• Refresh the page, it's possible the workflow ran and the page just hasn't been updated with that change
• Try making a commit on this branch. Our workflow is triggered with a push event, and committing to this branch will result in a new push
• Edit the workflow file on GitHub and ensure there are no red lines indicating a syntax problem

[github-learning-lab]

Waiting on tests

Great! We've now got two nicely separated build and test jobs. Our custom workflow now accounts for:

• ✅ test against multiple targets so that we know if our supported operating systems and Node.js versions are working
• ✅ dedicated test job so that we can separate out build from test details

If you'd like to learn more about jobs, see:

• About GitHub Actions: Job in GitHub Help
• About CI: Job in GitHub Help
• Workflow syntax for GitHub Actions: jobs

Step 10: Run multiple jobs

⌨️ Activity: Wait for the result of multiple jobs in your workflow

No action required in this step - just waiting. I'll respond when the workflow runs your jobs.

---

Actions workflow not running? Click here

When a GitHub Actions workflow is running, you should see some checks in progress, like the screenshot below.

If the checks don't appear or if the checks are stuck in progress, there's a few things you can do to try and trigger them:

• Refresh the page, it's possible the workflow ran and the page just hasn't been updated with that change
• Try making a commit on this branch. Our workflow is triggered with a push event, and committing to this branch will result in a new push
• Edit the workflow file on GitHub and ensure there are no red lines indicating a syntax problem

[github-learning-lab]

Use the upload

The workflow has finished running!

You may notice build succeeded, but each of the test jobs failed. That's because the build artifacts created in build aren't available to the test job. Each job executes in a fresh instance of the virtual environment. This is due to the design of the virtual environments themselves.

So what do we do when we need the work product of one job in another? We can use the built-in artifact storage to save artifacts created from one job to be used in another job within the same workflow.

Step 11: Upload a job's build artifacts

Artifacts allow you to persist data after a job has completed, and share that data with another job in the same workflow. An artifact is a file or collection of files produced during a workflow run.

To upload artifacts to the artifact storage, we can use an action built by GitHub: actions/upload-artifacts.

⌨️ Activity: Use the upload action in your workflow file to save a job's build artifacts

You can follow the manual steps below, or accept the suggestion in the following comment.

1. Edit your workflow file
2. Add a step to your build job that uses the upload-artifacts action.

     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - name: npm install and build webpack
           run: |
             npm install
             npm run build
         - uses: actions/upload-artifact@main
           with:
             name: webpack artifacts
             path: public/

3. Commit your change to this branch

I'll respond when you commit to this branch.

[github-learning-lab]

Use the download

Great! The build artifacts will now be uploaded to the artifact storage. If you wait for the workflow to finish, you'll notice the test job still fails. This is for a number of reasons:

• jobs run in parallel, unless configured otherwise
• each job runs in its own virtual environment, so although we've pushed our artifacts to storage, the test job needs to retrieve them.

Step 12: Download a job's build artifacts

To remedy this, we'll run test only after build is finished so the artifacts are available.

Similar to the upload action to send artifacts to the storage, we'll use another action built by GitHub to download these previously uploaded artifacts from the build job: actions/download-artifact.

⌨️ Activity: Use the download action in your workflow file to access a prior job's build artifacts

You can follow the manual steps below, or accept the suggestions in the following comments.

1. Edit your workflow file
2. Configure the test job to run only after the build job is completed (we'll use ellipses ... to only show the parts of the workflow we're interested in, but you should not copy the ellipses directly):

     test:
       needs: build
       runs-on: ubuntu-latest
       ...

3. Add a step to your test job that uses the download-artifacts action.

     test:
       needs: build
       runs-on: ubuntu-latest
       ...
       steps:
       - uses: actions/checkout@v2
       - uses: actions/download-artifact@main
         with: 
           name: webpack artifacts
           path: public
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
       - name: npm install, and test
         run: |
           npm install
           npm test
         env:
           CI: true

I'll respond when you've edited your workflow file.

[github-learning-lab]

Merge the CI

Awesome work!

Our custom workflow now accounts for:

• ✅ test against multiple targets so that we know if our supported operating systems and Node.js versions are working
• ✅ dedicated test job so that we can separate out build from test details
• ✅ access to build artifacts so that we can deploy them to a target environment

Step 13: Share the improved CI workflow with the team

⌨️ Activity: Merge the pull request with the improved workflow

1. Merge this pull request so our new CI workflow is available to the entire team

---

In the next few steps, we'll finish supporting our team's workflow:

• branch protections so that the main branch can't be deleted or inadvertently broken
• required reviews so that any pull requests are double checked by teammates
• obvious approvals so we can merge quickly and potentially automate merges and deployments

I'll respond when you merge this pull request.