Docs
Getting started
CLI
Plugins
Community
Nx Cloud
Nx Consulting
Tutorial total points: 0 / 92

Step 7: Share Code

Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the Todo interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library.

Run the following generator to create a library:

nx g @nrwl/workspace:lib data

The result should look like this:

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   └── data/
│       ├── src/
│       │   ├── lib/
│       │   │   └── data.ts
│       │   └── index.ts
│       ├── jest.conf.js
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── workspace.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json

Copy the interface into libs/data/src/lib/data.ts.

export interface Todo {
  title: string;
}

A note about VS Code :

If you're using VS Code it may be necessary at this point to restart the TS server so that the new @myorg/data package is recognised. This may need to be done every time a new workspace library is added.

Refactor the API

Now update apps/api/src/app/app.service.ts to import the interface:

import { Injectable } from '@nestjs/common';
import { Todo } from '@myorg/data';

@Injectable()
export class AppService {
  todos: Todo[] = [{ title: 'Todo 1' }, { title: 'Todo 2' }];

  getData(): Todo[] {
    return this.todos;
  }

  addTodo() {
    this.todos.push({
      title: `New todo ${Math.floor(Math.random() * 1000)}`,
    });
  }
}

Update the Angular Application

Next import the interface in apps/todos/src/app/app.component.ts:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Todo } from '@myorg/data';

@Component({
  selector: 'myorg-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  todos: Todo[] = [];

  constructor(private http: HttpClient) {
    this.fetch();
  }

  fetch() {
    this.http.get<Todo[]>('/api/todos').subscribe((t) => (this.todos = t));
  }

  addTodo() {
    this.http.post('/api/addTodo', {}).subscribe(() => {
      this.fetch();
    });
  }
}

Every time you add a new library, you have to restart nx serve. So restart both nx serve api and nx serve todos and you should see the application running.

Quiz

Nx allows you to share code...

  • Between different node apps

  • Between different frontend apps

  • Between frontend and backend apps