Tutorial: Crear una aplicación Node.js y Express en Visual Studio

Artículo
10/07/2021
Tiempo de lectura: 7 minutos

En este tutorial sobre desarrollo en Visual Studio se usan Node.js y Express. En este tutorial, creará una sencilla aplicación web de Node.js, agregará código, explorará algunas características del IDE y ejecutará la aplicación.

En este tutorial aprenderá a:

Crear un proyecto de Node.js
Agregar algo de código
Usar IntelliSense para editar código
Ejecutar la aplicación
Alcanzar un punto de interrupción en el depurador

Antes de comenzar, esta es una sección rápida de P+F para presentar algunos conceptos clave:

¿Qué es Node.js?

Node.js es un entorno en tiempo de ejecución de JavaScript del lado servidor que ejecuta código de JavaScript.
¿Qué es npm?

Un administrador de paquetes facilita la publicación y el uso compartido de bibliotecas de código fuente de Node.js. npm es el administrador de paquetes predeterminado de Node.js. El administrador de paquetes npm simplifica la instalación, la actualización y la desinstalación de las bibliotecas.
¿Qué es Express?

Express es un marco de trabajo de aplicaciones web de servidor que Node.js usa para crear aplicaciones web. Con Express, puede usar diferentes marcos de front-end para crear una interfaz de usuario. En este tutorial se usa Pug, anteriormente llamado Jade, para su marco de front-end.

Requisitos previos

Para seguir los pasos de este tutorial, es necesario cumplir los siguientes requisitos previos:

Visual Studio con la carga de trabajo de desarrollo de Node.js instalada.

Si aún no tiene instalado Visual Studio:
1. Vaya a la página Descargas de Visual Studio para instalar Visual Studio de forma gratuita.
2. En el Instalador de Visual Studio, seleccione la carga de trabajo Desarrollo de Node.js y elija Instalar.
Si ya tiene instalado Visual Studio:
1. En Visual Studio, vaya a Herramientas > Obtener herramientas y características.
2. En el Instalador de Visual Studio, elija la carga de trabajo Desarrollo de Node.js y seleccione Modificar para descargarla e instalarla.
El entorno de ejecución de Node.js instalado:

Si no tiene instalado el entorno de ejecución de Node.js, instale la versión LTS desde el sitio web de Node.js. La versión LTS tiene la mejor compatibilidad con otros marcos y bibliotecas.

Las herramientas de Node.js de la carga de trabajo de Node.js de Visual Studio admiten las versiones de arquitectura de Node.js de 32 y 64 bits. Visual Studio solo requiere una versión y el instalador de Node.js solo admite una versión a la vez.

Normalmente, Visual Studio detecta de forma automática el entorno de ejecución de Node.js instalado. Si no es así, puede configurar el proyecto para que haga referencia al entorno de ejecución instalado:
1. Después de crear un proyecto, haga clic con el botón derecho en el nodo del proyecto y seleccione Propiedades.
2. En el panel Propiedades, establezca la ruta de acceso a Node.exe para que haga referencia a una instalación global o local de Node.js. Puede especificar la ruta de acceso a un intérprete local en cada uno de los proyectos de Node.js.

Este tutorial se ha probado con Node.js 14.17.5.

Este tutorial se ha probado con Node.js 8.10.0.

Crear un proyecto de Node.js

Visual Studio administra los archivos de una aplicación en un proyecto. El proyecto incluye código fuente, recursos y archivos de configuración.

En este tutorial, empezará con un proyecto simple que tiene el código de una aplicación Express y Node.js.

Abra Visual Studio y presione Esc para cerrar la ventana de inicio.
Presione Ctrl+Q, escriba node.js en el cuadro de búsqueda y, luego, elija Aplicación básica de Azure Node.js Express 4: JavaScript en la lista desplegable.

Si no ve la opción Aplicación básica de Azure Node.js Express 4, deberá instalar primero la carga de trabajo de desarrollo de Node.js. Para obtener instrucciones, consulte los requisitos previos.
En el cuadro de diálogo Configurar el nuevo proyecto, seleccione Crear.

