💎 Lab 15 - Setting up CI

March 21, 2023 · View on GitHub

⏰ Estimated time: 5-10 minutes

📚 Learning outcomes:

Basics of GitHub actions
Use Nx to setup scalable checks on your PRs to ensure only passing code goes into the main branch
Explore other practical uses of nx affected

🏋️‍♀️ Steps :

Before starting on this lab, you must have a version of your local workshop pushed to your GitHub repo.

Let's make sure the main branch is up to date (it's important your latest changes are on main (or master) for the follow-up steps):
- If you already are on main commit everything: git add . && git commit -m "finished lab 14" git push origin main
- If you are on a different branch, commit everything, switch to the main, and bring it up to date:
```
git add . && git commit "finish lab 14"
git checkout main (or master)
git merge previous-branch-you-were-on
git push origin main (or master)
```

Create a new file .github/workflows/ci.yml

name: Run CI checks # The name will show up on the GitHub Actions dashboard

on: [pull_request] # This workflow will run only on Pull Requests

jobs:
  test-store: # give our job an ID
    runs-on: ubuntu-latest # the image our job will run on
    name: Test Store # the name that will appear on the Actions UI
    steps: # what steps it will perform
      - uses: actions/checkout@v3 # checkout whatever branch the PR is using
        with:
          fetch-depth: 0
      - uses: bahmutov/npm-install@v1 # trigger an `npm install`
      - run: npx nx test store # test the "store" project
  test-api:
    runs-on: ubuntu-latest
    name: Test API
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: bahmutov/npm-install@v1
      - run: npx nx test api

Commit and then switch to a new branch:
```
git add . && git commit -m "add ci"
git push origin main (or main)
git checkout -b dynamic-title
```
⚠️ I know we just switched to main above. But it was important we bring it up to date. Now we need to switch to a new branch so we can submit our PR.
Open apps/store/src/app/app.component.html

And make the title of the header dynamic:

<bg-hoard-header [title]="title"></bg-hoard-header>

Commit all your changes and push your new branch.
Go to GitHub and make a Pull Request to main
After a few moments you'll see something like this:
The unit tests will be failing - that's expected.

We are starting to set-up our CI, that will verify our Pull Requests to ensure bad code doesn't go into main.

But now we're testing both projects - even though we only changed the store.

Testing only affected

Let's use nx affected to only test the changed projects:

Instead of running two nx commands in your CI, run a single nx affected command that tests all affected projects.

🐳 Hint 1

Check-out this handy tutorial Refer to the docs

🐳 Hint 2

Since it's a Pull Request, your base commit will always be --base=origin/main
🐳 Hint 3

You should only need 1 job now:
```
jobs:
  test:
    runs-on: ubuntu-latest
    name: Testing affected apps
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: bahmutov/npm-install@v1
      - run: .....
```
⚠️ It's okay to work on this on your new branch. We'll merge everything to main eventually.
Commit and push. On your Github Actions log you should see only the store tests running:
Our tests are now being ran sequentially for each project. See if you can run them in parallel (consult the Nx Affected docs if unsure)
Our CI only does testing now. But we also have targets for lint, e2e and build. Would really be handy if CI also told us if any of those failed.

Add more steps under your CI workflow that run affected for each of the above targets
Commit and push your ci.yml changes.
You'll notice some new steps in the GitHub Actions UI. Some of them are failing. That is okay. We can fix them later.
For now, you can merge your PR into main
Switch to main locally and pull latest so all your new CI changes are up to date.
```
git checkout main
git pull origin main
```
BONUS: Currently, if we create a PR with a change only to our ci.yml file, our nx affected commands won't run at all: as they'll think no project has been affected:

To be safe, we'd like to mark all projects as affected whenever we change our CI config, as we don't know what those changes could have broken. Have a look through the docs in the hint and see if you can do this.

🐳 Hint

Configuring implicit dependencies

🎓If you get stuck, check out the solution

➡️ Next lab ➡️