Inicialización de Angular con GitLab y test-driven development

Clase 19 de 53 • Curso de DevOps con GitLab

Resumen

Convertir una idea en un proyecto listo para producción comienza con una base sólida. Aquí verás cómo inicializar Angular, configurar GitLab y activar tests automatizados bajo un enfoque profesional de DevOps y test-driven development, optimizando el flujo desde la consola hasta el repositorio remoto.

¿Cómo iniciar Angular y el repositorio en GitLab de forma industrial?

Punto de partida claro y ordenado: crear el directorio de trabajo, generar la aplicación, correr pruebas y enlazar el repositorio remoto. La meta es dejar todo listo para colaborar y automatizar.

¿Qué pasos ejecutar en consola para crear y preparar el proyecto Angular?

Crear el directorio “Plazi GitLab Live” e ingresar a él.
Inicializar la aplicación indicando el nombre del proyecto: “Plazi DevOps”.
Responder el asistente de configuración y elegir trabajar con SAS.
Esperar la instalación de dependencias hasta que finalice.

Acciones clave mencionadas: - Seleccionar el preprocesador de estilos: SAS. - Mantener la estructura estándar de Angular para avanzar rápido.

¿Por qué activar test-driven development desde el inicio en DevOps?

Test-driven development es fundamental en DevOps porque habilita validación continua y prepara el terreno para CI. Angular incluye tests iniciales listos para correr.

Pasos señalados: - Cambiar al directorio correcto del proyecto “Platzi DevOps”. - Ejecutar los tests y verificar que compilen y corran.

Código utilizado:

npm test

Resultados esperados: - Compilación inicial exitosa. - Ejecución de tres tests activos.

¿Cómo visualizar la app en localhost 4200 con un servidor de desarrollo?

Después de cerrar los tests, levantar el servidor y abrir el navegador para verificar el arranque.

Código utilizado:

npm start

Luego visitar: localhost 4200. Verás un proyecto estándar de Angular listo para iterar.

¿Cómo configurar Git y conectar con GitLab de forma segura?

Con la app ya creada, el siguiente paso es ligar el repositorio local con GitLab. Angular genera un primer commit al inicializar; por eso, basta con ajustar el remote y empujar el código.

Pasos indicados: - Cerrar el servidor y limpiar la consola con clear. - Configurar el usuario global de Git: nombre “David Aroesti”.

Ejemplo de comando compartido:

git config user.name "David Aroesti"

Configurar el correo a utilizar.
Cambiar el origin para apuntar al proyecto de GitLab: “Platzi GitLab Live/Platzi DevOps”.
Enviar todo al remoto por SSH e ingresar la contraseña de la llave cuando se solicite.
Verificar en la interfaz con refresh.

Puntos clave en la plataforma: - Manejo de repositorios con vista a branches y tags. - Interfaz que facilita trabajo colaborativo con otros desarrolladores.

¿Qué habilidades y conceptos clave se ponen en práctica?

Este flujo refuerza la mentalidad de industrializar el código: pasar de artesanía a prácticas profesionales con automatización y control de calidad continuo.

Conceptos destacados: - DevOps: cultura de entrega continua soportada por pruebas y automatización. - Test-driven development: base para validar cambios y preparar CI desde el día uno. - Repositorio Git ya inicializado: Angular genera un commit inicial para arrancar rápido. - Remote origin en GitLab: configuración del remote y push por SSH. - Colaboración con GitLab: uso de branches, tags y flujo colaborativo. - Servidor local de desarrollo: arranque con npm start y verificación en localhost 4200. - Flexibilidad tecnológica: si no usas Angular, puedes optar por un framework de backend como Ruby o Express sin problema, manteniendo el enfoque profesional. - Próximos pasos: exploración de mesh requests para trabajo colaborativo.

¿Tuviste una experiencia distinta al inicializar o conectarte a GitLab? ¿Te surgieron dudas con los tests o el remote origin? Comparte tu caso y preguntas en los comentarios.

Elmer Padilla Espinoza

student•

Ricardo Villalobos Martínez

student•

Para los que estamos en windows para instalar los gestores de paquetes: Vamos a usar NodeJS y npm (gestor de paquetes y librerías) Descargar versión LTS de https://nodejs.org/es/ Instalar con aceptar y continuar Al terminar de instalar abrir una consola de cmd y escribir el comando $ node –v $ npm –v Para descargar el cli y poder usar el comando ng $ npm install –g @angular/cli

FERNANDA CAROLINA RODRIGUEZ GUERRERO

student•

Súper tu aporte, me sirvió un montón, muchas gracias!!!

Nelson David Acevedo Osorio

student•

Para el año 2023, les cuento que me enfrente a una incompatibildiad entre la ultima version de nodejs y la que descargaba de angular npm, por tanto me toco bajarme de version en nodejs para pasar rapido el ejerrciio. Por tanto en el momento que lo vayan a a hacer validen que la version de NodeJS y la version de NPM sea compatible con la version de Angular que se esta descargando. Al final trabaje con estas versiones:

