tasks.md

Task

Tasks

Task 1

• Create repo from this template repo
• Make a new branch
• Make a github action that builds a pull request
• Push the changes and create a pull request

Hint

Gh action support multiple triggers, one of them is `pull_request` which is triggered when a PR is created or updated. When running a gh action usually you want to checkout the code, as this is not done by default you need to add a step to do this. In this project your need to run `npm install` and `npm run build` to build the project.

The below code needs to be added to the file in .github/workflows/ci.yml

name: CI # Name of the workflow

on:
  pull_request: #Runs when pull request is created or updated

jobs:
  build:
    name: Build # Name of your job
    runs-on: ubuntu-latest # What OS to run on, usually windows-latest or ubuntu-latest

    steps:
      - name: Checkout code #When the github action starts its an empty container, so to interact with your codebase you need to checkout the repo first
        uses: actions/checkout@v2

      - name: Build # This step will install npm dependencies and build the project
        shell: bash
        run: |
          npm install
          npm run build

Task 2

• Merge your the pull request from task 1
• Make the action from task 1 mandatory as a branch protection rule

Hint

To make the action mandatory you need to add a branch protection rule. 1. Go to github settings in the web browser 2. Navigate to rules and then rulesets 3. Click new branch ruleset 4. Give it a name (I usually call it main) 5. Set enforcement status to active 6. Click add target and select include default branch (main) 7. Scroll down and check `Require status checks to pass` 8. Click add checks 9. Write the name of the job in your ci.yml workflow (Build) 10. Click create

Now you can make a pull request to check if its working The merge button on the pull request will be greyed out until the action completes

Task 3

• Merge the pr from task 2
• Add a badge from shields to the readme.md

Hint

To add a badge to the readme you need to add a markdown snippet. The snippet should look something like this:

1. Remove the \
2. Change github username to your username
3. Change repo name to your repo name
4. Add workflow name (ci.yml) 

The badge will probably say build failed but that is because the badge is for the main branch where the action has failed

Task 4

• Merge PR from task 3
• Make a new branch
• Make the CI build action run on both Windows and Ubuntu runners before passing.

Hint

To run the action on both Windows and Ubuntu you need to add a matrix to the action. The matrix configuration should look something like this:

name: CI

on:
  pull_request:

jobs:
  build:
    strategy:
      matrix:
        os: [ubuntu-latest, windows-latest]
    name: Build
    runs-on: ${{matrix.os}}

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Build
        shell: bash
        run: |
          npm install
          npm run build

You can then use the matrix.os variable to run different commands based on the OS.

If everything is working you should see two CI / Build runs on your pull request

[!WARNING]
Your branch protection rule is now invalid for some reason and will never succeed To fix it update the branch protection rule and add Build (ubuntu-latest) and Build (windows-latest)

Task 5

• Deploy the application as a github page

Hint

Look at the gh-page-deploy.yml file in the .github/workflows folder This file is a template for deploying a static site to github pages. You need to change the run step to build your project and then deploy it to the gh-pages branch.

      - name: Deploy
        run: |
          npm install
          npm run build

Task 6

• Update the gh-page-deploy.yml file to be triggered by workflow_dispatch
• Trigger the deployment

Hint

```yaml on: workflow_dispatch: ```

Task 7

• use the github event object to get the commit id and add it node env with the name of VITE_commitId
• Redeploy the application and check the page for the commit id

Hint

Look at the gh-page-deploy.yml file in the .github/workflows folder This file is a template for deploying a static site to github pages. You need to change the run step to build your project and then deploy it to the gh-pages branch.

      - name: Deploy
        run: |
          npm install
          npm run build
          echo "VITE_commitId=${{github.sha}}" >> .env

Task 8

• Update the gh-page-deploy.yml file to create a github issue with the title "Deployed commit id: "

Hint

You are a pro, no more hints for you.

Task 9

• Create a github action that runs on a schedule and closes all issues with the label "fixed"

Hint

You are a pro, no more hints for you.

Task 10

• Create a github action that runs on a schedule and updates all npm packages then creates a PR with the changes

Hint

You are a pro, no more hints for you.

Task 11

• Help others who are stuck

Hint

Really dude?