Visual Studio crea la solución y el proyecto y abre este en el panel derecho. El archivo de proyecto app.js se abre en el editor en el panel izquierdo.
Examine la estructura del proyecto en el Explorador de soluciones en el panel derecho.
- En el nivel superior se encuentra la solución, (1) que, de forma predeterminada, tiene el mismo nombre que el proyecto. Una solución, representada por un archivo .sln en el disco, es un contenedor para uno o más proyectos relacionados.
- El proyecto (2), con el mismo nombre que le dio en el cuadro de diálogo Configurar el nuevo proyecto, aparece resaltado en negrita. En el sistema de archivos, el proyecto es un archivo .njsproj de la carpeta del proyecto.
  
  Para ver y establecer las propiedades del proyecto y las variables de entorno, haga clic con el botón derecho en el proyecto y seleccione Propiedades en el menú contextual. Puede trabajar con otras herramientas de desarrollo, ya que el archivo de proyecto no realiza cambios personalizados en el código fuente del proyecto de Node.js.
- El nodo npm (3) muestra los paquetes de npm instalados. Puede hacer clic con el botón derecho en el nodo npm para buscar e instalar paquetes de npm mediante un cuadro de diálogo.
  
  Puede instalar y actualizar paquetes mediante la configuración de package.json y las opciones de clic con el botón derecho en el nodo npm.
- Los archivos del proyecto (4) aparecen bajo el nodo del proyecto. El archivo de inicio del proyecto, app.js, se muestra en negrita.
  
  Puede establecer el archivo de inicio si hace clic con el botón derecho en un archivo del proyecto y selecciona Establecer como archivo de inicio de Node.js.
- npm usa el archivo package.json (5) para administrar las dependencias y las versiones de los paquetes instalados localmente. Para más información, vea Administrar paquetes de npm.
Abra el nodo npm y asegúrese de que todos los paquetes de npm necesarios están presentes.

Si algún paquete se muestra como (falta) , haga clic con el botón derecho en el nodo npm, seleccione Instalar los paquetes de NPM e instale los paquetes que faltan.

Abra Visual Studio.
Cree un nuevo proyecto.

Presione Esc para cerrar la ventana de inicio. Presione Ctrl + Q para abrir el cuadro de búsqueda, escriba Node.js, elija Create a new Basic Azure Node.js Express 4 application (Crear una aplicación básica de Azure Node.js Express 4) (JavaScript). En el cuadro de diálogo que se abre, elija Crear.

Si no ve la plantilla de proyecto Aplicación básica de Azure Node.js Express 4, debe agregar la carga de trabajo Desarrollo de Node.js. Para obtener instrucciones, consulte los requisitos previos.

Visual Studio crea la solución y abre el proyecto en el panel derecho. El archivo de proyecto app.js se abre en el editor (panel de la izquierda).

(1) El proyecto está resaltado en negrita. Tiene el nombre que le asignó en el cuadro de diálogo Nuevo proyecto. En el sistema de archivos, este proyecto se representa mediante un archivo .njsproj en la carpeta del proyecto. Para establecer propiedades y variables de entorno asociadas al proyecto, haga clic con el botón derecho en el proyecto y elija Propiedades. Puede hacer recorridos de ida y vuelta con otras herramientas de desarrollo, dado que el archivo de proyecto no realiza cambios personalizados en el origen del proyecto Node.js.

(2) En el nivel superior se encuentra una solución, que de forma predeterminada tiene el mismo nombre que el proyecto. Una solución, representada por un archivo .sln en el disco, es un contenedor para uno o más proyectos relacionados.

(3) En el nodo npm se muestran todos los paquetes npm instalados. Puede hacer clic con el botón derecho en el nodo de npm para buscar e instalar paquetes de npm mediante un cuadro de diálogo, o instalar y actualizar los paquetes con la configuración de package.json y con las opciones que aparecen al hacer clic con el botón derecho en el nodo de npm.

(4) package.json es un archivo usado por npm para administrar las dependencias y las versiones de los paquetes instalados localmente. Para más información, vea Administrar paquetes de npm.

(5) Los archivos de proyecto como app.js se muestran en el nodo del proyecto. app.js es el archivo de inicio del proyecto, por lo que aparece en negrita. Puede establecer el archivo de inicio si hace clic con el botón derecho en un archivo del proyecto y selecciona Establecer como archivo de inicio de Node.js.
Abra el nodo npm y asegúrese de que todos los paquetes de npm necesarios están presentes.

Si falta alguno (icono de signo de exclamación), haga clic con el botón derecho en el nodo npm y elija Instalar los paquetes de npm.

Abra Visual Studio.
Cree un nuevo proyecto.

En la barra de menús superior, elija Archivo > Nuevo > Proyecto. En el panel izquierdo del cuadro de diálogo Nuevo proyecto, expanda JavaScript y elija Node.js. En el panel central, elija Aplicación básica de Azure Node.js Express 4 y después haga clic en Aceptar.