Angular CLI: 15.2.6 Node: 14.21.3 Package Manager: npm 6.14.18 OS: win32 x64

y por ultimo importante validar donde queda instalado ng.cmd en mi caso quedo instalado en un subdirectorio .\node_modules.bin y me toco adicionarlo en la variabled e ambiente PATH para que me reconociera el comando ng sin inconvenientes

Oswaldo Peralta

student•

Es necesario tener instalado NodeJS y Angular/CLI. Estos son los pasos para conseguirlo en Ubuntu:

$ sudo apt-get install python-software-properties
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install nodejs
$ npm install -g @angular/cli

Juan Esteban Galvis

student•

Obviamente antes de la clase habia que instalar Angular, npm, git. Detalles que no me gusto de la clase, utilizar material que de pronto otros no sabemos (Yo con angular ni idea)

Fernando Pioli Martínez

student•

pero el profe dijo que se podia hacer con lo que quieras. El punto es comenzar un proyecto. Yo lo hice con react que es lo que conozco.

David Andrey Rodríguez Zamora

student•

Para aquellas personas que tiene el error de: $ git push -u origin --all git@gitlab.com: Permission denied (publickey). fatal: Could not read from remote repository.

Utilicen este comando: git config core.sshCommand "ssh -o IdentitiesOnly=yes -i ~/.ssh/private-key-filename-for-this-repository -F /dev/null"

A mí me sirvió, espero que si les sirva. https://gitlab.com/help/ssh/README#locating-an-existing-ssh-key-pair

Oscar Fernando Diaz Anchay

student•

Usas windows? no me funciona en mi caso, me arroja que no estoy usando el comando bien, alguna sugerencia porfa :/

David Andrey Rodríguez Zamora

student•

Si utilizo windows y si te sigue dando el mismo problema mañana podría buscar una manera de ayudarte.

Blas Rodriguez934

student•

yo tuve que realizar primero lo siguiente: git init git status git add . git commit -am "mensaje" git remote add origin "url" git remote -v git push origin master y ahí funcinó.

Erika Gabriela Villanueva Perez de Leon

student•

Todo parecía correcto pero me sigue marcando el error

git@gitlab.com: Permission denied (publickey,keyboard-interactive).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

al correr esta sentencia git push origin master

Miguel Angel Velazquez Romero

student•

Hola Erica! Tal parece que no tienes bien configurada tu ssh public key. Igual te puede funcionar ver el curso de git y github antes de entrar de lleno a gitlab y devops

Seba Cardoso

student•

Yo venía de usar Github y me acabo de dar cuenta que puedo gestionar el mismo proyecto en ambos repositorios. Lo único que hago es tener nombres diferentes para el origin.

Marlon Gomez

student•

Todos los videos anteriores estuvieron muy bien. En este, creo que se debe considerar agregar una lección más, donde se le explique a los estudiantes como instalar angular y posibles dependencias mínimas. Yo siempre trabajo con Vue y no conozco mucho de angular

Rubén Esparza

student•

Para los que no tengan conocimientos de como instalar Angular, les comparto este tutorial, siguiendo las instrucciones tendrán su equipo ambientado y listo para seguir con el curso.

Tutorial

Verónica ri

student•

parece que y no esta disponible

Verónica ri

student•

Para instalar angular

npm install -g @angular/cli

Otilio Mata

student•

si tienes instalado homebrew el comando es: brew install angular-cli

Ernesto Jose Gabriel Lopez Bravo

student•

En mi me solicitó el passphrase

Andresa Helena Rivera Ceballos

student•

![](

Oscar Ricardo Aranda

student•

Error 1)

Repositorio remoto

ya tenes un repositorio remoto agregado. para ello tenes que modificar el "origin" o agregar un nuevo "origin" ejemplo para remplazar el repositorio remoto actual.

git remote set-url origin <url-repositorio>

de esa manera vas a poder hacer push o pull. Ejemplo con la rama master.

git pull origin master
git push origin master

Para agregar otro repositorio en la nube podes hacer.

git remote add <nuevo nombre> <url-repositorio>

Ejemplo:

git remote add gitlab <url-repositorio-gitlab>
git remote add github <url-repositorio-github>

Error 2

No agregado en gitlab la llave publica de ssh.

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Una vez creado, tenes que ir al lugar en donde se guardo y copiar su contenido. en linux se puede mostrar de la siguiente forma.

