13-TASK.md

💎 Taks 13 - Setting up CI

⏰  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 master
• Explore other practical uses of nx affected

🏋️‍♀️ Steps :

Before starting on this task, it's important that you have a version of your local workshop pushed to your GitHub repo.

1. 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@v1 # checkout whatever branch the PR is using
         - uses: bahmutov/npm-install@v1 # trigger an `npm install`
         - run: npm run nx test store # test the "store" project
     test-api:
       runs-on: ubuntu-latest
       name: Test API
       steps:
         - uses: actions/checkout@v1
         - uses: bahmutov/npm-install@v1
         - run: npm run nx test api

2. Commit your changes to the main branch

   git add . && git commit -m "add ci"
   git push origin master
   git checkout -b dynamic-title
   

   ⚠️  I know we just switched to master 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.

4. Open apps/store/src/app/app.tsx

5. And make any change at all to the component (the title of the header dynamic):

   const title = "Board Game Hoard";
   // ...
   <Header title={title} />
   

   🐳   Hint - set the props in the Header as well

   export interface HeaderProps {
     title: string;
   }
   
   export const Header = ({ title }: HeaderProps) => {
     const classes = useStyles();
   
     return (
       <AppBar position="static">
         <Toolbar>
           <Typography variant="h6" className={classes.title}>
             {title}
           </Typography>
         </Toolbar>
       </AppBar>
     );
   };

   
   

6. Commit all your changes and push your new branch.

7. Go to GitHub and make a Pull Request to master

8. After a few moments you'll see something like this:

9. 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 master.

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

---

Testing only affected

10. 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/master

    🐳   Hint 3

    You should only need 1 job now:

    jobs:
      test:
        runs-on: ubuntu-latest
        name: Testing affected apps
        steps:
          - uses: actions/checkout@v1
          - uses: bahmutov/npm-install@v1.4.5
          - run: .....

    ⚠️  It's okay to work on this on your new branch. We'll merge everything to master eventually.

11. Commit and push. On your Github Actions log you should see only the store tests running:

    
    

12. 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)

13. 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 jobs under your CI workflow that run affected for each of the above targets

14. Commit and push your ci.yml changes.

15. You'll notice some new steps in the GitHub Actions UI. Some of them are failing. That is okay. We can fix them later.

16. For now, you can merge your PR into master

17. Switch to master locally and pull latest so all your new CI changes are up to date.

    git checkout master
    git pull origin master

18. 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

---