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

  • Artículo

En este artículo, aprenderá a usar Visual Studio para crear una aplicación web sencilla Node.js que use el marco Express.

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 utilizació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, actualización y desinstalación de 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, hay muchas maneras diferentes de crear una interfaz de usuario. La implementación proporcionada en este tutorial usa el motor de plantillas predeterminado del generador de aplicaciones Express, denominado Pug, para representar el front-end.

Requisitos previos

Asegúrese de instalar lo siguiente:

  • Versión 17.4 o una posterior de Visual Studio 2022 con la carga de trabajo desarrollo web y ASP.NET instalada. Vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita. Si tiene que instalar la carga de trabajo y ya tiene Visual Studio, vaya a Herramientas>Get Tools and Features... (Obtener herramientas y características…) que abre el Instalador de Visual Studio. Elija la carga de trabajo Desarrollo de ASP.NET y web y después elija Modificar.
  • npm (https://www.npmjs.com/), que se incluye con Node.js
  • npx (https://www.npmjs.com/package/npx)

Creación de la aplicación

  1. En la ventana de inicio (elija Archivo>Ventana de inicio para abrirla), seleccione Crear un nuevo proyecto.

    Create a new project

  2. Busque Express en la barra de búsqueda de la parte superior y seleccione JavaScript Express Application.

    Choose a template

  3. Asigne un nombre al proyecto y a la solución.

Ver las propiedades del proyecto

La configuración predeterminada del proyecto permite compilarlo y depurarlo. Sin embargo, si necesita cambiar la configuración, haga clic con el botón derecho en el proyecto en Explorador de soluciones, seleccione Propiedades y, a continuación, vaya a la sección Compilación o Depuración.

Nota:

El archivo launch.json almacena la configuración de inicio asociada al botón Iniciar en la barra de herramientas de depuración. Actualmente, launch.json debe encontrarse en la carpeta .vscode.

Compilación del proyecto

Elija Compilar>Compilar solución para compilar el proyecto.

Comenzar la aplicación

Presione F5 o seleccione el botón Iniciar, situado en la parte superior de la ventana, y verá un símbolo del sistema:

  • npm que ejecuta el comando ./bin/www de Node.

Nota

Compruebe la salida de la consola para ver los mensajes, como un mensaje que le indica que actualice la versión de Node.js.

A continuación, se mostrará la aplicación Express base.

Depurar la aplicación

Ahora veremos un par de maneras de depurar la aplicación.

En primer lugar, si la aplicación sigue en ejecución, presione Mayús + F5 o seleccione el botón de detención rojo en la parte superior de la ventana para detener la sesión actual. Es posible que observe que al detener la sesión se cierra el explorador que muestra la aplicación, pero deja atrás la ventana del símbolo del sistema que ejecuta el proceso de nodo. Por ahora, continúe y cierre los símbolos del sistema que queden. Más adelante en este artículo, se describe por qué es posible que desee dejar el proceso de nodo en ejecución.

Depuración del proceso de nodo

En la lista desplegable situada junto al botón Inicio, debería ver las siguientes opciones de inicio:

  • localhost (Edge)
  • localhost (Chrome)
  • Depuración del entorno de desarrollo
  • Inicio de nodo y explorador

Continúe y seleccione la opción Iniciar nodo y explorador. Ahora, antes de presionar F5 o volver a seleccionar el botón Inicio, establezca un punto de interrupción en index.js (en la carpeta routes) seleccionando el margen izquierdo antes de la siguiente línea de código: res.render('index', { title: 'Express' });

Sugerencia

También puede colocar el cursor en una línea de código y presionar F9 para alternar el punto de interrupción de esa línea.

A continuación, presione F5 o seleccione Depurar>Iniciar depuración para depurar la aplicación.

Debería ver la pausa del depurador en el punto de interrupción que acaba de establecer. Mientras está en pausa, puede inspeccionar el estado de la aplicación. Al mantener el puntero sobre las variables, podrá examinar sus propiedades.

Cuando haya terminado de inspeccionar el estado, presione F5 para continuar, y la aplicación debe cargarse según lo previsto.

Esta vez, si se alcanza la parada, observará que se cierran tanto el explorador como las ventanas del símbolo del sistema. Para ver por qué, eche un vistazo más de cerca a launch.json.

Descripción de archivo launch.json

launch.json se encuentra actualmente en la carpeta .vscode. Si no puede ver la carpeta .vscode en el Explorador de soluciones, seleccione Mostrar todos los archivos.

Si ha trabajado antes con Visual Studio Code, el archivo launch.json le resultará será familiar. launch.json aquí funciona de la misma manera que en Visual Studio Code para indicar las configuraciones de inicio que se usan para la depuración. Cada entrada especifica uno o varios destinos que se van a depurar.

Las dos primeras entradas son entradas del explorador y deben tener un aspecto similar al siguiente:

    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }

Puede ver en las entradas anteriores que type se establece en un tipo de explorador. Si inicia solo con un tipo de explorador como destino de depuración único, Visual Studio depurará solo el proceso del explorador de front-end y el proceso de nodo se iniciará sin un depurador asociado, lo que significa que los puntos de interrupción establecidos en el proceso de nodo no se enlazarán.

Al detener la sesión, el proceso de nodo también continuará ejecutándose. Se deja en ejecución intencionadamente cuando un explorador es el destino de depuración, ya que si el trabajo se realiza únicamente en el front-end, hacer que el proceso de back-end se ejecute continuamente facilita el flujo de trabajo de desarrollo.

Al principio de esta sección, cerró la ventana del símbolo del sistema restante para establecer puntos de interrupción en el proceso de nodo. Para que el proceso de nodo sea depurable, debe reiniciarse con el depurador asociado. Si se deja en ejecución un proceso de nodo no depurable, se producirá un error al intentar iniciar el proceso de nodo en modo de depuración (sin volver a configurar el puerto).

Nota:

Actualmente, edge y chrome son los únicos tipos de explorador admitidos para la depuración.

La tercera entrada de launch.json especifica node como el tipo de depuración y debe tener un aspecto similar al siguiente:

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

Esta entrada iniciará solo el proceso de nodo en modo de depuración. No se iniciará ningún explorador.

La cuarta entrada proporcionada en "launch.json* es la siguiente configuración de inicio compuesta.

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

Esta configuración compuesta es la misma que una configuración de inicio compuesto de vscode y seleccionarla permite depurar tanto el front-end como el back-end. Puede ver que simplemente hace referencia a las configuraciones de inicio individuales para los procesos de nodo y explorador.

Hay muchos otros atributos que puede usar en una configuración de inicio. Por ejemplo, puede ocultar una configuración del desplegable, pero que siga siendo posible hacer referencia a ella, estableciendo el atributo hidden del objeto presentation en true.

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

Haga clic en Opciones para obtener una lista de atributos que puede usar para mejorar la experiencia de depuración. Tenga en cuenta que, en este momento, solo se admiten las configuraciones de inicio. Cualquier intento de usar una configuración de asociación producirá un error de implementación.