Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros [2024/06/24 12:07] 192.168.177.98 |
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:primeros [2024/08/28 12:32] (actual) 192.168.177.30 |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | Configuración del entorno frontend paso a paso | + | **Configuración del entorno frontend paso a paso |
+ | ** | ||
1. Descargar e Instalar Git Bash | 1. Descargar e Instalar Git Bash | ||
+ | |||
* Descarga e instala Git Bash desde https://www.git-scm.com/downloads | * Descarga e instala Git Bash desde https://www.git-scm.com/downloads | ||
Línea 7: | Línea 9: | ||
3. Instalar NVM (Node Version Manager) | 3. Instalar NVM (Node Version Manager) | ||
+ | |||
* Descarga e instala NVM (Node Version Manager) desde https://github.com/coreybutler/nvm-windows/releases/download/1.1.12/nvm-setup.exe | * Descarga e instala NVM (Node Version Manager) desde https://github.com/coreybutler/nvm-windows/releases/download/1.1.12/nvm-setup.exe | ||
4. Instalar Node.js Versión 20 | 4. Instalar Node.js Versión 20 | ||
- | - Ejecuta el siguiente comando en Powershell: | + | |
- | | + | * Ejecuta el siguiente comando en Powershell: |
nvm install 20 | nvm install 20 | ||
- | - Verifica que la instalación fue exitosa verificando su versión con: | + | * Verifica que la instalación fue exitosa verificando su versión con: |
- | + | ||
nvm ls | nvm ls | ||
- | - Si estás utilizando otra versión de Node.js, ejecuta: | + | * Si estás utilizando otra versión de Node.js, ejecuta: |
- | | + | |
nvm use 20 | nvm use 20 | ||
5. Clonar el Proyecto con Git Clone | 5. Clonar el Proyecto con Git Clone | ||
- | - Utiliza el siguiente comando para clonar el proyecto desde GitHub: | + | |
+ | * Utiliza el siguiente comando para clonar el proyecto desde GitHub: | ||
- | git clone https://github.com/simongilr/appVersionOne.git | + | * git clone https://github.com/simongilr/appVersionOne.git |
| | ||
- | 6. Crear Rama de desarrollo | + | |
- | - Para crear su rama de desarrollo ejecute en gitbash: | + | 6. Instalar Dependencias del Proyecto |
- | + | * En Git Bash, navega hasta el directorio del proyecto y ejecuta: | |
- | git checkout -b hotfix/nombre-de-la-rama | + | |
- | + | ||
- | + | ||
- | 7. Instalar Dependencias del Proyecto | + | |
- | - En Git Bash, navega hasta el directorio del proyecto y ejecuta: | + | |
npm install | npm install | ||
7. Iniciar y Compilar el Proyecto | 7. Iniciar y Compilar el Proyecto | ||
- | - Para iniciar el proyecto, ejecuta: | + | * Para iniciar el proyecto, ejecuta: |
- | | + | |
npm run start | npm run start | ||
- | - Para generar el traspilado, utiliza: | + | * Para generar el traspilado, utiliza: |
npm run build | npm run build | ||
- | - Se puede especificar el ambiente deseado agregando un sufijo, por ejemplo: | + | * Se puede especificar el ambiente deseado agregando un sufijo, por ejemplo: |
npm run start:qa | npm run start:qa | ||
npm run build:qa | npm run build:qa | ||
+ | |||
+ | |||
+ | 8. Crear Rama de desarrollo | ||
+ | Para crear su rama de desarrollo ejecute en gitbash: | ||
+ | |||
+ | git checkout -b hotfix/nombre-de-la-rama | ||
+ | |||
+ | 9. Generar Componentes Angular | ||
- | 8. Generar Componentes Angular | + | * Al generar un componente usando `ng g c rutal-del-componente/nombre-del-componente`, ten en cuenta que los componentes standalone no se están utilizando. |
- | - Al generar un componente usando `ng g c rutal-del-componente/nombre-del-componente`, ten en cuenta que los componentes standalone no se están utilizando. | + | * Elimina las líneas de imports y standalone. |
- | - Elimina las líneas de imports y standalone. | + | * En su lugar, crea un módulo usando: |
- | - En su lugar, crea un módulo usando: | + | |
ng g m /ruta-al-componente-generado-anteriormente | ng g m /ruta-al-componente-generado-anteriormente | ||
- | - O ejecuta el comando siguiente para crear el componente sin standalone: | + | * O ejecuta el comando siguiente para crear el componente sin standalone: |
ng g c /ruta-del-componente/nombre-del-componente --standalone false | ng g c /ruta-del-componente/nombre-del-componente --standalone false | ||
- | 9. Configurar Módulos de Angular | + | 10. Configurar Módulos de Angular |
- Dentro del módulo creado, agrega el componente en “imports” y “exports” para su uso dentro del proyecto. | - Dentro del módulo creado, agrega el componente en “imports” y “exports” para su uso dentro del proyecto. | ||
- Para hacer uso del componente se debe de exportar el módulo | - Para hacer uso del componente se debe de exportar el módulo | ||
- | 10. Componentes de PrimeNG | + | 11. Componentes de PrimeNG |
- Antes de hacer uso de los componentes de PrimeNG se debe de seguir sus pasos de instalación los cuales puedes encontrar en: https://primeng.org/installation | - Antes de hacer uso de los componentes de PrimeNG se debe de seguir sus pasos de instalación los cuales puedes encontrar en: https://primeng.org/installation | ||
- Una vez instala PrimeNG se puede hacer uso de los componentes de la sección “Componentes” de su página web, sección FEATURES. | - Una vez instala PrimeNG se puede hacer uso de los componentes de la sección “Componentes” de su página web, sección FEATURES. | ||
Línea 75: | Línea 79: | ||
Ejemplo: se desea hacer uso de un calendario de PrimeNG; en este caso se consigue el código: | Ejemplo: se desea hacer uso de un calendario de PrimeNG; en este caso se consigue el código: | ||
+ | <code> | ||
<ng-container *ngIf="field.type === 'calendar'"> | <ng-container *ngIf="field.type === 'calendar'"> | ||
<div class="flex-auto"> | <div class="flex-auto"> | ||
Línea 86: | Línea 90: | ||
</div> | </div> | ||
</ng-container> | </ng-container> | ||
+ | </code> | ||
+ | |||
Este segmento hace parte de un formulario, pero se debe enlazar a la API formterceros.ts para enlazar el componente con el backend | Este segmento hace parte de un formulario, pero se debe enlazar a la API formterceros.ts para enlazar el componente con el backend | ||
Línea 95: | Línea 101: | ||
De esta forma “fechadecreacion” es tipo “calendar” lo que lo enlaza al componente | De esta forma “fechadecreacion” es tipo “calendar” lo que lo enlaza al componente | ||
+ | |||
+ | 12. Configurar hook git en el proyecto. | ||
+ | |||
+ | Es necesario que el hook locales tengan permiso en la raiz del proyecto | ||
+ | * chmod +x /hooks/pre-push | ||
+ | |||
+ | Es necesario que git apunte al directorio hock | ||
+ | * git config core.hooksPath hooks | ||
+ | |||
+ | Importante | ||
+ | |||
+ | Si se requiere hacer un push tradicional sin que le afecte el hook y por ende no genere versionado se debe utilizar la siguiente bandera git push –no-verify | ||
+ | |||
+ | También aplica para posibles problemas con la receta hook o si no ha preparado el proyecto local para el hook como se indicó anteriormente. | ||
+ | |||
+ | Para más información consultar guía de versionado. | ||
[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]] | [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]] | ||
+ | |||