Share interfaces between API and frontend

Question

I am developing both sides. An API is in nest.js and frontend in Angular. Both sides uses typescript and I am facing problem of sharing interfaces, that should be same. For example ILoginRequest and ILoginResponse. I want to have both projects in separate GIT Repositories. Should I use GIT submodule with 3rd shared GIT repo or somehow create shared npm package or is there some good tool to generate classes automatically (from swagger definition) into frontend or anything else?

EDIT: to generate code for client from swagger, look at openapi-generator

Answer 1

NOTE: I have recently stumbled upon typeorm-entitysharer which "can be used to create client/server classes based on the same TypeORM entities, allowing you to share them." It gives you more control over what you want to share, you can take a look at their example. I didn't opt to use it because it's kind of overkill for me I guess. However, this is how I structured my last project:

---

I have my frontend and backend in one repository, but I guess you could have them separate, but you would still need to keep them next to each other somehow. The file structure would be something like this:

workspace
  ├─backend        <- repo #1
  │   ├─src
  │   │   ├─shared <- shared code goes here
  │   │   └─proxy.ts
  │   └─tsconfig.json
  └─frontend       <- repo #2
      ├─src
      │   └─proxy.ts
      └─tsconfig.json

Then in backend/tsconfig.json you introduce

{
    ...
    "paths": {
        "@shared/*": [ "src/shared/*" ],
    }
}

and in frontend/tsconfig.json you introduce

{
    ...
    "paths": {
        "@shared/*": [ "../backend/src/shared/*" ],

        // if you're using TypeORM, this package has dummy decorators
        "typeorm": [ "node_modules/typeorm/typeorm-model-shim.js" ]
        // you can do the same for other packages, point them to dummy paths

        // altirnatively you can route the shared imports through the proxy.ts
        // and replace them in frontend/src/proxy.ts with dummy ones
    }
}

also don't forget to npm i typeorm in your frontend.

Example

Let's say I have this in backend/src/shared/user.entity.ts

import { PrimaryGeneratedColumn, Column } from 'typeorm';

export class UserEntity
{
    @PrimaryGeneratedColumn() id: number;
    @Column() name: string;
    @Column() password: string;
}

Now, I can use it anywhere like this:

import { UserEntity } from '@shared/model/user.entity';

In backend, it's obvious, and in frontend, @shared/model/user.entity gets mapped to ../backend/src/shared/model/user.entity, and the import from 'typeorm' inside the entity gets mapped to dummy package.

Answer 2

After wasting a full day trying to get this working, I came across NX/NRWL.

It's basically just a CLI with tools to help structure your app properly. I was able to get it working properly in about an hour. Shared interfaces in a mono-repo is the way to go.