Skip to content

Latest commit

 

History

History
153 lines (100 loc) · 4.29 KB

LAB.md

File metadata and controls

153 lines (100 loc) · 4.29 KB
Raw

💻 Lab 9 - Generate a type lib that the API and frontend can share

⏰ Estimated time: 15 minutes

Now our project graph looks a bit disconnected. The frontend and the API still do not have anything in common. The power of Nx libraries is that they can be shared among any number of projects.

We'll look at creating libs to store Typescript interfaces and then we'll use the Nx Move generator to move that library around our project, with minimal effort.

📚 Learning outcomes:

  • Explore other real-world examples of creating shared libs for a specific project
  • Learn to use the move generator


📲 After this workshop, you should have:

App Screenshot No change in how the app looks!
File structure lab9 file structure

🏋️‍♀️ Steps:

  1. Stop serving both the API and the frontend

  2. Generate a new @nx/js lib called util-interface inside the libs/api folder.

    ⚠️ It's important that we create it in the /api folder for now

  3. Create your Game interface: see libs/api/util-interface/src/lib/api-util-interface.ts

  4. Import it in the API service: apps/api/src/app/app.service.ts

    ⚠️ You might need to restart the Typescript compiler in your editor

    🐳 Hint 
    import { Game } from '@bg-hoard/api/util-interface';
const games: Game[] = [...];

  5. Build the API and make sure there are no errors

    🐳 Hint 
    nx build api

  6. Inspect the project graph

  7. Make sure to commit everything before proceeding!

Our frontend store makes calls to the API via the HttpClient service:

this.http.get<any>(`/api/games/${id}`);

But it's currently typed to any - so our component has no idea about the shape of the objects it'll get back!

Let's fix that - we already have a Game interface in a lib. But it's nested in the api folder - we need to move it out to the root libs/ folder so any project can use it!

  1. Use the @nx/workspace:move generator to move the interface lib created above into the root /libs folder

    ⚠️ Make sure you use the --dry-run flag until you're confident your command is correct

    🐳 Hint 1 Nx generate cmd structure
    🐳 Hint 2

    Use the --help command to figure out how to target a specific project Alternatively, check out the docs

    🐳 Hint 3

    Your library name is api-util-interface - to move it to root, its new name needs to be util-interface


  2. We can now import it in the frontend components and use it when making the http request:

    🐳 Hint

    Frontend store shell app: apps/store/src/app/app.component.ts

    import { Game } from '@bg-hoard/util-interface';

this.http.get<Game[]>('/api/games');

    Routed game detail component: libs/store/feature-game-detail/src/lib/game-detail/game-detail.component.ts

    this.http.get<Game>(`/api/games/${id}`);

    ⚠️ Open apps/api/src/app/app.service.ts. Notice how we didn't have to update the imports in the API. The move generator took care of that for us!

  3. Trigger a build of both the store and the API projects and make sure it passes

  4. Inspect the project graph

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

🎓If you get stuck, check out the solution

➡️ Next lab ➡️