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

🏋️‍♀️ Steps:

1. Stop the nx serve
   

2. Use the @nx/js 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 ➡️