Desarrollo: configuración y despliegue - local

Configuración nodejs

Hacemos doble click sobre el instalador descargado en https://nodejs.org/es/download/ , pulsamos sobre el botón de Ejecutar, Next en la siguiente pantalla y por ultimo aceptamos las condiciones de uso. En el siguiente paso nos aparecerá una pantalla donde podemos elegir la ruta en la que queremos instalar nodejs.

Elegimos la ruta que deseemos de nuestro equipo y pulsamos Next. En la siguiente pantalla nos aparecerán los diferentes elementos de nodejs que se nos van a instalar.

Pulsamos Next y a install, esperamos a que la instalación se complete y por último le damos a finish. Con esto tendremos nodejs instalado y añadido a nuestro path.

Configuración Angular Cli (https://cli.angular.io/ )

Angular CLI es la forma más cómoda para empezar a desarrollar aplicaciones web, móvil con Angular X, es una herramienta de línea de comandos que facilita la creación, generación, ejecución, testing y deploy.

Abrimos el cmd de windows y ejecutamos la siguiente instrucción

npm install -g @angular/cli@11.2

Una vez se ejecute, empezará a realizar una gran cantidad de descargas e instalaciones de paquetes. Es necesario tener un poco de paciencia y esperar a que termine.

Para actualizarlo:

npm uninstall -g @angular-cli
npm cache clean
npm cache verify
npm install -g @angular/cli@latest

Configuración IDE: Visual Studio Code

La solución de Visual Studio Code, puede ser la mas recomendable, ya que el plugin de eclipse consume mucha mas memoria. Para usar el Visual Studio Code accederemos a la siguiente URL:

https://code.visualstudio.com/

Descargaremos la versión instalable del programa o el .zip. Una vez se haya instalado veremos una pantalla similar a la siguiente imagen:

Importación del proyecto

Desde esta pantalla pulsaremos en File => Open Folder y seleccionaremos el directorio raíz del proyecto.
NOTA: Para poder realizar el autoimportado de los componentes es necesario instalar una extensión. Por lo que se deberá pulsar la tecla:

Ctrl + p

y escribir ext install auto-import pulsar la tecla enter y en el menú lateral de la izquierda aparecerá la extensión a instalar.

Ejecución de la aplicación

Para ejecutar la aplicación dentro del Visual Studio, puedes desplegar en el menú: Ver → Terminal Integrado

desy-html

Para compilar por primera vez el desy-html, escribir el siguiente comando:

npm install

Esperar con paciencia, que termine, luego ejecutaremos el siguiente comando:

npm run dev

desy-angular

Para compilar por primera vez el desy-angular, escribir el siguiente comando:

npm install

Después escribir el siguiente comando para construir la librería:

npm run build:lib

Esperar con paciencia, que termine, luego ejecutaremos el siguiente comando:

ng serve

Publicación

Librería desy-html

Cambiar a la rama master

Compilar el proyecto en modo producción:

npm run prod

Asegurarnos de que el proyecto se ve bien en el navegador.

Parar proceso con Ctrl+X

Librería desy-angular