Primeros Pasos. Instalaciones inciales

Instalar Node.js

Para empezar, tenemos que instalar varias cosas en local, como son Node.js y Git para Windows. Node.js es un entorno de ejecución de JavaScript del lado del servidor. Permite ejecutar JavaScript fuera de un navegador web. Es la base de todo proyecto Angular o React, es el backend. Git para Windows nos va a ayudar a ejecutar la aplicación en local y a subir los archivos a un repositorio Git en GitLab.

Instalar Git Windows

Stand alone, lo normal es que sea el de 64b. La instalación pide bastantes cosas, dejar todo por defecto.

GitLab - Cuenta, repositorio y primera subida

Si no tenéis cuenta en gitlab, cread una, es gratis.

Todos los proyectos van a colgar del usuario, un ejemplo.

Vamos al Homepage, icono de GitLab y creamos un nuevo proyecto: Create project - blank. Poner nombre, marcar "public" y desmarcar "Initialize repository with a README", el resto, por defecto. Con esto, tenemos creado el proyecto.

• Git local y git global
Cuando usas git config global, estás configurando Git para todo el sistema, lo que significa que cualquier repositorio que crees en tu computadora usará la misma configuración. Por otro lado, cuando usas git config local, estás configurando Git sólo para el repositorio actual.
• New repository, existing folder or existing repository
En función de como tengamos el proyecto en local, elegiremos una de estas opciones. En la página inicial del proyecto recién creado tendremos estas instrucciones. Seleccionar la pestaña SSH o HTTPS según la preferencia de conexión con el repositorio.

Vamos a la página principal del proyecto, boton "code", y lo copiamos el que corresponda, yo he elegido "clone with https". Vamos a la ruta de nuestro proyecto en Windows con la consola git bash. Ejecutamos en orden la lista de instrucciones elegida según lo comentado más arriba. En nuestro casó será "Push an existing folder".

Desplegar en hosting y dominio

Una vez tenemos el código y las configuraciones previas, vamos al paso final, desplegar nuestra SPA en un hosting para que esté accesible al público en internet.

Esto lo vamos a realizar mediante un archivo yaml en el raíz de nuestro proyecto. Aquí ya vamos a trabajar desde GitLab. Puede hacerse de varias formas, veremos cómo se hace con el GitLab IDE.

Antes que nada, tenemos que subir el código que hemos estado editando en local. Vamos a la carpeta, abrimos terminal git bash y hacemos:

Normalmente en GitLab será la rama main, si es otra, poner el nombre que corresponda.

Vamos a GitLab, entramos en nuestro proyecto, en el boton code pulsamos en Open with Web IDE, se abre otra pestaña con un IDE online, ahí está nuestro código y podremos editarlo. Añadimos un archivo ".gitlab-ci.yml", poner el nombre tal cual, este archivo va a configurar el pipelines necesario para desplegar. La explicación del pipeline escapa del objetivo de este tutorial, sólo comentar que es el mecanismo que va a compilar, testear y desplegar nuestró código, todo ello de forma automática.

Contenido del archivo .gitlab-ci.yml:

Breve explicación del código: el pipeline utiliza una imagen docker para correr node, el backend, al igual que en local. Tenemos dos etapas, primero compilamos con build y luego desplegamos con deploy. El build instala lo necesario y compila el código generando los artefactos preparados para su depliegue en la carpeta out. Después para el despliegue en un hosting necesitamos más cosas: instalar rsync (herramienta que sube los archivos al hosting), configurar un agente ssh (protocolo que permita la conexión entre servidores, necesita esas variables), mover los artefactos de out a public para que sean visibles en destino y realizar la sincronización con el hosting con ese comando de rsync y esas variables.