---
# System prepended metadata

title: Restructuración proyecto front-end

---

---
title: 'Restructuración proyecto front-end'
---

Restructuración proyecto front-end
===
:::info

El objetivo del cambio de estructura organizativa de los proyectos front-end consiste en pasar de un enfoque mono-proyecto a uno multi-proyecto
:::

## Contenido

[TOC]

## Introducción

La organización del proyecto en multi-proyecto, nos permite la unificación del repositorio donde será alojado el historial de cambio de los proyectos. Así también permite centralizar las configuraciones globales de los proyectos. 

Estructura (mono-proyecto)
---

* **siare-front**         (aplicación)
 * dist         (espacio de trabajo)
 * node_modules         (dependencias descargadas)
 * ***src***         (código fuente y configuraciones de la aplicación)
   * app
   * assets
   * environments 
 * angular.json         (configuraciones de construcción gestionado por el CLI)
 * package.json         (configuraciones de dependencias gestionado por el node )

> Por cada proyecto creado utilizado el enfoque de mono-proyecto mantiene esta estructura.

Estructura (multi-proyecto)
---
```
Estructura del workspace multi-proyecto.
El equema multi-proyecto divide en dos partes las configuraciones :
- Configuración de contexto de workspace
- Configuración de aplicación o librería 
```
* **ngx-siare-front** 

    * ...         (configuración del workspace)
    *  ***project***         (código fuente de aplicaciones y librerias)
        *  ngx-siare-common
            *  ...         (configuración especifica de la librería)
            *  ***src***         (Código fuente)
        * siare-front
            *  ...         (configuración especifica de la aplicación)
            *  ***src***         (Código fuente)
        * usuarios-front
            *  ...         (configuración especifica de la aplicación)
            *  ***src***         (Código fuente)     

Diferencia entre estructuras
---

| Mono-Proyecto| Multi-Proyecto |
| -------- | -------- |
| <img src="https://i.imgur.com/9eU1uUO.png" />     | <img src="https://i.imgur.com/DlyOyfR.png" />      |


Comandos para la construcción y despliegue
---
| Mono-Proyecto| Multi-Proyecto |
| -------- | -------- |
| ng build | ng build <nombre proyecto> |
| ng serve | ng serve <nombre proyecto> |
    

Referencias 
---
    
- [multiple-projects](https://angular.io/guide/file-structure#multiple-projects)