Angular·Ubuntu

Port forwarding en VSCode Remote Development

remote-extensionpack

Trabajando en un proyecto en Angular usando la extensión de desarrollo remoto que VSCode tiene para poder desarrollar dentro de un contenedor Docker, me encontré con un extraño comportamiento:

Al arrancar el servidor de desarrollo de Angular mediante ng serve, en la consola del VSCode se me mostraba el típico mensaje con el enlace para abrir la aplicación en el navegador.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Lo curioso del caso es que al pulsar (Ctrl+Click) en dicho enlace se me habría el navegador en la URL http://127.0.0.1:40999/ en vez de http://localhost:4200/.  Es más, si intentaba acceder a http://localhost:4200/ no podía acceder a la aplicación. 

Y todo esto, habiendo publicado el puerto en el fichero devcontainer.json


...
"appPort": [
// Front-end development (Angular server)
"0.0.0.0:4200:4200"
],
...

Sigue leyendo “Port forwarding en VSCode Remote Development”

node

¿Pero qué demonios es package-lock.json?

nodejs

package-lock.json es un fichero muy importante que te evitará un montón de problemas en tus repositorios.

Pero antes de entrar en la discusión acerca de package-lock.json vamos a hablar un poco acerca de el versionado semántico y package.json. Sigue leyendo “¿Pero qué demonios es package-lock.json?”

Angular·JavaScript·node·Programación

Instalación de NodeJS

nodejs
Según la versión del Sistema Operativo (Linux/Windows 32/64bits) que tengamos y de las necesidades concretas del proyecto (versión concreta de NodeJS), procederemos a instalar la versión de NodeJS correspondiente, que podemos descargar de https://nodejs.org/en/download/releases/:

  • node-v8.11.3-linux-x86.tar.xz (Linux 32 bits)
  • node-v8.11.3-linux-x64.tar.xz (Linux 64 bits)
  • node-v8.11.3-win-x86.zip (Windows 32 bits)
  • node-v8.11.3-win-x64.zip (Windows 64 bits)

La instalación consiste en descomprimir el fichero correspondiente en la ubicación deseada (por ejemplo /home/username/software/node-v8.11.3-linux-x64 donde username es el nombre del usuario para Linux ó C:\software\node-v8.11.3-win-x64 para Windows).

Una vez instalado NodeJS, para poder utilizarlo desde la línea de comandos, debemos añadir al PATH de ejecución, la ruta de los ejecutables (node y npm).

En Linux sería algo así (podemos añadirlo al fichero ~/.profile para que sea permanente):

export PATH=/home/username/software/node-v8.11.3-linux-x64/bin:$PATH

En Windows sería algo así (podemos establecer su valor en MyComputer->Properties->Advanced->Env Variables->Path para que sea permanente):

set PATH=C:\software\node-v8.11.3-win-x64;%PATH%

Sigue leyendo “Instalación de NodeJS”

JavaScript·Programación

JavaScript Moderno Explicado para Dinosaurios


Aprender JavaScript moderno es como si desde el principio no hubieses estado ahí. El ecosistema está creciendo y cambiando tan rápidamente que es difícil comprender los problemas que las diferentes herramientas están tratando de resolver.

El objetivo de este artículo es proporcionar un contexto histórico de cómo han evolucionado las herramientas JavaScript hasta lo que son hoy, en 2017. Empezaremos desde el principio, construyendo un sitio web de ejemplo como lo hacían los dinosaurios – sin herramientas, solamente HTML plano y JavaScript. Posteriormente iremos introduciendo diferentes herramientas, una a una, de manera incremental para ver los problemas que resuelven. Con este contexto histórico, podrás adaptarte mejor al siempre cambiante ecosistema JavaScript. ¡Empecemos!

Sigue leyendo “JavaScript Moderno Explicado para Dinosaurios”

Angular·JavaScript·Programación

Entendiendo los módulos Angular (NgModule) y sus ámbitos

angular

NgModule es la estructura básica con la que te encuentras al codificar una aplicación con Angular, pero también es la más sutil y compleja, debido a sus diferentes ámbitos. La documentación de Angular tiene incluso una completa FAQ acerca de NgModules, pero sigue siendo una locura entenderlos.

Sigue leyendo “Entendiendo los módulos Angular (NgModule) y sus ámbitos”

Angular·JavaScript·Programación

Qué son los Módulos en Angular

angular
Los módulos de Angular representan un concepto central y juegan un papel fundamental en la estructuración de las aplicaciones Angular.

Un Módulo Angular agrupa un conjunto de artefactos Angular, como son componentes, directivas, pipes y servicios que forman parte de ese mismo módulo. Dicho esto, representa una agrupación lógica en lo que podríamos llamar área funcional de nuestra aplicación (ej. módulo de contactos, módulo de administración,…). Es más, un Módulo Angular también define las dependencias con otros módulos, esto es, que otros módulos necesita importar y a su vez qué componentes, directivas o pipes exporta.

@NgModule({
imports: [ BrowserModule, HttpModule, FormsModule ],
declarations: [ PersonComponent, ContactComponent, ContactListComponent ],
providers: [ PersonService, ContactService ],
exports: [ ContactListComponent, ContactComponent ]
})
export class ContactModule {}

Sigue leyendo “Qué son los Módulos en Angular”

JavaScript·Programación

Introducción en 10 minutos a módulos JavaScript, formatos de módulos, cargadores de módulos y empaquetadores de módulos

El desarrollo moderno de JavaScript puede ser abrumador.

Al trabajar en un proyecto, te puedes preguntar si toda la maquinaria e instrumentación moderna es necesaria.

¿Qué hacen herramientas como Webpack y SystemJS? O ¿qué significa AMD, UMD o CommonJS?  ¿Qué relación tienen entre ellas? y ¿porqué, siquiera, las necesitas?

En esta entrada aprenderemos las diferencias entre módulos JavaScript, formatos de módulo, cargadores de módulo y empaquetadores de módulos.

No se trata de una guía en profundidad de ninguna de las herramientas o patrones individuales, sino de una aproximación que permita entender rápidamente los conceptos del JavaScript moderno.

Sigue leyendo “Introducción en 10 minutos a módulos JavaScript, formatos de módulos, cargadores de módulos y empaquetadores de módulos”