more ~/.ssh/*.pub

Despues el contenido lo pegas en Perfil->Claves SSH -> Agregar la clave ssh y listo.

Ahi deberias de poder hacer pull y push.

Opcion

Sino, te podes autentificar por HTTP. Desabilitando la autentificacion de SSL en git.

git config http.sslVerify false

de esta forma te podes autentificar usando tu nombre de usuario y contraseña de gitlab.

Franco Colmenarez

student•

@SistemasCBC mucho cuidado con mostrar las llaves con more o abrirlas con algun editor de texto, puede llegar a ser inseguro. La mejor practica a mi criterio para copiar las llaves es con el comando xclip

Ejemplo:

xclip -sel clip < ~/.ssh/id_ed25519.pub

Más información aquí:

Jesús David García Cuello

student•

Vengo del curso de git y github profesional 2019 y encaja perfectamente con este curso, muy recomendados ambos!

Exitos!!

Jahir Saavedra

student•

Ayuda por favor, cree un proyecto en GitLab, en mi PC cree un html, ejecuté el comando "git init", posteriormente la configuración de use.name y user.email. Posteriormente la secuencia de comandos "Push an existing folder" y en el último comando "git push -u origin master", digito usuario y contraseña, pero me genera el siguiete mensaje: "remote: HTTP Basic: Access denied" "fatal: Authentication failed..." podrían ayudarme para saber q estoy haciendo mal? JAS.

Cristian Antonio García González

student•

Hola @jahirsaaverdra.

Intenta esto:

Sucede cada vez que me veo obligado a cambiar la contraseña de Windows y ninguna de las respuestas anteriores me ayudó.

Prueba la siguiente solución que funciona para mí:

Vaya al Administrador de credenciales de Windows . Esto se hace en un EN-US Windows presionando la tecla de Windows y escribiendo 'credencial'. En otras variantes de Windows localizadas, debe usar el término localizado (consulte los comentarios para ver algunos ejemplos).

Alternativamente , puede utilizar el acceso directo control /name Microsoft.CredentialManageren el cuadro de diálogo Ejecutar (WIN + R)

Edite la entrada git en Windows Credentials, reemplazando la contraseña anterior por la nueva.

En caso que no te funciones prueba lo siguiente:

git config --system --unset credential.helper

luego ingrese una nueva contraseña para el servidor remoto Git.

Aquí la fuente.

Espero que te funcione esa soluciones en caso que no te funcione comentarlo y intentare ayudarte a encontrar solución a tu problema.

Jahir Saavedra

student•

Hola

cipriano salazar

student•

ayuda este video no lo puedo ver no carga indica problemas con el servidor

Jhon Alexander Castañeda Angulo

student•

Estoy teniendo el mismo problema, aparece "The media could not be loaded, either because the server or network failed or because the format is not supported."

Victor Muchica Farfan

student•

Con esta guia pude levantar angular en wsl https://dev.to/kimcuonthenet/setup-development-environment-for-angular-7-2b78

Stephanie Téllez San Juan

student•

Si no van a usar Angular y prefieren tomar un proyecto que ya tengan en su computadora por ejemplo uno con Flask pueden seguir estos pasos:

Git global setup

git config --global user.name <>
git config --global user.email <>

Push an existing folder

cd <existing_folder>
git init
git remote add origin git@gitlab.com:<>/<>.git
git add .
git commit -m "Initial commit"
git push -u origin master

Pero me marcó error al hacer el push, el error fue: git@gitlab.com: Permission denied (publickey,keyboard-interactive). Entonces al leer algunos comentarios de la comunidad use:

git config core.sshCommand "ssh -o IdentitiesOnly=yes -i ~/.ssh/<llave_creada_en_la_clase*> -F /dev/null"

La llave la pueden crear siguiendo este video: [](https://platzi.com/clases/1526-gitlab/19276-autenticacion2093/ Pero no funcionó al refrescar gitlab entonces le agregue --all al hacer push:

git push -u origin --all

y listo! Subí mi proyecto de Flask. Practicamente solo reemplace git push -u origin master por git push -u origin --all Estoy usando Ubuntu.

Omar Andrés Narvaez Ortega

student•

si les sale Command not found cuando ejecutan ng new platzi-devops, lo que deben hacer es antes instalar angular con el comando:

npm install -g @angular/cli@latest

Valentina Triana Lozano

student•

Chicos! Si tienen problemas con el acceso cuando intenten hacer el push, pueden usar esta opción:

Cuando les pida el usuario, agregar el usuario normal que tienen en Gitlab
Cuando les pida la contraseña, generen un token de acceso de esta forma:
- User settings/ Access tokens
  - Add a personal access token
  - Es importante que seleccionen la opción read_repository y write_repository
  - Create access token
- Lo copian y eso es lo que dan en la consola como contraseña

Gabriel Oswaldo Giraldo Martínez

student•

Después de investigar un buen rato antes de poder avanzar, encontré que en windows debo correr lo siguiente antes; git config core.sshCommand “ssh -o IdentitiesOnly=yes -i ~/.ssh/data_rsa -F /dev/null” Donde data_rsa es el nombre del archivo generado con la clave SSH.

Debe tenerse presente cual es el passphrase utilizado al generar el archivo