¿Qué es un mono repositorio?

El concepto de mono repo podríamos entenderlo como una estructura general (de proyecto de Angular) que contiene que contiene todo el código, funcionalidades y dependencias necesarios para el funcionamiento de distintos proyectos agrupadas en uno solo proyecto (o workspace).

¿Porque trabajar con mono repositorios en Angular?

Si miramos lo que ocupa un proyecto normal como el que hemos creado en el artículo Instalando Angular, creando un proyecto y arrancándolo en local podemos observar que su tamaño es desproporcionado.

Normalmente, a nivel corporativo, nos podemos encontrar con los tres tipos: MonoRepo, MultiRepo o Monolitotrabajar.

Se pueden crear muchos repositorios que se comunican entre si. Por ejemplo Google trabaja de esta manera en muchas ocasiones.

Pero dejando a Google de lado, si en nuesrto caso tenemos ejercicios pequeños ¿Tiene sentido crear constantemente una estructura de 400 MB para realizar mini ejercicios en Angular? La respuesta es no.

Por ello, existe la posibilidad de crear un solo workspace (area de trabajo) sobre el que montemos nuestros proyectos. Esta manera de organizar nuestros proyectos es ideal cuando se trata de proyectos pequeños.

Creando un monoRepositorio

Para ello, primeramente, vamos a crear un mono repositorio en Angular (el WorkSpace) que albergará a todos nuestros proyectos de Angular:

Para saber que significan los parámetros que le hemos añadido a la creación de nuestro proyecto, podemos realizar un ng new –help:

Podemos usar algunos parámetros como:

  • --createApplication controla la creación del proyecto predeterminado, se establece en true de forma predeterminada. Para omitir la creación de un proyecto predeterminado, lo configuramos como falso. De lo contrario, Angular CLI crea una aplicación en la src carpeta del nuevo espacio de trabajo. Es más limpio generar todas las aplicaciones en la subcarpeta projects del espacio de trabajo.
  • --directory=frontend es el nombre del directorio en el que se creará el espacio de trabajo. Si no lo especificamos valor predeterminado para el nombre del directorio que contendrá nuestra área de trabajo del mono repo, es el nombre del espacio de trabajo.

Si por ejemplo le hubiéramos especificado el parámetro, el proyecto no se llamaría como se llama nuestro nombre del espacio de trabajo sino se llamaría frontend.

Situándonos en nuestro workspace (my-monorepo-workspace)

Una vez creado, nos situamos en el directorio del mono repo que acabamos de crear:

Y le indicamos a VSC, que nos abra el proyecto:

De hecho, si nos metemos en el archivo angular.json, vemos que no tenemos proyectos añadidos.

Es más, si miramos el proyecto, vemos que tampoco tenemos el directorio SRC. Esto es debido a que hemos creado solamente la estructura general para todos los proyectos.

Creando App1 y App2 en nuestro workspace my-monorepo-workspace

Ahora nos falta crear los proyectos en sí que añadiremos a dicho mono repo. Vamos a ello:

Creando App1:

Creando App2:

Si miramos la estructura de nuestro proyecto, podemos ver que se ha añadido una carpeta projects que contiene las dos aplicaciones de Angular.

Además de ello, podemos ver que el archivo angular.json ha añadido los dos proyectos y también que ha establecido app1 como defaultProject.

Por lo que nuestro esquema se quedaría de la siguiente manera:

Modificando el HTML de ambos proyectos (app1 y app2)

Vamos a modificar la estructura de ambos documentos a un H1 con el nombre de App1 y App2. Con el fin de saber mejor cual es la App que estamos arrancando por defecto.

Arrancando el proyecto por defecto

Si arrancamos un ng serve, podemos ver que arranca el defaultProject (proyecto por defecto) del fichero de angular.json:

Si por cualquier cosa no tenemos una web tan clara como la anterior que contiene un H1 con App1 en grande y queremos ver por consola que aplicación estamos arrancando, podemos utilizar:

Nos sacará mucho más detalle y al final de toda la información que envía, podemos ver que aplicación de Angular estamos arrancando. En este caso, podemos ver que es app1:

Si queremos arrancar app2, una opción que tenemos es modificar el defaultProject (proyecto por defecto) del fichero de angular.json:

Si ahora queremos arrancar app2, podemos ver que:

Otra opción para arrancar un proyecto es utilizar npm start:

Arrancando un proyecto que no es defecto

Si queremos arrancar un proyecto que no está definido como el defaultProject en angular.json, podemos utilizar ng server junto al nombre del proyecto:

O bien, también existe la posibilidad de utilizar npm start junto al nombre de la app a usar:

Alguna vez, también lo he visto de la siguiente manera:

Espero que os haya gustado el artículo. ¡Un saludo y hasta pronto!