--- 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)