Monitor and compile numerous directories simultaneously in TypeScript (monorepo)

I've been searching far and wide online for a solution to my problem, but unfortunately, I haven't come across anything useful yet. Essentially, I am in need of a tool or method that will allow me to kick off TypeScript file Watching/Compiling in multiple directories simultaneously.

Within my monorepo, I have various scoped NPM packages such as @test/one, @test/two, @test/three, and so on. My objective is to be able to watch and compile all these packages at once.

It seems that TypeScript does not directly support this functionality, and there doesn't appear to be any existing tools that can accomplish this task either. The closest solution I found was nodemon, which can watch multiple directories at the same time, but it lacks the ability to execute 'tsc' in every watched directory upon changes.

The most effective workaround I could come up with using nodemon looked like this, although it's not an ideal approach as it compiles all packages even if only one has changed:

npx nodemon --watch test-shared-api --watch test-shared-redux --watch test-shared-types -e js,ts,jsx,tsx --exec "npx tsc --build test-shared-api/tsconfig.json && npx tsc --build test-shared-types/tsconfig.json && npx tsc -build test-shared-redux/tsconfig.json"

Alternatively, utilizing concurrently in the package.json allows me to implement the following setup, which is a step closer to efficiency, but still leaves room for improvement:

"scripts": {
"ts-watch-shared-types": "tsc -p packages/@test-shared/test-shared-types/tsconfig.json -w",
"ts-watch-shared-api": "tsc -p packages/@test-shared/test-shared-api/tsconfig.json -w",
"ts-watch-shared-redux": "tsc -p packages/@test-shared/test-shared-redux/tsconfig.json -w",
"ts-shared-watch": "concurrently -k -n w: npm:ts-watch-shared-*"
  },

Any suggestions or better solutions are greatly appreciated!

Answer №2

To kick off a build pipeline, using a monorepo architecture is a typical strategy.
Facing the same situation, I found success in making it work this way (using turborepo as an example):

  • Set up a global package.json script
    "start:dev-watch": "turbo run start:dev-watch"
  • In the main package.json file, include the script:
    "start:dev-watch": "nodemon src/index.ts"
    (I opt for nodemon with ts-node installed to directly run ts files, ideal for debugging)
  • In each project's package.json that needs to be built, add the script:
    "build:watch": "tsc -w"

By doing this, when launching the npm run start:dev-watch command in the parent directory, all start:dev-watch scripts will initiate simultaneously.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Validator returns undefined when expressing invalid data

Having an issue with validation, here is the code snippet: routes.js var express = require('express'); var router = express.Router(); var hello_controller = require('../api/controllers/helloController'); var { validationRules, validat ...

ESLint: The "react" plugin encountered a conflict

In my development environment, I have a React application within a single npm component package. This React app acts as a demonstration site that consumes the component package in addition to Storybook. local-component-package ├── .storybook ├─ ...

Having Trouble Retrieving Data from Observable in Angular 2 and Typescript

I've encountered a promise error when trying to access a variable that receives data from an observable. Here's an example: Within my component, I have defined the Stat class: export class Stats { name: string; percentage: number; constru ...

Create an object that may have any number of keys, but must have at least one key defined

Is there a way to accomplish this task? type Plant = "rose" | 'tulip' | 'daisy' type PlantCollection = { [p in Plant]?: number } const validPlantCollection: PlantCollection = { rose: 1, daisy: 2 } const emptyCollectionShouldBeRejec ...

Setting up a project with Angular 2 and NodeJS

Hello there, I have some inquiries about organizing the project structure of a MEAN application with Angular2. Initially, I followed the introductory guide on angular.io to create a basic Angular2 app. Now, I am attempting to incorporate this app into a N ...

Encountering difficulties with installing node-oracledb using npm

Trying to establish a connection between Oracle database and Node.js has been challenging. I attempted to install the node-oracledb module using the command: $ npm install oracle/node-oracledb#v3.1.2 This installation process resulted in the following er ...

What is the best way to transform a synchronous function call into an observable?

Is there a conventional method or developer in RxJS 6 library that can transform a function call into an observable, as shown below? const liftFun = fun => { try { return of(fun()) } catch (err) { return throwError(err) } ...

Ways to solve VScode gutter indicator glitches after switching text editors?

When my active function is running, I have a specific updateTrigger that ensures certain actions are taken when the activeTextEditor in vscode changes: const updateTrigger = () => { if (vscode.window.activeTextEditor) { updateDecorations(con ...

Adding and removing/hiding tab-panels in Angular 4 with PrimeNg: A step-by-step guide

I'm currently working on a tabView project with a list of tab-panels. However, I am struggling to find a way to dynamically hide and unhide one of the tab panels based on specific runtime conditions. Does anyone have any suggestions or insights on how ...

Using an Object as a parameter in a Typescript function

I am currently working on an Angular component that includes a function. Within this function, I need to pass an Object as a parameter and invoke the function with these parameters. It has been some time since I last worked with Angular, where "any" was ty ...

The npm outdated command seems to ignore the caret notation specified in the package.json file

When looking at a package.json file that contains the following: "devDependencies": { "grunt": "^0.4.5", "grunt-concurrent": "^1.0.0", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-watch": "^0.6.1", "grunt-dev-update": "^1.1.0", ...

The transition() function in Angular 2.1.0 is malfunctioning

I am struggling to implement animations in my Angular 2 application. I attempted to use an example I found online and did some research, but unfortunately, I have not been successful. Can anyone please assist me? import {Component, trigger, state, anima ...

Tips for enabling TypeScript's static typings to function during runtime

function multiply(num: number): number { console.log(num * 10) // NaN return num * 10 } multiply("not-a-number") // result == NaN When attempting to call the function above with a hardcoded invalid argument type, TypeScript correctly identifies and w ...

Installing NPM on a finished project

Is it necessary to execute the npm install/npm build commands on a finished project obtained from GitHub that already contains all the dependencies in the node_modules folder when you download it? ...

Executing the plugin-typescript library within an Angular 2 project hosted on localhost

I am encountering an issue every time I run my angular2 project where numerous files are being loaded, including the 'ts' library from unpkg.com/plugin-typescript/lib/plugin.js. I am looking to eliminate the need for this file to load from anothe ...

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: The issue arises when setting the div's width as a percentage of the ...

The useForm function from react-hook-form is triggered each time a page is routed in Nextjs

Hey there, I'm just starting out with Next.js (v14) and I'm trying to create a multi-page form using react-hook-form. But I'm encountering an issue where the useForm function is being executed every time, and the defaultValues are being set ...

What is the best way to link together Angular observables?

In order for my component to make API requests, it needs to check if certain app preferences are set. Currently, I have implemented a method where the component's data is refreshed every 2 minutes using a timer: ngOnInit(): void { this.subscriptio ...

Tips for utilizing the intro.js npm package with Meteor version 1.4.1.1

I'm currently integrating intro.js into my meteor application. import { Template } from 'meteor/templating'; import { ReactiveVar } from 'meteor/reactive-var'; // import introJs from 'intro.js'; var introJs = require(&a ...

Develop a TypeScript utility function for Prisma

Having trouble inferring the correct type for my utility function: function customUtilityFunction< P, R, A extends unknown[] >( prismaArgs /* Make "where" field optional as it is already defined inside findUnique method below */, fn: ( pris ...