Si no ve la plantilla de proyecto Aplicación básica de Azure Node.js Express 4, debe agregar la carga de trabajo Desarrollo de Node.js. Para obtener instrucciones, consulte los requisitos previos.

Visual Studio crea la solución y abre el proyecto en el panel derecho. El archivo de proyecto app.js se abre en el editor (panel de la izquierda).

(1) El proyecto está resaltado en negrita. Tiene el nombre que le asignó en el cuadro de diálogo Nuevo proyecto. En el sistema de archivos, este proyecto se representa mediante un archivo .njsproj en la carpeta del proyecto. Para establecer propiedades y variables de entorno asociadas al proyecto, haga clic con el botón derecho en el proyecto y elija Propiedades. Puede hacer recorridos de ida y vuelta con otras herramientas de desarrollo, dado que el archivo de proyecto no realiza cambios personalizados en el origen del proyecto Node.js.

(2) En el nivel superior se encuentra una solución, que de forma predeterminada tiene el mismo nombre que el proyecto. Una solución, representada por un archivo .sln en el disco, es un contenedor para uno o más proyectos relacionados.

(3) En el nodo npm se muestran todos los paquetes npm instalados. Puede hacer clic con el botón derecho en el nodo de npm para buscar e instalar paquetes de npm mediante un cuadro de diálogo, o instalar y actualizar los paquetes con la configuración de package.json y con las opciones que aparecen al hacer clic con el botón derecho en el nodo de npm.

(4) package.json es un archivo usado por npm para administrar las dependencias y las versiones de los paquetes instalados localmente. Para más información, vea Administrar paquetes de npm.

(5) Los archivos de proyecto como app.js se muestran en el nodo del proyecto. app.js es el archivo de inicio del proyecto, por lo que aparece en negrita. Puede establecer el archivo de inicio si hace clic con el botón derecho en un archivo del proyecto y selecciona Establecer como archivo de inicio de Node.js.
Abra el nodo npm y asegúrese de que todos los paquetes de npm necesarios están presentes.

Si falta alguno (icono de signo de exclamación), haga clic con el botón derecho en el nodo npm y elija Instalar los paquetes de npm.

Agregar algo de código

La aplicación utiliza Pug para el marco de trabajo front-end de JavaScript. Pug usa el código de marcado simple que se compila en HTML.

Pug está establecido como motor de visualización en app.js, con el código app.set('view engine', 'pug');.

En el Explorador de soluciones, abra la carpeta views y, después, seleccione index.pug para abrir el archivo.

Reemplace el contenido del archivo por el siguiente marcado.

extends layout

block content
  h1= title
  p Welcome to #{title}
  script.
    var f1 = function() { document.getElementById('myImage').src='#{data.item1}' }
  script.
    var f2 = function() { document.getElementById('myImage').src='#{data.item2}' }
  script.
    var f3 = function() { document.getElementById('myImage').src='#{data.item3}' }

  button(onclick='f1()') One!
  button(onclick='f2()') Two!
  button(onclick='f3()') Three!
  p
  a: img(id='myImage' height='300' width='300' src='')

El código anterior se usa genera dinámicamente una página HTML con un título y un mensaje de bienvenida. La página incluye también código que muestra una imagen que cambia cada vez que se presiona un botón.

En la carpeta routes, abra index.js.

Agregue el siguiente código antes de llamar a la función router.get:

var getData = function () {
    var data = {
        'item1': 'https://images.unsplash.com/photo-1563422156298-c778a278f9a5',
        'item2': 'https://images.unsplash.com/photo-1620173834206-c029bf322dba',
        'item3': 'https://images.unsplash.com/photo-1602491673980-73aa38de027a'
    }
    return data;
}

Este código crea un objeto de datos que se pasa a la página HTML generada dinámicamente.

Reemplace la función router.get por el código siguiente:
```
router.get('/', function (req, res) {
    res.render('index', { title: 'Express', "data" });
});
```
El código anterior establece la página actual con el objeto de enrutador de Express y presenta la página, que pasará el objeto de datos y el título a la página. El código especifica el archivo index.pug como la página que se va a cargar cuando se ejecute index.js. El código app.js, que no se muestra aquí, configura index.js como la ruta predeterminada.

Para realizar la demostración de varias características de Visual Studio, se incluye un error intencionado en la línea de código que contiene res.render. En la sección siguiente, IntelliSense le ayuda a corregir el error para que la aplicación se pueda ejecutar.

Usar IntelliSense

IntelliSense es una herramienta de Visual Studio que le ayuda a escribir código.

