Typescript project setup with shared package

Question

I have a few premises before starting:

I want a shared package which will be included in three other packages,
typescript,
just one node modules,
multiplatform usage (Windows / Linux),
use dependencies from the shared package,
(live reload will be nice),
not to lose the ability to later publish shared package (the other three packages are web servers, but now is under heavy development),
common scripts build:web build:api build:admin from global package.

My dreamed folder structure is:

/
/node_modules/***

/packages/shared/package.json // Shared dependencies like typeorm, lodash etc..
/packages/shared/src/index.ts
/packages/shared/src/models/User.ts

/packages/web/package.json
/packages/web/tsconfig.json
/packages/web/src/index.ts // first express server (using shared code)

/packages/api/package.json
/packages/api/tsconfig.json
/packages/api/src/index.ts
...

/package.json
/tsconfig.common.json

There are a lot of solutions across the internet - Lerna, typescript project reference, npm / yarn link... but I am not able to find a suitable solution...

For example, this https://github.com/Quramy/lerna-yarn-workspaces-example is cool, but I was not able to setup to run something like this:

// package.json

{
  "scripts": {
     "debug:web": "concurrently \"(cd packages/shared && tsc -w)\" \"(cd packages/web && tsc -w)\" \"(cd packages/web && nodemon --inspect dist/index.js --watch .. /)\""

...

I want to continuously build the shared package (generate dist/index.js and .ts files) and in nodemon restart server after something changed in ../ (packages folder).

After a few hours I gave up to chance to have code reloading and try that via "easiest-way" I could find - no package in shared but include code directly via:

// shared/index.ts
export const createConnection = () => ....

// web/index.ts
import { createConnection } from 'shared'

it looks like it does not work either:

// tsconfig.json

{
  "extends": "../../tsconfig.settings.json",
  "compilerOptions": {
    "rootDir": "../",
    "outDir": "dist",
    "baseUrl": "./",
    "paths": {
      "shared":  [ "../shared/src/" ]
    }
  }
}

the problem is now:

File /shared/src/index.ts is not listed within the file list of the project in tsconfig.json. Projects must list all files or use an 'include' pattern.

Next step is (obviously):

{
  "extends": "../../tsconfig.settings.json",
  "include": [
    "./src/**/*.ts",
    "../shared/src/**/*.ts"
  ],
  "compilerOptions": {
    "rootDir": "../",
    "outDir": "dist",
    "baseUrl": "./",
    "paths": {
      "shared":  [ "../shared/src/" ]
    }
  }
}

This works! No errors, but no files in "dist" also... LOL

I am pretty sure, there is some nice solution, example or it won't work either, but I was not able to find it or build it.

csakbalint · Accepted Answer · 2019-09-15 09:27:18Z

3

Correct me if I'm wrong, but you need an example where the project is separated to packages in a monorepository, written in Typescript and some of the packages depend on each-other. If that's the case, I created project like this. I used one of Typescript new features: project references. You can specify other tsconfigs in your config file and you can define a dependency for them. For example: package B depends on package A. Typescript is going to compile B and use its declarations before start compile A.

Here is a small example for the tsconfig


{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "lib"
  },
  "include": ["src"],
  "exclude": ["lib"],
  "references": [{ "path": "../util" }, { "path": "../crud-request" }]
}

You can get more informations here: https://www.typescriptlang.org/docs/handbook/projectreferences.html

I used this project as an example to build my own, maybe it'll be useful for you too: https://github.com/nestjsx/crud

answered Sep 15, 2019 at 9:27

csakbalint

8168 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rnarcos Over a year ago

This was exactly what I was looking for!! Thank you!

Collectives™ on Stack Overflow

Typescript project setup with shared package

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related