LAB.md

💻 Lab 5 - Generate a utility lib

⏰  Estimated time: 5-10 minutes

Let's fix the ratings! They don't look that good and they could benefit from some formatting.

We will create a shared utility lib where we'll add our formatters and see how to import them in our components afterwards.

📚 Learning outcomes:

• Get familiar with generating project specific, framework agnostic utility libs

📲 After this workshop, you should have:

App Screenshot

File structure

🏋️‍♀️ Steps:

1. Stop the nx serve

2. Use the @nrwl/workspace package to generate another lib in the libs/store folder - let's call it util-formatters.

3. Add the code for the utility function to the new library you just created libs/store/util-formatters/src/lib/store-util-formatters.ts

4. Use it in your frontend project to format the rating for each game

   🐳   Hint

   app.tsx:

   import { formatRating } from '@bg-hoard/store/util-formatters';

   <strong>Rating:</strong> {formatRating(x.rating)}

   
   

5. Serve the store app - notice how the ratings are formatted.

6. Launch the dependency graph - notice how the app depends on two libs now.

7. Inspect what changed from the last time you committed, then commit your changes

---

🎓  If you get stuck, check out the solution

---

➡️  Next lab ➡️