Everyone is talking about Monorepos nowadays, and it’s no surprise, given the complexities of today’s applications.

With the rise of Monorepos, the demand for robust tooling to handle collaborative coding, streamlined dependency management, and efficient code reuse has grown. It demanded more from your typical development environment.

What are Workspaces?

Workspaces are simply an extension of your development environment with robust tooling integration. For example, if we take a Monorepo, you may need a workspace that understands different components in the repository. In addition to that, it may provide tooling for dependency management, code sharing, and improved collaboration.

Workspaces can take different shapes depending on the technology it needs to support. Therefore, let’s look at 3 different tools that offer workspaces with unique capabilities for developers.

1. Bit — Next Generation Build System for Composable Software

Bit is a build system for composable software. Bit is similar to Monorepos but opposes the idea of centralizing all code in a single repository. Instead, Bit is bringing simplicity to the distribution of source code into independently versioned components, depending on each other.

Therefore, you may need unique tooling in your development environment to work with multiple components and handle their development lifecycle.

What is Bit Workspace?

At the center of these tools, Bit Workspace provides the local work environment to develop Bit components. Bit requires you to create a workspace to work with Bit components. You typically start by creating an empty workspace or using a predefined one with a default set of components.

Features of a Bit Workspace

• You can run the components development server within the workspace and preview your components.
• Run the application development server to test the application.
• Execute tests and builds and export them to a remote scope in bit.cloud.
• All the workspace configurations are defined in a file named workspace.jsonc.

Let’s look at how to set up a workspace in Bit.

Setting up your first Bit Workspace

1) Installation

To get started, first of all, we need to install Bit on your machine,

npx @teambit/bvm install

For a more advanced installation guide, refer to this.

2) Setup the Workspace

Run the following command to build a workspace with a sample ReactJS project.

bit new hello-world my-hello-world --env teambit.community/starters/hello-world

Alternatively, you can choose another workplace starter template from here to continue.

3) Run the application

First, change the directory to newly created workspace,

cd my-hello-world

Then run the following command to run the application,

bit run hello-world-app

Now, you have a working Bit Workplace where you can explore creating composable software.

2. NPM Workspaces — Managing Multiple Packages within a Root Package

What is an NPM Workspace?

NPM Workspace enables ways to manage multiple packages from your local file system within a single root package.

Features of an NPM Workspace

• NPM Workspaces opens paths for Monorepo designs.
• NPM Workspaces can automatically handle dependencies within your Monorepo system, ensuring there are no more duplicate dependencies or version conflicts.
• With NPM Workspaces, you can deploy, update, and version individual packages independently without impacting the entire codebase. This can empower faster development cycles.
• Workspace configuration is defined in the package.json file at the root.

You can readily use the NPM Workspace feature as it comes with the NPM CLI.

Setting up your first NPM Workspace

You can define a Workspace in package.json file using the workspaces property,

{
  "name": "my-workspaces-powered-project",
  "workspaces": ["workspace-a"]
}

The above configuration tells NPM to consider the folder workspace-a when running npm install and symlink the workspace-a folder to the node_modules of the current working directory.

Let’s take a look at the folder structure of the project before and after the npm install.

Before

.
+-- package.json
`-- workspace-a
   `-- package.json

After

.
+-- node_modules
|  `-- workspace-a -> ../workspace-a
+-- package-lock.json
+-- package.json
`-- workspace-a
   `-- package.json

Just like creating workspace-a, you have the flexibility to create multiple projects using NPM Workspaces. You can store shared packages in the root directory and specific packages in separate projects as needed.

To better understand how NPM Workspaces work, refer to the official documentation.

3. NX Workspaces — Helps you Maintain and Scale Monorepos

NX lets you create and manage NX Workspaces that let you manage independent codebases, applications, libraries, and even UI components in a single space.

Inside NX Workspaces, the core Workspace functionality is offered via @nx/workspace plugin.

Features of NX Workspace

• It organizes projects within a monorepo in a structured manner. It provides dedicated directories for applications, libraries, and shared code, thus promoting code reuse, modularity, and maintainability.
• With a monorepo-style NX workspace, you can easily add new projects, refactor existing ones, and manage the entire codebase as a cohesive unit.

Setting up your first NX Workspace

To initialize the NX Workspace and set up a React Monorepo, navigate to the desired project directory and execute the following,

npx create-nx-workspace@latest react-monorepo --preset=react-monorepo

Follow the prompts to choose a workspace name, preferred preset (e.g., Angular, React, Node, or empty), and further configuration options.

To server the app, run,

nx serve react-monorepo

For a more in-depth explanation, refer to this official NX React monorepo guide.