Maintain TypeScript Monorepos

Keeping all the industry-standard tools involved in a large TypeScript monorepo correctly configured and working well together is a difficult task. And the more tools you add, the more opportunity there is for tools to conflict with each other in some way.

In addition to generating default configuration files and automatically updating dependencies to versions that we know work together, Nx makes managing all the tools in your monorepo easier in two ways:

  • Rather than adding another tool that you have to configure, Nx configures itself to match the existing configuration of other tools.
  • Nx also enhances certain tools to be more usable in a monorepo context.

Auto-Configuration

Whenever possible, Nx will detect the existing configuration settings of other tools and update itself to match.

Project Detection with Workspaces

If your repository is using package manager workspaces, Nx will use those settings to find all the projects in your repository. So you don't need to define a project for your package manager and separately identify the project for Nx. The workspaces configuration on the left allows Nx to detect the project graph on the right.

/package.json
1{ 2 "workspaces": ["apps/*", "packages/*"] 3} 4
Project View
Loading...

Inferred Tasks with Tooling Plugins

Nx provides plugins for tools that run tasks, like Vite, TypeScript, Playwright or Jest. These plugins can automatically infer the Nx-specific task configuration based on the tooling configuration files that already exist.

In the example below, because the /apps/cart/vite.config.ts file exists, Nx knows that the cart project can run a build task using Vite. If you expand the build task on the right, you can also see that Nx configured the output directory for the cache to match the build.outDir provided in the Vite configuration file.

With inferred tasks, you can keep your tooling configuration file as the one source of truth for that tool's configuration, instead of adding an extra layer of configuration on top.

/apps/cart/vite.config.ts
1/// <reference types='vitest' /> 2import { defineConfig } from 'vite'; 3import react from '@vitejs/plugin-react'; 4 5export default defineConfig({ 6 root: __dirname, 7 cacheDir: '../../node_modules/.vite/apps/cart', 8 plugins: [react()], 9 build: { 10 outDir: './dist', 11 emptyOutDir: true, 12 reportCompressedSize: true, 13 commonjsOptions: { 14 transformMixedEsModules: true, 15 }, 16 }, 17}); 18

cart

React
Vite

Root: apps/cart

Type:application

Targets

  • build

    Vite

    vite build

    Cacheable

Enhance Tools for Monorepos

Nx does not just reduce its own configuration burden, it also improves the functionality of your existing tools so that they work better in a monorepo context.

Keep TypeScript Project References in Sync

TypeScript provides a feature called Project References that allows the TypeScript compiler to build and typecheck each project independently. When each project is typechecked, the TypeScript compiler will output an intermediate *.tsbuildinfo file that can be used by other projects instead of re-typechecking all dependencies. This feature can provide significant performance improvements, particularly in a large monorepo.

The main downside of this feature is that you have to manually define each project's references (dependencies) in the appropriate tsconfig.*.json file. This process is tedious to set up and very difficult to maintain as the repository changes over time. Nx can help by using a sync generator to automatically update the references defined in the tsconfig.json files based on the project graph it already knows about.

Project View
Loading...
apps/cart/tsconfig.json
1{ 2 "extends": "../../tsconfig.base.json", 3 "files": [], // intentionally empty 4 "references": [ 5 // UPDATED BY NX SYNC 6 // All project dependencies 7 { 8 "path": "../../packages/product-state" 9 }, 10 { 11 "path": "../../packages/ui/buttons" 12 }, 13 // This project's other tsconfig.*.json files 14 { 15 "path": "./tsconfig.lib.json" 16 }, 17 { 18 "path": "./tsconfig.spec.json" 19 } 20 ] 21} 22

Later, if someone adds another dependency to the cart app and then runs the build task, Nx will detect that the project references are out of sync and ask if the references should be updated.

~/myorgโฏ

nx build cart

1 NX The workspace is out of sync 2 3[@nx/js:typescript-sync]: Some TypeScript configuration files are missing project references to the projects they depend on or contain outdated project references. 4 5This will result in an error in CI. 6 7? Would you like to sync the identified changes to get your workspace up to date? โ€ฆ 8โฏ Yes, sync the changes and run the tasks 9 No, run the tasks without syncing the changes 10