LAB.md

💻 Lab 6 - Generate a route lib

⏰  Estimated time: 15-25 minutes

We'll look at more advanced usages of the @nx/react generators and generate a new route lib for our store application. We'll see how Nx takes care of most of the work, and we just have to do the wiring up!

📚 Learning outcomes:

• Get familiar with more advanced usages of Nx generators to create a React route lib

📲 After this workshop, you should have:

App Screenshot

🏋️‍♀️ Steps:

1. Stop nx serve
   

2. Use the @nx/react:lib generator to generate a new routing library called feature-game-detail that:

   • lives under libs/store
   • its parent routing app is store

   ⚠️  Use --help with the above generator to figure out which options you need to use to enable all the above (See the solution if still unsure)
   

3. Change the routing path in apps/store/src/app/app.tsx to pick up the game ID from the URL

   🐳   Hint

   // replace routes block with
   <Routes>
     <Route path="/game/:id" element={<StoreFeatureGameDetail />} />;
   </Routes>

   
   

4. Populate your new component with the provided files: store-feature-game-detail.tsx / scss
   

5. Make clicking on each card in the apps/store/src/app/app.tsx route to the game/:id with the game's ID:

   🐳   Hint

     // add a Link around the card element
     <Link to={`/game/${x.id}`} key={x.id}>
      <Card ...>
     </Link>
   

   
   

6. Serve your app again, click on some games, and compare with this screenshot:

   
   

7. Launch the dependency graph and see what's been added
   

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

---

The result is still pretty simple though. Our route just displays the ID of the selected game in a card. It would be great if we had some API to get the full game from that ID!

---

🎓  If you get stuck, check out the solution

---

➡️  Next lab ➡️