Como versionar un proyecto Angular 2 en GitHub y Visual Studio Code

En este post veremos cómo versionar el código de nuestros proyectos, con un ejemplo realizado en angularJS 2, versionado en Github integrado al editor Visual Studio Code.

Es muy importante para nuestros proyectos tener los archivos fuentes versionados, compartirlos con nuestro equipo de trabajo, administrar privilegios y accesos, etc. Esto nos permitirá una gestión más eficiente del código fuente y de los diferentes activos de nuestro proyecto (imágenes, documentos…etc.), lo cual nos proporciona un trabajo en equipo más cohesivo y nos posibilitará tener diferentes versiones o ramas (branches), por ejemplo una rama(branch) para la versión que está editando el equipo de desarrollo y otro branch para la versión que actualmente tienen nuestros clientes en producción.

Paso 1: Instalar Visual Studio Code

Lo primero que debemos es hacer es instalar un editor de código para nuestro proyecto, este editor debe permitir la conexión con GitHub, en este caso instalaremos Visual Studio Code, desde aquí, simplemente le decimos «Download» e instalamos con el ya conocido siguiente, siguiente.

Paso 2: Crear una cuenta en GitHub

Posteriormente, es necesario que creemos una cuenta en GitHub para ello simplemente ingresamos a https://github.com/, click en el botón «Sign Up«:

Diligenciamos los datos solicitados y listo, ya tenemos nuestra cuenta Github donde en adelante podremos guardar, compartir y gestionar el código de nuestro proyecto, también se puede adquirir una cuenta Premium para que estos proyectos sean de carácter privado, es fundamental que no olvidemos el usuario y el password que ingresamos en el registro. Es importante también instalar GitHub para Windows o para nuestro sistema operativo, para lo cual simplemente vamos a: https://desktop.github.com/, descargamos el instalador e instalamos con las opciones que vienen por defecto.

Paso 3: Crear un repositorio en GitHub

Una vez hemos culminado la instalación de Visual Studio Code y creado la cuenta en Github, procedemos con la creación de un repositorio, este repositorio nos permitirá guardar/versionar nuestros archivos fuente, para hacerlo, ingresamos con nuestra cuenta a GitHub, luego nos dirijimos al botón: New Repository:

GitHub nos solicitará el nombre del nuevo repositorio, lo ingresamos y listo. En este ejemplo he denominado mi repositorio con el nombre de: «public-angular2-primeroproyecto«.

Paso 4: Crear el proyecto Angular 2 y guardar la versión inicial en GitHub

Una vez hemos culminado la instalación de Visual Studio Code, hemos creado la cuenta en Github y hemos configurado nuestro repository, procedemos con la creación del proyecto que llamaré «angular2-primeroproyecto«, como lo he explicado en este Post. Ahora que se ha creado el proyecto, debemos configurarlo para guardarlo en GitHub, para ello nos ubicamos con la consola de comandos en la carpeta del proyecto, en este caso es «cd C:\blogs\angular2-primerproyecto» y ejecutamos los comandos:

git remote add origin [URL de nuestro repositorio] y luego git push -u origin master.

Estos datos los podemos obtener de la descripción del repositorio que hemos acabado de crear:

Al ejecutar el segundo comando «git push –u origin master», Git tratará de subir los archivos para guardarlos/versionarlos en al servidor GitHub, debido a esto nos solicitará las credenciales de acceso a nuestra cuenta (usuario, password), ingresamos los datos y listo, nuestro código ya se encuentra guardado en el servidor:

Podremos notar que no todas las carpetas de nuestro proyecto se subieron al servidor GitHub, esto debido a que existen varios archivos y carpetas que no es necesario versionar, por ejemplo la carpeta: «node_modules» ya que los módulos o dependencias de nuestro proyecto contienen muchos archivos y se pueden descargar automáticamente en el computador de cada desarrollador vía npm.

Para efectos prácticos y académicos, vamos a configurar globalmente nuestra cuenta de GitHub para no estar ingresando usuario y password todo el tiempo, esto lo haremos con los comandos:

git config –global user.name «[Nombre de usuario]»

git config –global user.email «[Email ingresado en GitHub]»

En mi caso los comandos se verían así:

Paso 5: Conectarnos a Github desde Visual Studio Code

Para conectarnos a GitHub, simplemente lanzamos el Visual Studio Code y vamos a File > Open Folder, y seleccionamos la carpeta del proyecto Angular 2 que hemos creado:

Seleccionamos la carpeta del proyecto y click en «Select folder»

Deben aparecernos todos los archivos del proyecto llamado «angular2-primeroproyecto«:

Ahora simplemente, con click derecho agregamos un nuevo archivo en la carpeta src llamado «pagina-prueba.html«:

Podemos notar que el símbolo de «Share» en el Visual Studio Code, aparece con un 1 en color azul, lo cual claramente nos indica que tenemos un archivo pendiente por subir a nuestro repositorio GitHub, para subir el archivo que recién creamos, vamos a la opción «GitHub» señada en el recuadro rojo:

Una vez allí, vamos a las configuraciones para visualizar la consola de GitHub y de esta forma tener un feedback de lo que está sucediendo entre nuestro proyecto y el repositorio en GitHub.

Posteriormente, ingresamos un mensaje para hacer «commit» y asegurar los cambios realizados:

Luego de asegurar los cambios realizados, el último paso es subir estos cambios al servidor, para lo cual simplemente hacemos click en la opción «Push»:

En la consola Git se visualizan las acciones que hemos realizado:

Ahora verificamos en el servidor que estos cambios que hicimos en el Visual Studio Code, efectivamente se subieron al servidor, al dirigirnos al repositorio creado más arriba, en la carpeta src, podemos ver:

Ahora, cada vez que hagamos un cambio y deseemos sincronizarlo con el servidor, repetimos el proceso de «Commit All» y «Push». En caso de querer obtener los cambios realizados por nuestros compañeros de equipo, ejecutamos el comando «Pull».

Con esta opción de «Pull» obtendremos la última versión localizada en el servidor.

En la opción «Commits» GitHub nos ofrece la posibilidad consultar todo el historial de modificaciones realizadas sobre nuestro proyecto. En esta opción GitHub nos indica los cambios realizados, el usuario autor de los cambios, la fecha de modificación, etc.

Ahora podemos compartir el proyecto para que cualquier persona lo descargue y/o pueda trabajar en él con la dirección: https://github.com/joseucarvajal/public-angular2-primeroproyecto/.

Resumen

En este post aprendimos a:

1. Instalar Visual Studio Code.
2. Crear una cuenta en GitHub.
3. Instalar las herramientas GitHub necesarias para versionar nuestro código.
4. Configurar un nuevo repositorio en GitHub para guardar nuestro proyecto.
5. Crear un nuevo proyecto Angular 2 y versionarlo en GitHub.
6. Definir las credenciales usuario y password en GitHub de forma global en nuestro computador.
7. Editar el proyecto con Visual Studio Code y subir los cambios realizados al servidor mediante las opciones «Commit All» y «Push»
8. Obtener la última versión del proyecto almacenado en el servidor con la opción «Pull»
9. Consultar el historial de cambios realizados sobre el proyecto en GitHub.
10. Compartir los archivos fuentes para que otras personas puedan descargarlo.