Skip to content

Latest commit

 

History

History
71 lines (42 loc) · 2.68 KB

LAB.md

File metadata and controls

71 lines (42 loc) · 2.68 KB
Raw

💻 Lab 8 - Displaying a full game in the routed game-detail component

⏰  Estimated time: 15-20 minutes

Now that we have a proper API, we can remove the fake-api created earlier and make proper HTTP requests. We'll also look at how the Nrwl Express generators created a helpful proxy configuration for us.

📚 Learning outcomes:

  • Learn how to connect frontend and backend apps in an Nx workspace

📲 After this workshop, you should have:

App screenshot screenshot of lab8 result

🏋️‍♀️ Steps:

  1. We can now delete the fake-api from the store app

  1. Use fetch in a useEffect hook in the app.tsx component and call your new API as an HTTP request. We also added a local state to track changes.

    ⚠️  Notice how we assume it will be available at /api (more on that below)


  1. Run nx serve api

    ⚠️  Notice the PORT number


  1. In a different tab, run nx serve store

    ⚠️  Again, notice the PORT number


  1. Everything should still look/function the same!

    🎓  You can inspect your Network tab in the dev tools and notice an XHR request made to http://localhost:4200/api/games


🎓   Even though the frontend and server are being exposed at different ports, we can call /api from the frontend store because Nx created a proxy configuration for us (see apps/store/proxy.conf.json) so any calls to /api are being routed to the correct address/port where the API is running. This helps you avoid CORS issues while developing locally.

Now let's load the full game in our routed component!

  1. Inside the libs/store/feature-game-detail/src/lib/game-detail folder, replace the following files:

    ⚠️  Notice how we're using the shared formatRating() function in our routed component as well!


  1. Your component should look similar to the provided screenshot! (you might need to restart your nx serve store so the new button styles can be copied over)

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

🎓  If you get stuck, check out the solution

➡️  Next lab ➡️