Collaborating on a TypeScript library within a monorepo

Question

Collaborating on a TypeScript library within a monorepo

I'm currently in the process of setting up a monorepo that involves 3 services sharing some library code.

Here's how it stands at the moment:

repo: web
pdf/
  package.json
    referencing shared-ts via github url
  tsconfig.json
frontend/
  package.json
    referencing shared-ts via github url
  tsconfig.json

repo: mobile (react-native)
  package.json
    referencing shared-ts via github url
  tsconfig.json

repo: shared-ts
  package.json
  tsconfig.json

This setup is functional, but the process of committing to shared-ts, building, updating the hash in package.json, and committing again is cumbersome.

My goal is to achieve the following structure:

repo: monorepo
pdf/
  package.json
    reference to ../shared-ts
  tsconfig.json
frontend/
  package.json
    reference to ../shared-ts
  tsconfig.json
mobile/
  package.json
    reference to ../shared-ts
  tsconfig.json
shared-ts/
  package.json
  tsconfig.json

I have attempted various approaches so far, such as:

Using TypeScript project references, but struggling with dependencies in the shared-ts project
Adding
```
"shared-ts": "../shared-ts"
```
in package.json, which copies shared-ts into the node_modules of each package, requiring yarn to be re-run after every change
Attempting to use yarn link in postinstall, resulting in an error message about not finding the module 'shared-ts' or its type declarations
Creating a symlink directly in postinstall using
```
ln -s ../shared-ts/ node_modules/shared-ts/
```
, causing TypeScript to fail in finding the module
Exploring the option of using npm link in postinstall, despite it being slow and running into permissions issues during CI execution

Is there an efficient method to accomplish this? Any suggestions on alternative methods I could experiment with?

javascript typescript react-native npm monorepo

Answer 1

Answer №1

To handle your use-case efficiently, you can make use of the npm7 workspaces feature. Essentially, your new monorepo structure should be organized as follows:

repo: monorepo
package.json // <- Define workspaces here
pdf/
  package.json
    linking to shared-ts
  tsconfig.json
frontend/
  package.json
    linking to shared-ts
  tsconfig.json
mobile/
  package.json
    linking to shared-ts
  tsconfig.json
shared-ts/
  package.json
  tsconfig.json

In the root package.json, you need to specify the workspaces like in the example below:

{
  "name": "awesome-monorepo",
  "workspaces": [
    "pdf",
    "frontend",
    "mobile",
    "shared-ts"
  ]
}

Once this setup is done, you can easily reference and use the shared-ts module within any part of the monorepo by adding it to dependencies or devDependencies using its version number instead of a relative path.

All the node modules, including the workspaces, will be consolidated in the root node_modules directory, ensuring smooth module resolution without any issues.

Answer 2

To handle your use-case efficiently, you can make use of the npm7 workspaces feature. Essentially, your new monorepo structure should be organized as follows:

repo: monorepo
package.json // <- Define workspaces here
pdf/
  package.json
    linking to shared-ts
  tsconfig.json
frontend/
  package.json
    linking to shared-ts
  tsconfig.json
mobile/
  package.json
    linking to shared-ts
  tsconfig.json
shared-ts/
  package.json
  tsconfig.json

In the root package.json, you need to specify the workspaces like in the example below:

{
  "name": "awesome-monorepo",
  "workspaces": [
    "pdf",
    "frontend",
    "mobile",
    "shared-ts"
  ]
}

Once this setup is done, you can easily reference and use the shared-ts module within any part of the monorepo by adding it to dependencies or devDependencies using its version number instead of a relative path.

All the node modules, including the workspaces, will be consolidated in the root node_modules directory, ensuring smooth module resolution without any issues.

Answer 3

Answer №2

Solution 1:

Utilizing Lerna for Workspace Management

If you want to efficiently manage workspaces, consider using Lerna along with Yarn.

yarn workspace & lerna


├── README.md
├── lerna.json
├── package.json
├── packages
│   ├── pdf
│   │   ├── package.json   /*  "shared-ts": "^1.0.0" */
│   │   └──  src
│   ├── frontend
│   │   ├── package.json
│   │   └── src
│   ├── mobile
│   │   ├── package.json
│   │   └── src
│   ├── shared-ts
│   │   ├── package.json
│   │   └──  src
├── tsconfig.json
└── yarn.lock

For a demonstration, check out this sample repository.

To observe how modules are shared, see x-cli and x-core.

Solution 2:

Bypassing Lerna with mtsl Package

Alternatively, if you prefer not to use Lerna, you can opt for the mtsl package which allows creating symlinks. This package needs to be installed globally.

npm install -g mtsl

After installation, execute separate commands in the terminal as follows:

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/pdf/node_modules/shared-ts

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/frontend/node_modules/shared-ts

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/mobile/node_modules/shared-ts

Note: Maintain these watchers running. Once testing is completed, consolidate them into a single command using scripts in package.json.

Answer 4

Solution 1:

Utilizing Lerna for Workspace Management

If you want to efficiently manage workspaces, consider using Lerna along with Yarn.

yarn workspace & lerna


