Introduction to Monorepos

Monorepos, short for “monolithic repositories,” are a source code management structure where multiple applications or projects reside within a single repository. Instead of splitting code into smaller repositories, each application is managed as a separate part within a large shared repository. In simpler terms, rather than configuring commitlint, prettier, and stylelint separately for each backend (BE) and frontend (FE) project, monorepos allow us to configure these tools at the root level and share them across projects. We can start, test, build, and run projects outside the root for individual subprojects or concurrently, avoiding the need to work independently within each project.

Consider this scenario: You’re part of a team responsible for a project with three application components: Frontend (multiple web apps), Backend, and UX/UI. When the UX/UI team modifies a shared component—for example, changing a button design—here’s how monorepos compare to multi-repos:

1. Multi-repo Approach:
   • Each frontend team must access the specific application repository and update the shared component. This process affects code maintenance and synchronization.
2. Monorepo Approach:
   • Only one frontend developer needs to access the shared library folder and make the necessary changes once.

Similarly, if the entire system needs to switch time zones from UTC+7 to UTC+9 by installing a package like date-fns-tz and adjusting the date display logic (e.g., from yyyy-MM-dd to yyyy年MM月dd日):

• Multi-repo Approach:
  • Each team must update their respective repositories and manage dependencies individually.
• Monorepo Approach:
  • A single package installation command ensures that all teams can use the updated functionality without additional effort.

Additionally, monorepos allow TypeScript configuration (e.g., interfaces or types) to be set once and shared across the entire project, promoting consistency between frontend and backend code.

Real-World Example: Applying Monorepos with Nx

Directory Structure

Consider the following directory structure for an Nx monorepo:

my-monorepo/
  apps/
    admin-portal/      # Web application for product management
      src/
      public/
      package.json
    e-commerce/        # E-commerce web application
      src/
      public/
      package.json
    api-backend/       # Backend API server (Node.js)
      src/
      package.json
  libs/
    common/            # Shared utilities, and shared logic
      src/
      package.json
  nx.json
  workspace.json

Admin Portal Application

• Description: A web application for product management, employee administration, and other administrative features.
• Technologies: ReactJS, Redux, Material-UI.
• Libraries used: common, ui-components.
• Create the application:

  nx generate @nrwl/react:app admin-portal
  

E-Commerce Application

• Description: An e-commerce web application allowing users to view products, add items to the cart, and complete transactions.
• Technologies: ReactJS, Redux, Tailwind CSS.
• Libraries used: common, ui-components.
• Create the application:

  nx generate @nrwl/react:app e-commerce
  

Backend - API Server (Node.js)

• Description: The backend provides APIs for the frontend, handles business logic, and interacts with the database.
• Technologies: Node.js, Express.js.
• Libraries used: common.
• Create the application:

  nx generate @nrwl/node:app api-backend
  

Common Library

• Description: Contains shared components, functions, and logic for both frontend and backend.
• Technologies: JavaScript/TypeScript.
• Create the library:

  nx generate @nrwl/react:library common
  

Optimization and Development

• Manage frontend and backend within the same monorepo for easy code sharing and maintenance.
• Use Nx commands to install packages, build, run, and test each application independently.
• Share logic, configuration, TypeScript definitions, and components between frontend and backend through the common library.
• Leverage Nx features for syntax checking, error detection, and ensuring code quality¹.

By adopting monorepos with Nx, development becomes more streamlined, collaborative, and efficient. 🚀👍