En index.js, en el editor de código de Visual Studio, vaya a la línea de código que contiene res.render.
Coloque el cursor después de la cadena "data" y escriba : get. IntelliSense muestra la función getData que definió anteriormente en el código. Seleccione getData.
Agregue paréntesis para convertir el código en una llamada de función: getData().
Quite la coma antes de "data". El resaltado de sintaxis verde aparece en la expresión. Mueva el puntero sobre el resaltado de sintaxis.

La última línea del mensaje indica que el intérprete de JavaScript esperaba una coma.
En el panel inferior, seleccione la pestaña Lista de errores y seleccione Compilación + IntelliSense en la lista desplegable para el tipo de problemas notificados.

En el panel, se muestra la advertencia y una descripción junto con el nombre de archivo y número de línea.
Corrija el código reemplazando la coma antes de "data".

La línea de código corregida debe ser similar a esta: res.render('index', { title: 'Express', "data": getData() });.

Ejecutar la aplicación

A continuación, ejecute la aplicación con el depurador de Visual Studio asociado. Antes de hacerlo, debe establecer un punto de interrupción.

Establecer un punto de interrupción

Los puntos de interrupción son la característica más básica y esencial para una depuración confiable. Un punto de interrupción indica dónde Visual Studio debe suspender el código en ejecución. Luego, puede observar los valores de las variables, el comportamiento de la memoria o si se está ejecutando una rama de código.

Para establecer un punto de interrupción, en index.js, haga clic en el margen interno de la izquierda antes de la siguiente línea de código:

res.render('index', { title: 'Express', "data": getData() });

Ejecución de la aplicación en modo de depuración

Seleccione un destino de depuración en la barra de herramientas de depuración, como Servidor web (Google Chrome) o Servidor web (Microsoft Edge) .

Si sabe que su destino de depuración preferido está disponible en su máquina, pero no aparece como una opción, seleccione Examinar con en la lista desplegable de destinos de depuración. Seleccione el destino de explorador predeterminado de la lista y elija Establecer como predeterminado.
Presione F5 o seleccione Depurar > Iniciar depuración para ejecutar la aplicación.

El depurador se detiene en el punto de interrupción establecido, por lo que puede inspeccionar el estado de la aplicación.
Mueva el cursor sobre getData para ver sus propiedades en una información sobre datos:

.
Presione F5 o seleccione Depurar > Continuar para seguir ejecutando la aplicación.

La aplicación se abre en un explorador. En la ventana del explorador, debe ver Express como el título y Bienvenido a Express como el primer párrafo.
Seleccione los botones ¡Uno! , ¡Dos! y ¡Tres! para mostrar diferentes imágenes.
Cierre el explorador web.

Publicación en Azure App Service (opcional)

En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Publicar.
- Si se le solicita, seleccione Agregar un perfil de publicación.
- Si se le pide que instale Azure WebJob Tools, seleccione Instalar.
En la primera pantalla Publicar, seleccione Azure y, después, Siguiente.
En la segunda pantalla Publicar, seleccione Azure App Service (Windows) y, después, Siguiente.
En la siguiente pantalla, inicie sesión en Azure si es necesario. Seleccione la suscripción de Azure, el grupo de recursos y la instancia de App Service en la que desea publicar y, a continuación, seleccione Finalizar.
- Si no tiene una suscripción de Azure, un grupo de recursos o una instancia de App Service, puede crearlos siguiendo las indicaciones de esta pantalla.
Para obtener instrucciones detalladas, vea Publicación en el sitio web de Azure con Web Deploy.
Consulte la configuración de publicación y, a continuación, seleccione Publicar.

En la ventana Salida de Visual Studio se muestra el progreso de la implementación de Azure.
Después de una implementación correcta, la aplicación se abre ejecutándose en Azure App Service en un explorador. Seleccione un botón para mostrar una imagen.

En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Publicar.
Seleccione Microsoft Azure App Service.

En el cuadro de diálogo App Service, puede iniciar sesión en la cuenta de Azure y conectarse a las suscripciones de Azure existentes.
Siga los pasos restantes para seleccionar una suscripción, elegir o crear un grupo de recursos, elegir o crear un plan de App Service y, después, siga los pasos cuando se le solicite para publicar en Azure. Para obtener instrucciones detalladas, vea Publicación en el sitio web de Azure con Web Deploy.
En la ventana Salida se muestra el progreso de la implementación en Azure.

Después de una implementación correcta, la aplicación se abre en un explorador que se ejecuta en Azure App Service. Haga clic en un botón para mostrar una imagen.