Bit in NX Monorepo

See a live example of a repository with nx and Bit.

To use Bit in an existing nx, open a terminal at the root of the workspace and run:

bit init
CopiedCopy

You will be prompted to answer a few questions:

  1. Which environment you will like to use? pick the most relevant default stack (you can add more later).
  2. Would you like to use your own package manager? Yes.
  3. Would you like to use MCP server for AI-powered development? Yes.
  4. Which IDE to set up? Select from list (you can add more later).

The output should be the following:

🔧 Setting up MCP server for vscode...
✅ MCP server configured for vscode
successfully initialized a bit workspace.

â„šī¸  Additional Information:
📁 Components will be created in: bit-components/{scope}/{name}
📖 For CI/CD setup, visit: https://bit.dev/docs/getting-started/collaborate/exporting-components#custom-ci/cd-setup
đŸŽ¯ Environment: bitdev.react/react-env
🤖 MCP server configured for: vscode
đŸ“Ļ External package manager mode enabled
💡 Run pnpm install (or yarn install/npm install) to install dependencies
CopiedCopy

You have successfully added Bit support to your nx workspace!
See the two generated file; workspace.jsonc, which includes all Bit related configuration, and .bitmap which tracks the Bit components in the workspace. Make sure to add and commit these files to your repository.

Bit components in nx monorepo

Now that you have Bit in your nx monorepo, you can run any Bit commands to manage components:

bit templates // see all available templates you can use
bit create    // create a new component
bit list      // list all components in the workspace
CopiedCopy

Using Bit components by nx packages

All components are linked to the local node_modules. To use a Bit component in a nx package, use the module link:

import { anotherBitComponent } from '@my-org/my-scope/another-bit-component';
CopiedCopy

To ensure the compiled outputs of components is up-to-date in node_modules, you need to run one of the following processes:

bit watch // runs component-compilation in a watch mode, ensure compiled node-modules for components are up-to-date
bit start // runs bit-devserver which also ensures compiled node-modules for components are up-to-date
CopiedCopy

Using nx packages by Bit components

To import a local nx package by a Bit component you need to ensure the nx package is also published to a registry, so when other consumers install the Bit component, they will get the nx package as a dependency.

Creating additional Bit apps in nx monorepo

To create a new app, simply choose the *-app template when creating a new component:

bit create react-app apps/my-react-app
CopiedCopy

Now you can use the following application-workflow commands:

bit app list    // lists all available Bit apps in the repotisory
bit run <name> // runs a Bit app in a seperate dev-server, alongside your app
CopiedCopy

Integrating with your existing nx monorepo CI

See the docs here about adding the relevant CI script package.