Curso de React
Configuración proyecto monorepo

Un proyecto monorepo es un repositorio único que contiene múltiples proyectos o paquetes relacionados en lugar de dividirlos en repositorios separados (multirepo). Se utiliza para gestionar código compartido entre distintas partes de una aplicación, mejorar la colaboración y facilitar la administración de dependencias.

1. Creamos un NUEVO (será más fácil que modificar uno existente) proyecto monorepo:

npx create-turbo@latest .

• La carpeta apps contendrá una carpeta por cada una de las aplicaciones que se van a generar. Estas carpetas contienen el código específico de cada aplicación. Por ejemplo, si fueramos a desarrollar una aplicación para un profesor y una aplicación para un alumno, tendríamos dentro de apps la carpeta teacher y la carpeta student.
• La carpeta apps/docs se puede borrar ya que contiene documentación que no vamos a usar.
• La carpeta apps/web se puede borrar, ya que contiene un proyecto dependiente por defecto que no vamos a usar.
• La carpeta packages contiene el código compartido entre las aplicaciones.

2. Dentro de la carpeta apps creamos tantas subcarpetas como proyectos dependientes queremos tener. Por ejemplo, podemos crear las carpetas balls, y slackline.

3. Inicializamos estos proyectos dependientes (por ejemplo, en el caso de estar usando vite, ejecutaríamos npm create vite .).

4. Copiamos el contenido de la carpeta src del proyecto original dentro de la carpeta de proyecto que hemos creado dentro de la carpeta apps.

5. Vamos moviendo el contenido que es común a todos los proyectos dentro de la carpeta packages, que es la que contendrá el código común de todas las aplicaciones.

Gestión de dependencias

En el fichero package.json que está en la raíz de cada subproyecto, dentro del nodo dependencies, añadiremos las rutas a los ficheros package.json ubicados en la carpeta packages.

  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "@repo/ui": "*"
  },

Gracias a esto, podremos importar en cada subproyecto los módulos exportados desde /packages/index.js.

import {
  Ex,
} from "@repo/ui";

export { Ex } from "./components/Ex";

Dentro de la carpeta components, dentro del paquete packages, en el caso de usar styled components, tendremos una carpeta por cada styled component.

Instalación de dependencias

A la hora de instalar módulos, el comando npm siempre se ejecutará desde la raíz del monorepo. Este comando accederá a los ficheros package.json de las aplicaciones individuales y del código común y descargará automáticamente lo que corresponda en la carpeta correcta.

La aplicación de Teacher cargará el módulo almacenado en la carpeta packages e identificado con el nombre api.

└── application/
    └── apps/
        └── teacher/
            └── package.json ("dependencies": {"@chat/api": "*")

.
└── application/
    ├── apps
    └── packages/
        └── api/
            └── package.json ({"name": "@chat/api")