img Angular & nodeenv

(Imagen: Angular y nodeenv - Creative Commons License)

Un hábito que ya tengo naturalizado al momento de crear un nuevo proyecto es, antes que nada, ordenar mi espacio de trabajo, y entre las herramientas que utilizo para ello están los entornos virtuales, estos permiten tener las cosas ubicadas de forma correcta, todo ordenado en su "espacio y en su tiempo" evitando conflictos de versiones.

Contenido del articulo:

Un entorno virtual para Angular

Al trabajar en nuestro sistema con Javascript lo habitual es instalar muchas herramientas en nuestro sistema, estas a su vez necesitan de otros paquetes o distintas versiones de las mismos por lo cual se realizan múltiples cambios. Tarde o temprano notaremos comportamientos no deseados o incluso errores ya que el ecosistema del cual dependen se daña.

Una posible solución para mantener todo ordenado es nodeenv, pensado para ser utilizado con NodeJS y en consecuencia funciona de diez con Angular, React o Vue.js. Es la herramienta que veremos en este post.

Otras opciones para administrar las versiones de Node.js son nave, nvm y n

Que es nodeenv

Su nombre es bastante auto descriptivo pero por las dudas: nodeenv es una herramienta para crear y gestionar entornos virtuales para node.js de una manera fácil, permitiendo trabajar de forma independientes a los packages JS que tengamos en nuestro sistema operativo.

Funciona en conjunto con virtualenv herramienta utilizada para crear "espacios aislados" en Python. De hecho se puede utilizar el mismo entorno virtual para trabajar simultáneamente con Python y Node.js, ya que por estar basados en lenguajes distintos y tener distintos gestores de paquetes no entran en conflicto (experimente con Vue.js y Django y funciono muy bien; en un futuro no lejano lo haré con React).

Instalando nodeenv

Podrías instalarlo de forma global, para que este disponible en todo el sistema. En mi caso trabajo con Python/Django y ya tengo virtualenv, así que partiremos de esta base.

Nota que si lo instalaras de forma global utilizarías: $ nodeenv env para crear el entorno virtual. $ source ./env/bin/activate para activarlo y (env) $ deactivate_node para desactivarlo.

Para colocar usar nodeenv dentro de un virtualenv Python, habré un terminal en tu Linux y crea un entorno virtual Python3, luego actívalo:

$ virtualenv env --python=python3
$ source ./env/bin/activate

env es el nombre de tu entorno virtual, puede ser cualquiera, solo cuida que sea descriptivo, ya que puedes ejecutar varios a la vez durante el desarrollo, y corto, porque en la terminar ocupara espacio valioso.

Instala nodeenv dentro del entorno virtual utilizando pip:

(env) $ pip install nodeenv

Para ver si funciona correctamente consulta la versión instalada con el siguiente comando:

(env) $ nodeenv --version
1.6.0

Ahora asigna nodeenv al entorno virtual actual con:

(env) nodeenv --python-virtualenv

Esto instala node.js, npm y agrega nuevas funciones de shell a nuestro virtualenv. Puede demorar un poco.

También se puede utilizar el comando abreviado: (env) nodeenv -p

Una vez terminado el proceso de instalacion de node.js puedes ver si todo esta correcto consultando las versiones con:

(env) $ node -v
v15.14.0
(env) $ npm -v
7.7.6

Ya tenemos npm, el "equivalente" para javascript de pip, ahora podemos instalar por ejemplo TypeScript:

(env) $ npm install -g typescript

Nuevamente usamos comprobación de versión para ver que este todo bien:

(env) $ tsc --version
Version 4.0.0

Instalando Angular (por ejemplo)

Con el entorno virtual de Node.js listo podemos empezar a trabajar sobre este, y agregar lo que necesitemos como puede ser React, Vue.js, etc. En este caso, ya que tenemos TypeScript, instalaremos Angular.

Angular suma nuevos y sensibles cambios con cada versión, así que te recomiendo este articulo de Victor Robles para instalar desde el inicio la ultima versión con el ecosistema correcto.

Primero en tu terminal dirigite al lugar donde quieres que este alojado tu proyecto:

Recuerda que puedes colocar tus proyectos en un lugar distinto de donde esta alojado elvirtualenv o en este caso nodeenv.

Instala la última versión estable de angular CLI:

(env) $ npm install @angular/cli

No todas las versiones de Angular se llevan bien con todas las versiones de Node.js. Al momento de escribir este post Angular 7.1.0 se entiende muy bien con Node.js 10.12.0, por ejemplo. En este post obvio eso e instalo la ultima versión de todas las herramientas ya que el propósito es solo explicar el uso de nodeenv.

Crea un nuevo proyecto con:

(env) $ ng new nombre_de_mi_app

Dependiendo de la versión de CLI que estés utilizando el asistente realizara una serie de preguntas, en el caso de Angular 7:

  1. Preguntará si quieres añadir el routing de Angular, elige NO si no lo quieres incluir.
  2. Preguntará si quieres usar un formato especifico para los estilos css, presiona ENTER para usar el que esta por defecto si gustas.

Espera que el asistente genere tu proyecto de Angular. Si consultas la versión instalada sabrás si todo resulto correcto. para ello usa el comando:

(env) $ ng v

Aparecerá el logo Angular CLI y una lista con las versiones de los packages entre otras cosas.

Ahora entra a la carpeta de tu proyecto y lanza el servidor local de pruebas de angular.

(env) cd nombre_de_mi_app
(env) ng serve

Ve a tu navegador web e ingresa a http://localhost:4200/, encontraras la webapp de Angular corriendo.

Desactivar nodeenv

En todo momento cuida de estar trabajando dentro de un entorno virtual, controlando que al principio del prompt de tu terminal aparezca el nombre de tu virtual environment entre paréntesis. De lo contrario las modificaciones se harán a nivel de sistema, justo lo contrario a lo que deseamos.

Para desactivar nodeenv utiliza el comando:

(env) $ deactivate

Con deactivate saldrá por completo, recuerda que asignamos nodeenv a un virtualenv durante la preparación de nuestro entorno. Si instalas directamente nodeenv a nivel de sistema, sería: deactivate_node.

Una vez fuera, intenta ejecutar:

$ nodeenv --version
$ node -v
$ npm -v
$ tsc --version

En todos los casos, si nunca instalaste antes a nivel de sistema ninguna de estas herramientas, aparecerá un mensaje similar a este:

El programa «nodeenv» no está instalado. Puede instalarlo escribiendo:
sudo apt install nodeenv

Justo lo esperado, si el virtual environment no esta activado, para el sistema estos programas no existen.

Conclusión

Mucha de esta información estaba en ingles. Me pareció una buena idea ordenarla y ajustarla a las herramientas que utilizo en mi Linux Mint, claro ademas de traducirla. Espero que te sea útil. Bien, ahora puedes hacer pruebas tranquilo sin temor a romper algo en tu sistema.

Written by @EspiFreelancer with StackEdit.


Published

Last Updated

Category

Web developer

Tags

Contact