├── README.md
├── lerna.json
├── package.json
├── packages
│   ├── pdf
│   │   ├── package.json   /*  "shared-ts": "^1.0.0" */
│   │   └──  src
│   ├── frontend
│   │   ├── package.json
│   │   └── src
│   ├── mobile
│   │   ├── package.json
│   │   └── src
│   ├── shared-ts
│   │   ├── package.json
│   │   └──  src
├── tsconfig.json
└── yarn.lock

For a demonstration, check out this sample repository.

To observe how modules are shared, see x-cli and x-core.

Solution 2:

Bypassing Lerna with mtsl Package

Alternatively, if you prefer not to use Lerna, you can opt for the mtsl package which allows creating symlinks. This package needs to be installed globally.

npm install -g mtsl

After installation, execute separate commands in the terminal as follows:

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/pdf/node_modules/shared-ts

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/frontend/node_modules/shared-ts

mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/mobile/node_modules/shared-ts

Note: Maintain these watchers running. Once testing is completed, consolidate them into a single command using scripts in package.json.

Answer 5

Answer №3

In a recent project, I successfully implemented the strategies you're interested in. By utilizing monorepo with tools like lerna and yarn workspace, we were able to achieve our desired outcomes effectively. For more in-depth information, please refer to this informative article

Through this approach, we established a centralized package system for managing types. Subsequently, other packages could easily import these types by referencing them as shown below:

import { Post } from "@types";

This method proved to be significantly more convenient than manually linking individual packages together.

Answer 6

In a recent project, I successfully implemented the strategies you're interested in. By utilizing monorepo with tools like lerna and yarn workspace, we were able to achieve our desired outcomes effectively. For more in-depth information, please refer to this informative article

Through this approach, we established a centralized package system for managing types. Subsequently, other packages could easily import these types by referencing them as shown below:

import { Post } from "@types";

This method proved to be significantly more convenient than manually linking individual packages together.

Answer 7

Answer №4

If you're looking for a way to streamline your repositories, consider using NX. With NX, you can organize your projects so that your web and mobile repositories serve as your apps, while the shared-ts repository acts as a library that is shared between them.

You can choose to have a common package.json file for all your repositories or have separate ones for each. NX comes with features like dependencyGraph and affected, which help determine the modules/apps that need to be built when making changes without having to build everything from scratch.

Your code structure within NX will typically follow this format:

apps:
  web:
    src
    package.json

  mobile:
    src
    package.json

libs:
   shared-ts:
     src
     package.json

workspace.json

For more detailed information on setting up and configuring NX, it's recommended to refer to the official documentation. It should offer everything you need for an efficient workflow.

Answer 8

If you're looking for a way to streamline your repositories, consider using NX. With NX, you can organize your projects so that your web and mobile repositories serve as your apps, while the shared-ts repository acts as a library that is shared between them.

You can choose to have a common package.json file for all your repositories or have separate ones for each. NX comes with features like dependencyGraph and affected, which help determine the modules/apps that need to be built when making changes without having to build everything from scratch.

Your code structure within NX will typically follow this format:

apps:
  web:
    src
    package.json

  mobile:
    src
    package.json

libs:
   shared-ts:
     src
     package.json

workspace.json

For more detailed information on setting up and configuring NX, it's recommended to refer to the official documentation. It should offer everything you need for an efficient workflow.

Answer 9

Answer №5

implementing yarn workspace & lerna

see a demo at this monorepo template

Answer 10

implementing yarn workspace & lerna

see a demo at this monorepo template

Collaborating on a TypeScript library within a monorepo

Answer №1

Answer №2

Solution 1:

Utilizing Lerna for Workspace Management

Solution 2:

Bypassing Lerna with mtsl Package

Answer №3

Answer №4

Answer №5

Similar questions

Encountering issues with setting up Swiper in Angular2 using npm

An error has occurred: String cannot have property 'innerText' created

Transferring information using "this.$router.push" in Vue.js

Unable to complete the task of executing com.github.eirslett:frontend-maven-plugin:1.6:install-node-and-npm (install node and npm)

Incorporating unique numbers in the map reduce process

Incorporate Javascript to dynamically deactivate a field within an HTML form based on the selected option from a dropdown menu

The browser has blocked access to XMLHttpRequest from a specific origin due to the absence of the 'Access-Control-Allow-Origin' header in the requested resource

Elessar - addressing touch event issues

Is there a way to prevent the letters from moving when I hover over them?

Unable to resolve the RouterLink tag

Manage numerous receiving bank accounts, allowing customers to transfer money to each specific account

When the server restarts, activate the Meteor npm run script

Spring application: Unable to find a handler for portlet request with mode 'view' and phase 'Resource_PHASE'

Combine Wordnet thesaurus with browserify technology

Creating a useRef hook tailored to individual HTML elements is a valuable skill to have

When utilizing a Javascript event listener within ReactJS with NextJS, the dynamically imported module without server-side rendering fails to load

NodeJS Code Snippets for Natural Language Processing

Fleeting hover effect

browserify Issue : The function http.createServer is not recognized

Configuring the release settings for a single page application using webpack