Información técnica de desarrollo
Aqui una playlist de videotutoriales pensada para personas diseñadoras y desarrolladas:
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 (Angular )
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@15 |
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:
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:
desy-angular
Para compilar por primera vez el desy-angular, escribir el siguiente comando:
Después escribir el siguiente comando para construir la librería:
Esperar con paciencia, que termine, luego ejecutaremos el siguiente comando:
Publicación
Librería desy-html
Cambiar a la rama master
Compilar el proyecto en modo producción:
Asegurarnos de que el proyecto se ve bien en el navegador.
Parar proceso con Ctrl+X
Librería desy-angular
Cambiar a la rama master
Modificar la versión (X.X.N patch, X.N.X minor o N.X.X major) en el archivo: /projects/desy-angular/package.json
Construir la librería con el comando: