From cc72bab55ae045c02f50ea277f2a7b3894eb89c2 Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Fri, 17 Nov 2023 18:03:47 +0200 Subject: [PATCH] fix: some typos here and there (#31) --- docs/lab10/LAB.md | 2 +- docs/lab11/LAB.md | 4 + docs/lab12/LAB.md | 6 +- docs/lab15/LAB.md | 172 +++++++++--------- docs/lab16/LAB.md | 23 +-- docs/lab18/LAB.md | 12 +- docs/lab21-alt/LAB.md | 19 +- docs/lab21/LAB.md | 20 +- docs/lab22/LAB.md | 37 ++-- docs/lab4/LAB.md | 9 +- docs/lab7/LAB.md | 2 +- docs/lab7/SOLUTION.md | 2 +- docs/lab9/LAB.md | 4 +- .../complete-lab-9/complete-lab-9.ts | 6 +- 14 files changed, 156 insertions(+), 162 deletions(-) diff --git a/docs/lab10/LAB.md b/docs/lab10/LAB.md index 5e5f6a1..d444b25 100644 --- a/docs/lab10/LAB.md +++ b/docs/lab10/LAB.md @@ -36,7 +36,7 @@ Let's explore some more Nx plugins by generating and running a storybook configu 4. Start typing in different titles and see how they appear in the header - the header component running in storybook + the header component running in storybook
diff --git a/docs/lab11/LAB.md b/docs/lab11/LAB.md index ac8625d..77e0756 100644 --- a/docs/lab11/LAB.md +++ b/docs/lab11/LAB.md @@ -21,9 +21,11 @@ The storybook generator we invoked earlier also generated some tests. Let's try
🐳 Hint ```ts + args: { title: 'Welcome to Board Game Hoard'; } + ```
@@ -34,7 +36,9 @@ The storybook generator we invoked earlier also generated some tests. Let's try
🐳 Hint ```ts + expect(canvas.getByText(/Welcome to Board Game Hoard/gi)).toBeTruthy(); + ```
diff --git a/docs/lab12/LAB.md b/docs/lab12/LAB.md index ac25045..3fc83f5 100644 --- a/docs/lab12/LAB.md +++ b/docs/lab12/LAB.md @@ -71,11 +71,9 @@ 10. **Run linting** again and check if all the errors went away. - 💡  Pass the suggested `--only-failed` option, so it doesn't relint everything. +💡  Pass the suggested `--only-failed` option, so it doesn't relint everything. -
- -11. **Commit everything** before moving on to the next lab +11. **Commit everything** before moving on to the next lab
--- diff --git a/docs/lab15/LAB.md b/docs/lab15/LAB.md index 9be5d75..b3485d3 100644 --- a/docs/lab15/LAB.md +++ b/docs/lab15/LAB.md @@ -16,57 +16,55 @@ pushed to your GitHub repo. 1. Let's make sure the master branch is up to date (it's important your latest changes are on `main` for the follow-up steps): - If you already are on `main` - commit everything: `git add . && git commit -m "finished lab 14" git push origin master` - > If you are on a different branch, commit everything, switch to master + > If you are on a different branch, commit everything, switch to master and bring it up to date: - and bring it up to date: - - ```shell - git add . && git commit "finish lab 14" - git checkout master - git merge previous-branch-you-were-on - git push origin master - ``` + ```shell + git add . && git commit "finish lab 14" + git checkout master + git merge previous-branch-you-were-on + git push origin master + ```
2. Create a new file `.github/workflows/ci.yml` - ```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@v4 # checkout whatever branch the PR is using - - uses: bahmutov/npm-install@v1.4.5 # 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@v4 - - uses: bahmutov/npm-install@v1.4.5 - - run: npm run nx test api - ``` + ```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@v4 # checkout whatever branch the PR is using + - uses: bahmutov/npm-install@v1.4.5 # 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@v4 + - uses: bahmutov/npm-install@v1.4.5 + - run: npm run nx test api + ```
3. Commit and then switch to a new branch: - ``` - git add . && git commit -m "add ci" - git push origin master - git checkout -b dynamic-title - ``` + ``` + 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. + ⚠️  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`
@@ -126,89 +124,87 @@ 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: +10. Let's use `nx affected` - Instead of running two `nx` commands in your CI, run a single `nx affected` command - that tests all affected projects. +Instead of running two `nx` commands in your CI, run a single `nx affected` command +that tests all affected projects. -
- 🐳   Hint 1 +
🐳   Hint 1 - Refer to the [docs](https://nx.dev/nx-api/nx/documents/affected) -
+Refer to the [docs](https://nx.dev/nx-api/nx/documents/affected) +
-
- 🐳   Hint 2 +
🐳   Hint 2 - Since it's a Pull Request, your base commit will always be `--base=origin/main` -
+Since it's a Pull Request, your base commit will always be `--base=origin/main` +
-
- 🐳   Hint 3 +
🐳   Hint 3 - You should only need 1 job now: +You should only need 1 job now: - ```yaml - jobs: - test: - runs-on: ubuntu-latest - name: Testing affected apps - steps: - - uses: actions/checkout@v4 - - uses: bahmutov/npm-install@v1.4.5 - - run: ..... - ``` +```yaml +jobs: + test: + runs-on: ubuntu-latest + name: Testing affected apps + steps: + - uses: actions/checkout@v4 + - uses: bahmutov/npm-install@v1.4.5 + - run: ..... +``` -
+
- ⚠️  It's okay to work on this on your new branch. We'll merge everything to `main` - eventually. +⚠️  It's okay to work on this on your new branch. We'll merge everything to `main` +eventually. -
+
-11. Commit and push. On your Github Actions log you should see only the `store` tests running: +11. Commit and push. On your Github Actions log you should see only the `store` tests running: - Only store tests are running
+Only store tests are 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](https://nx.dev/nx-api/nx/documents/affected) if unsure) +1. Our tests are now being ran sequentially for each project. See if you can run them in parallel (consult the Nx Affected [docs](https://nx.dev/nx-api/nx/documents/affected) 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. +2. 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. + +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. +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 `main ` +16. For now, you can merge your PR into `main `
-17. Switch to `main` locally and pull latest so all your new CI changes are up to date. +17. Switch to `main` locally and pull latest so all your new CI changes are up to date. - ```shell - git checkout master - git pull origin master - ``` +```shell +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: - Changes to ci.yml does not cause anything to be affected +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. +Changes to ci.yml does not cause anything to be 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 + +[Setting named inputs](https://nx.dev/reference/nx-json#inputs-namedinputs) +
-
- 🐳   Hint - [Setting named inputs](https://nx.dev/reference/nx-json#inputs-namedinputs) -

--- diff --git a/docs/lab16/LAB.md b/docs/lab16/LAB.md index eebb52a..da36839 100644 --- a/docs/lab16/LAB.md +++ b/docs/lab16/LAB.md @@ -81,23 +81,24 @@ 10. Let's try a different command - in the same folder you are in, try to run: - ``` - nx run-many --target=lint --all - ``` +``` +nx run-many --target=lint --all +``` - 🕑 It should start the linting work, and take a few seconds... +🕑 It should start the linting work, and take a few seconds... -
-11. Now let's go back to our main workshop repository and run: +
- ``` - nx run-many --target=lint --all - ``` +11. Now let's go back to our main workshop repository and run: - ⚡ It should pull again from the NxCloud cache...This is even works across laptops! CI will use it as well! +``` +nx run-many --target=lint --all +``` -
+⚡ It should pull again from the NxCloud cache...This is even works across laptops! CI will use it as well! + +
--- diff --git a/docs/lab18/LAB.md b/docs/lab18/LAB.md index 15037ca..2760114 100644 --- a/docs/lab18/LAB.md +++ b/docs/lab18/LAB.md @@ -52,9 +52,7 @@ ⚠️  You should see surge deploying to your URL - if you click you'll see just the header though, because it doesn't have a server yet to get the games from.
- ``` - ``` 5. Let's now abstract away the above command into an Nx target. Generate a new **"deploy"** target using the `@nx/workspace:run-commands` generator: @@ -94,12 +92,12 @@ ⚠️  Note for Windows users: the command might fail, as we're trying to access env variables the Linux-way. To make it pass, you can generate a separate `windows-deploy` executor (make sure you keep the existing `deploy` target intact - it will be used by GitHub Actions): - ```bash - nx generate run-commands windows-deploy --project=store --command="surge dist/apps/store %SURGE_DOMAIN_STORE% --token %SURGE_TOKEN%" - nx windows-deploy store - ``` +```bash +nx generate run-commands windows-deploy --project=store --command="surge dist/apps/store %SURGE_DOMAIN_STORE% --token %SURGE_TOKEN%" +nx windows-deploy store +``` -
+
--- diff --git a/docs/lab21-alt/LAB.md b/docs/lab21-alt/LAB.md index c5e5098..77bb27a 100644 --- a/docs/lab21-alt/LAB.md +++ b/docs/lab21-alt/LAB.md @@ -42,20 +42,21 @@ In this lab we'll be setting up GitHub actions to build and deploy our projects 3. Our "deploy" targets are using some secret ENV variables though. We'll need to make these available on GitHub: 1. Go to your GitHub workshop repo 2. Click on **"Settings"** at the top 3. Then **"Secrets"** on the left menu bar 4. Add values for all the variables we've been keeping in `.local.env` files - ![GitHub secrets](./github_secrets.png) -
+GitHub secrets + +
4. Then back in our `deploy.yml` file, let's expose these secrets to the processes (use `ci.yml` as an example of where to put these): - ```yml - env: - SURGE_DOMAIN_STORE: ${{ secrets.SURGE_DOMAIN_STORE }} - SURGE_DOMAIN_ADMIN_UI: ${{ secrets.SURGE_DOMAIN_ADMIN_UI }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - ``` +```yml +env: + SURGE_DOMAIN_STORE: ${{ secrets.SURGE_DOMAIN_STORE }} + SURGE_DOMAIN_ADMIN_UI: ${{ secrets.SURGE_DOMAIN_ADMIN_UI }} + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} +``` -
+
5. Since we'll be re-deploying, we want to test if we're looking at a new version of our code: - Make a change to your AdminUI (maybe change the text in the header) - Make a change to your Store (maybe change the title in the header)
diff --git a/docs/lab21/LAB.md b/docs/lab21/LAB.md index e9b163e..383b608 100644 --- a/docs/lab21/LAB.md +++ b/docs/lab21/LAB.md @@ -44,20 +44,20 @@ 3. Then **"Secrets"** on the left menu bar 4. Add values for all the variables we've been keeping in `.local.env` files - ![GitHub secrets](./github_secrets.png) -
+GitHub secrets +
4. Then back in our `deploy.yml` file, let's expose these secrets to the processes (use `ci.yml` as an example of where to put these): - ```yml - env: - SURGE_DOMAIN_STORE: ${{ secrets.SURGE_DOMAIN_STORE }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} - NX_API_URL: https://.fly.dev - ``` +```yml +env: + SURGE_DOMAIN_STORE: ${{ secrets.SURGE_DOMAIN_STORE }} + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} + NX_API_URL: https://.fly.dev +``` -
+
5. Since we'll be re-deploying, we want to test if we're looking at a new version of our code: diff --git a/docs/lab22/LAB.md b/docs/lab22/LAB.md index 09524f0..8a8e74a 100644 --- a/docs/lab22/LAB.md +++ b/docs/lab22/LAB.md @@ -14,9 +14,9 @@ In the previous labs we set up automatic deployments. But everytime we push to m 1. Update your `deploy.yml` file so that it builds only the affected apps, and it deploys only the affected apps - ⚠️  You can compare against the previous commit for now: `--base=HEAD~1` +⚠️  You can compare against the previous commit for now: `--base=HEAD~1` -
+
2. If you haven't already, ensure you run your "affected" commands in parallel
@@ -61,32 +61,29 @@ In the previous labs we set up automatic deployments. But everytime we push to m 5. Right after the `npm-install` step, let's trigger the action to get the last successful commit: - ```yml - - uses: bahmutov/npm-install@v1 - - uses: nrwl/nx-set-shas@v4 - with: - main-branch-name: 'main' # remember to set this correctly - ``` +```yml +- uses: bahmutov/npm-install@v1 +- uses: nrwl/nx-set-shas@v4 + with: + main-branch-name: 'main' # remember to set this correctly +``` -
+
6. You can now use the output from the above action in your affected commands: - ```bash - --base=${{ env.NX_BASE }} - ``` +```bash +--base=${{ env.NX_BASE }} +``` -
7. By default, the `actions/checkout` action only fetches the last commit (for efficiency). But since we now might want to compare against a larger range of commits, we need to tell it to fetch more: - ```yaml - - uses: actions/checkout@v4 - with: - fetch-depth: 0 - ``` - -
+```yaml +- uses: actions/checkout@v4 + with: + fetch-depth: 0 +``` 8. Commit everything and push. Let it build. It should compare against the immediately previous commit (because your workflow ran against it, and it passed)
diff --git a/docs/lab4/LAB.md b/docs/lab4/LAB.md index 053174a..91c9d85 100644 --- a/docs/lab4/LAB.md +++ b/docs/lab4/LAB.md @@ -47,22 +47,21 @@ Let's add a header to our app! Because headers can be shared with other componen - Add your new component to `apps/store/src/app/app.tsx` -
- 🐳   Hint +
🐳   Hint ```typescript import { Header } from '@bg-hoard/store-ui-shared'; ``` ```html -
+
``` Wrap the App component in a fragment (`<>` and ``) -
+
⚠️  You might need to restart the TS compiler in your editor (`CTRL+SHIFT+P` in VSCode and search for `Restart Typescript`)
@@ -70,7 +69,7 @@ Let's add a header to our app! Because headers can be shared with other componen 6. Serve the project and test the changes
-7. Run the command to inspect the dependency graph - What do you see? (Remember to "Select all" in the top left corner) +7. Run the command to inspect the dependency graph - What do you see? (Remember to "Show all projects" in left sidebar)
🐳   Hint diff --git a/docs/lab7/LAB.md b/docs/lab7/LAB.md index 7279a10..e7dfeef 100644 --- a/docs/lab7/LAB.md +++ b/docs/lab7/LAB.md @@ -33,7 +33,7 @@ All the Express specific code for serving the games is provided in the solution. ⚠️  Make sure you instruct the generator to configure a proxy from the frontend `store` to the new `api` service (use `--help` to see the available options)
-4. Copy the code from the `fake api` to the new file `apps/api/src/app/`[games.repository.ts](../../examples/lab7/apps/api/src/app/games.repository.ts) +4. Copy the code from the `fake api` to a new file called `apps/api/src/app/`[games.repository.ts](../../examples/lab7/apps/api/src/app/games.repository.ts)
5. Update the Express [main.ts](../../examples/lab7/apps/api/src/main.ts) to use the repository data diff --git a/docs/lab7/SOLUTION.md b/docs/lab7/SOLUTION.md index 4800441..02a4b63 100644 --- a/docs/lab7/SOLUTION.md +++ b/docs/lab7/SOLUTION.md @@ -1,3 +1,3 @@ ##### Generate a new Express API app, and configure the proxy to the `store` project -`nx generate @nx/express:application api --directory=apps/store --frontendProject=store` +`nx generate @nx/express:application api --directory=apps/store/api --frontendProject=store` diff --git a/docs/lab9/LAB.md b/docs/lab9/LAB.md index ceddb85..0d22706 100644 --- a/docs/lab9/LAB.md +++ b/docs/lab9/LAB.md @@ -39,7 +39,7 @@ We'll look at creating libs to store Typescript interfaces and then we'll use th 🐳   Hint ```typescript - import { Game } from '@bg-hoard/api/util-interface'; + import { Game } from '@bg-hoard/api-util-interface'; const games: Game[] = [...]; ``` @@ -115,7 +115,7 @@ Let's fix that - we already have a `Game` interface in a lib. But it's nested in Frontend store shell app: `apps/store/src/app/app.tsx` ```typescript - import { Game } from '@bg-hoard/util-interface'; + import { Game } from '@bg-hoard/api-util-interface'; const [state, setState] = useState<{ data: Game[]; diff --git a/libs/nx-react-workshop/src/migrations/complete-lab-9/complete-lab-9.ts b/libs/nx-react-workshop/src/migrations/complete-lab-9/complete-lab-9.ts index 2206995..d4d7d81 100644 --- a/libs/nx-react-workshop/src/migrations/complete-lab-9/complete-lab-9.ts +++ b/libs/nx-react-workshop/src/migrations/complete-lab-9/complete-lab-9.ts @@ -32,7 +32,7 @@ export default async function update(host: Tree) { host.write( 'apps/api/src/app/games.repository.ts', - `import { Game } from '@bg-hoard/util-interface'; + `import { Game } from '@bg-hoard/api-util-interface'; const games: Game[] = [ { id: 'settlers-in-the-can', @@ -86,7 +86,7 @@ export const getGame = (id: string) => games.find((game) => game.id === id); import { Routes, Route, useNavigate } from 'react-router-dom'; import { StoreFeatureGameDetail } from '@bg-hoard/store-feature-game-detail'; - import { Game } from '@bg-hoard/util-interface'; + import { Game } from '@bg-hoard/api-util-interface'; export const App = () => { const navigate = useNavigate(); @@ -191,7 +191,7 @@ export const getGame = (id: string) => games.find((game) => game.id === id); import Typography from '@mui/material/Typography'; import CardMedia from '@mui/material/CardMedia'; import { formatRating } from '@bg-hoard/store-util-formatters'; - import { Game } from '@bg-hoard/util-interface'; + import { Game } from '@bg-hoard/api-util-interface'; /* eslint-disable-next-line */ export interface StoreFeatureGameDetailProps {}