Tutorial: Creación de una aplicación de Node.js y React en Visual Studio

Artículo
01/29/2025

Con Visual Studio, puede crear fácilmente un proyecto de Node.js y usar IntelliSense y otras características integradas que admiten Node.js. En este tutorial, creará un proyecto de aplicación web Node.js a partir de una plantilla de Visual Studio. A continuación, creará una aplicación sencilla con React.

En este tutorial, aprenderá a:

Creación de un proyecto de Node.js
Agregar paquetes de npm
Adición de código de React a la aplicación
Transpile JSX
Asociar el depurador

Importante

A partir de Visual Studio 2022, también puede crear un proyecto de React con el tipo de proyecto basado en la CLI recomendado. Parte de la información de este artículo solo se aplica al tipo de proyecto Node.js (.njsproj). La plantilla que se usa en este artículo ya no está disponible a partir de la versión 17.8 preview 2 de Visual Studio 2022.

Antes de empezar, aquí tiene un breve resumen de preguntas frecuentes para presentarle 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 JavaScript.
¿Qué es npm?

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

React es un marco de front-end para crear una interfaz de usuario (UI).
¿Qué es JSX?

JSX es una extensión de sintaxis de JavaScript que normalmente se usa con React para describir los elementos de la interfaz de usuario. Debe transpilar el código JSX a JavaScript puro antes de poder ejecutarlo en un navegador.
¿Qué es webpack?

Webpack agrupa archivos JavaScript para que puedan ejecutarse en un explorador y también pueden transformar o empaquetar otros recursos y recursos. Webpack puede especificar un compilador, como Babel o TypeScript, para transpilar código JSX o TypeScript a JavaScript puro.

Prerrequisitos

Este tutorial requiere los siguientes requisitos previos:

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

Si aún no ha instalado Visual Studio:
1. Vaya a la página de 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 tiene Visual Studio instalado, pero necesita la carga de trabajo Node.js:
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 de 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.

Visual Studio normalmente detecta automáticamente 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 probó con Node.js 12.6.2.

Creación de un proyecto

En primer lugar, cree un proyecto de aplicación web de Node.js.

Abra Visual Studio.
Cree un nuevo proyecto.

Presione esc para cerrar la ventana de inicio. Escriba Ctrl + Q para abrir el cuadro de búsqueda, escriba Node.jsy, a continuación, elija Aplicación web en blanco Node.js: JavaScript. (Aunque en este tutorial se usa el compilador de TypeScript, los pasos requieren que comience con la plantilla de JavaScript).

En el cuadro de diálogo que aparece, elija Crear.

Si no ve la plantilla de proyecto Aplicación web en blanco de Node.js, debe agregar la carga de trabajo Desarrollo de Node.js. Para obtener instrucciones detalladas, consulte los requisitos previos de .

Visual Studio crea la nueva solución y abre el proyecto.

(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 (o presione Alt + Entrar). 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 es una solución, que de forma predeterminada tiene el mismo nombre que el proyecto. Una solución, representada por un archivo .sln en disco, es un contenedor para uno o varios proyectos relacionados.

(3) El nodo npm muestra los paquetes npm instalados. Puede hacer clic con el botón derecho en el nodo npm para buscar e instalar paquetes npm mediante un cuadro de diálogo o instalar y actualizar paquetes mediante la configuración de package.json y hacer clic con el botón derecho en las opciones del nodo npm.

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

(5) Archivos de proyecto como server.js se muestran en el nodo del proyecto. server.js es el archivo de inicio del proyecto y es por eso que se muestra en negrita. Para establecer el archivo de inicio, haga clic con el botón derecho en un archivo en el proyecto y seleccione Establecer como Node.js archivo de inicio.

Agregar paquetes de npm

Esta aplicación requiere que los siguientes módulos npm se ejecuten correctamente:

reaccionar
react-dom
express
camino
ts-loader
TypeScript
webpack
webpack-cli

Para instalar un paquete:

En el Explorador de soluciones, haga clic con el botón derecho en el nodo npm y seleccione Instalar nuevos paquetes de NPM.
En el cuadro de diálogo Instalar nuevos paquetes de NPM, busque el paquete react y seleccione Instalar paquete para instalarlo.

En el cuadro de diálogo Instalar nuevos paquetes de npm, puede elegir instalar la versión del paquete más reciente o especificar una versión. Si decide instalar las versiones actuales, pero se produce un error inesperado más adelante, intente instalar las versiones exactas del paquete que se muestran en el paso siguiente.

La ventana salida del panel inferior de Visual Studio muestra el progreso de la instalación del paquete. Abra la ventana de salida seleccionando Ver>salida o pulsando Ctrl+Alt+O. En el campo Show output from (Mostrar salida de) de la ventana Resultados, seleccione npm.

Cuando está instalado, el paquete react aparece bajo el nodo npm en el Explorador de soluciones.

El archivo package.json del proyecto se actualiza con la nueva información del paquete, incluida la versión del paquete.

En lugar de usar la interfaz de usuario para buscar y agregar el resto de los paquetes de uno en uno, puede pegar el código de paquete necesario en package.json.

En el Explorador de soluciones, abra el archivo package.json en el editor de Visual Studio. Agregue la siguiente sección dependencies antes del final del archivo:
```
"dependencies": {
  "express": "^4.18.2",
  "path": "^0.12.7",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "ts-loader": "^9.4.2",
  "typescript": "^5.0.2",
  "webpack": "^5.76.3",
  "webpack-cli": "^5.0.1"
},
```
Si el archivo ya tiene una sección de dependencies, reemplácela por el código JSON anterior. Para obtener más información sobre el uso del archivo package.json, consulte la configuración package.json.
Presione Ctrl+S o seleccione Archivo>Guardar package.json para guardar los cambios.
En Explorador de soluciones, haga clic con el botón derecho en el nodo npm del proyecto y seleccione Instalar paquetes npm.

Este comando ejecuta el comando npm install directamente para instalar todos los paquetes enumerados en packages.json.

Seleccione la ventana Resultados del panel inferior para ver el progreso de la instalación. La instalación puede tardar unos minutos y es posible que no vea los resultados inmediatamente. Asegúrese de seleccionar npm en el campo Show output from (Mostrar salida de) de la ventana Resultados.

Después de la instalación, los módulos npm aparecen en el nodo npm del Explorador de soluciones.

Nota

También puede instalar paquetes npm mediante la línea de comandos. En el Explorador de soluciones, haga clic con el botón derecho en el nombre del proyecto y seleccione Abrir símbolo del sistema aquí. Use comandos Node.js estándar para instalar paquetes.

Agregar archivos de proyecto

A continuación, agregue cuatro archivos nuevos al proyecto.

app.tsx
webpack-config.js
index.html
tsconfig.json

Para esta aplicación sencilla, agregas los nuevos archivos en la raíz del proyecto. Para la mayoría de las aplicaciones, agregas los archivos a las subcarpetas y ajustas las referencias de ruta de acceso relativa en consecuencia.

En el Explorador de soluciones, seleccione el nombre del proyecto y presione Ctrl+Mayús+A, o haga clic con el botón derecho en el nombre del proyecto y seleccione Agregar>Nuevo elemento.

Si no ve todas las plantillas de elemento, elija Mostrar todas las plantillasy, a continuación, elija la plantilla de elemento.
En el cuadro de diálogo Agregar nuevo elemento, elija Archivo JSX de TypeScript, escriba el nombre app.tsx y seleccione Agregar o Aceptar.
Repita estos pasos para agregar un archivo javaScript de denominado webpack-config.js.
Repita estos pasos para agregar un archivo HTML de denominado index.html.
Repita estos pasos para agregar un archivo de configuración JSON de TypeScript denominado tsconfig.json.

Adición de código de aplicación

En Explorador de soluciones, abra server.js y reemplace el código existente por el código siguiente:
```
'use strict';
var path = require('path');
var express = require('express');

var app = express();

var staticPath = path.join(__dirname, '/');
app.use(express.static(staticPath));

// Allows you to set port in the project properties.
app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
    console.log('listening');
});
```
El código anterior usa Express para iniciar Node.js como servidor de aplicaciones web. El código establece el puerto en el número de puerto configurado en las propiedades del proyecto, que de forma predeterminada es 1337. Si necesita abrir las propiedades del proyecto, haga clic con el botón derecho en el nombre del proyecto en explorador de soluciones y seleccione Propiedades.

Abra app.tsx y agregue el código siguiente:

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

export class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to React!!</h1>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

El código anterior usa la sintaxis JSX y React para mostrar un mensaje.

Abra index.html y reemplace la sección body por el código siguiente:
```
<body>
    <div id="root"></div>
    
    <script src="./dist/app-bundle.js"></script>
</body>
```
Esta página HTML carga app-bundle.js, que contiene el código JSX y React transcompilado a JavaScript puro. Actualmente, app-bundle.js es un archivo vacío. En la sección siguiente, configurará las opciones para transpilar el código.

Configuración de las opciones del compilador webpack y TypeScript

A continuación, agregue código de configuración de webpack a webpack-config.js. Agregue una configuración simple de webpack que especifique un archivo de entrada, app.tsxy un archivo de salida, app-bundle.js, para agrupar y transpilar JSX en JavaScript sin formato. Para transpilar, también configuras algunas opciones del compilador de TypeScript. Este código de configuración básico es una introducción a webpack y al compilador de TypeScript.

En Explorador de soluciones, abra webpack-config.js y agregue el código siguiente.

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

El código de configuración de webpack indica a webpack que use el cargador de TypeScript para transpilar el JSX.

Abra tsconfig.json y reemplace el contenido por el código siguiente, que especifica las opciones del compilador de TypeScript:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}

El código especifica app.tsx como archivo de código fuente.

Presione Ctrl+Mayús+S o seleccione Archivo>Guardar todo para guardar todos los cambios.

Transpilar el JSX

En el Explorador de soluciones, haga clic con el botón derecho en el nombre del proyecto y seleccione Abrir símbolo del sistema aquí.
En la terminal de comandos, escriba el siguiente comando webpack:

node_modules\.bin\webpack --config webpack-config.js

La ventana del símbolo del sistema muestra el resultado.

Si ve algún error en lugar de la salida anterior, debe resolverlos antes de que la aplicación funcione. Si las versiones del paquete npm son diferentes de las versiones que especifica este tutorial, pueden provocar errores. Para corregir los errores, pruebe lo siguiente:
- Use las versiones exactas que se muestran en el paso anterior, si aún no lo ha hecho
  
  O bien, si sigue viendo errores:
- Instale las versiones más recientes de los paquetes npm haciendo clic con el botón derecho en el nodo npm en el Explorador de soluciones y seleccionando Instalar paquetes npm.
Si una o varias versiones de paquete están en desuso y producen un error, es posible que tenga que instalar una versión más reciente para corregir errores. Para obtener información sobre el uso de package.json para controlar las versiones del paquete de npm, consulte package.json configuración.
En el Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto y seleccione Agregar>Carpeta existente.
Seleccione la carpeta dist y, luego, elija Seleccionar carpeta.

Visual Studio agrega la carpeta dist, que contiene app-bundle.js y app-bundle.js.map, al proyecto.
Abra app-bundle.js para ver el código JavaScript transpilado.
Si se le pide que vuelva a cargar archivos que han sido modificados externamente, seleccione Sí a todo.

Cada vez que realice cambios en app.tsx, debe volver a ejecutar el comando webpack. Para automatizar este paso, puede agregar un script de construcción para transpilar el JSX.

Añadir un script de compilación para transpilar el JSX

Las versiones de Visual Studio a partir de Visual Studio 2019 requieren un script de compilación. En lugar de transpilar JSX en la línea de comandos, como se muestra en la sección anterior, puede transpilar JSX al compilar desde Visual Studio.

Abra package.json y agregue la sección siguiente después de la sección dependencies:
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Guarde los cambios.

Ejecución de la aplicación

En la barra de herramientas Depurar, seleccione como destino de depuración Web Server (Microsoft Edge) o Web Server (Google Chrome).

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

Se abre una ventana de consola de Node.js que muestra el puerto en el que escucha el depurador.

Visual Studio inicia la aplicación iniciando el archivo de inicio, server.js.
Cierre las ventanas del explorador y la consola.

Establecimiento de un punto de interrupción y ejecución de la aplicació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 debe suspender Visual Studio el código en ejecución. A continuación, puede observar valores de variable, comportamiento de memoria o si se está ejecutando una rama de código.

En server.js, haga clic en el margen interno a la izquierda de la declaración staticPath para establecer un punto de interrupción:
Para ejecutar la aplicación, presione F5 o seleccione Depurar>Iniciar depuración.

El depurador se detiene en el punto de interrupción establecido, con la instrucción actual resaltada. Ahora, puede inspeccionar el estado de la aplicación desplazando el puntero sobre las variables que están actualmente en el ámbito, con ventanas del depurador como Locales e Inspección.
Para seguir ejecutando la aplicación, presione F5, seleccione Continuar en la barra de herramientas Depurar o elija Depurar>Continuar.

Si desea usar las Herramientas de desarrollo de Chrome o herramientas F12 para Microsoft Edge, presione F12. Puede usar estas herramientas para examinar el DOM e interactuar con la aplicación mediante la consola de JavaScript.
Cierre las ventanas del explorador y la consola.

Establecer y alcanzar un punto de interrupción en el código React del lado del cliente

En la sección anterior se asoció el depurador al código Node.jse del lado servidor. Para realizar la asociación a puntos de interrupción y alcanzarlos en el código de React del lado cliente, debe asociar el depurador al proceso correcto. Esta es una manera de habilitar un explorador y asociar un proceso para la depuración.

Habilitación del explorador para la depuración

Puede usar Microsoft Edge o Google Chrome. Cierre todas las ventanas del explorador de destino. Para Microsoft Edge, cierre también todas las instancias de Chrome. Dado que ambos exploradores comparten la base de código chromium, apagar ambos exploradores ofrecen los mejores resultados.

Otras instancias del explorador pueden impedir que el explorador se abra con la depuración habilitada. Es posible que las extensiones del explorador impidan el modo de depuración completo. Es posible que tenga que usar el Administrador de tareas para buscar y finalizar todas las instancias de Chrome en ejecución.

Para iniciar el explorador con la depuración habilitada:

Seleccione Explorar con en la lista desplegable de la barra de herramientas Depurar.
En la pantalla Examinar con, con el explorador preferido resaltado, seleccione Agregar.
Escriba la marca --remote-debugging-port=9222 en el campo Argumentos.
Proporcione al explorador un nombre descriptivo, como Edge con depuración o Chrome con depuración y, luego, seleccione Aceptar.
En la pantalla Explorar con, seleccione Examinar.

Como alternativa, puede abrir el comando Ejecutar; para ello, haga clic con el botón derecho en el botón Inicio de Windows y escriba:

msedge --remote-debugging-port=9222

o

chrome.exe --remote-debugging-port=9222

El explorador se inicia con la depuración habilitada. La aplicación aún no se está ejecutando, por lo que la página del explorador está vacía.

Asociación del depurador al script del lado cliente

En el editor de Visual Studio, establezca un punto de interrupción en el app-bundle.js o app.tsx código fuente.
- Para app-bundle.js, establezca el punto de interrupción en la función render(). Para buscar la función render() en el archivo de app-bundle.js, presione Ctrl+F o seleccione Editar>Buscar y reemplazar>búsqueda rápiday escriba representar en el campo de búsqueda.
- Para app.tsx, establezca el punto de interrupción dentro de la función render(), en la instrucción return.
  
  Si establece el punto de interrupción en app.tsx, actualice también webpack-config.js para reemplazar el código siguiente y guarde los cambios.
  
  Reemplace este código:
```
output: {
    filename: "./app-bundle.js",
},
```
  Con este código:
```
output: {
    filename: "./app-bundle.js",
    devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
},
```
  Esta configuración solo para desarrollo permite la depuración en Visual Studio. De forma predeterminada, las referencias de webpack en el archivo de mapa de origen incluyen el prefijo webpack:///, lo que impide que Visual Studio busque el archivo de origen app.tsx. Esta configuración invalida las referencias generadas en el archivo de mapa de origen, app-bundle.js.map, al compilar la aplicación. En concreto, esta configuración cambia la referencia al archivo de origen de webpack:///./app.tsx a ./app.tsx, lo que permite la depuración.
Seleccione el explorador de destino como destino de depuración en Visual Studio y presione Ctrl+F5o seleccione Depurar>Iniciar sin depurar, para ejecutar la aplicación en el explorador.

Si creó una configuración de explorador habilitada para depuración con un nombre descriptivo, elija ese explorador como destino de depuración.

La aplicación se abre en una nueva pestaña del explorador.
Seleccione Depurar>Asociar al procesoo presione Ctrl+Alt+P.

Sugerencia

La primera vez que se asocia al proceso siguiendo estos pasos, se puede volver a asociar rápidamente al mismo proceso seleccionando Depurar>Reasociar al proceso o presionando Mayús+Alt+P.
En el cuadro de diálogo Asociar al proceso, obtendrá una lista filtrada de las instancias del explorador a las que se puede asociar.

Asegúrese de que el depurador correcto para su explorador de destino, JavaScript (Chrome) o JavaScript (Microsoft Edge - Chromium), aparezca en el campo Asociar a. Escriba chrome o edge en el cuadro de filtro para filtrar los resultados.
Seleccione el proceso del explorador con el puerto host correcto, localhost en este ejemplo. El número de puerto 1337 o localhost también puede aparecer en el campo Título de para ayudarle a seleccionar el proceso correcto.
Seleccione Asociar.

En el ejemplo siguiente se muestra una ventana Asociar al proceso para el explorador Microsoft Edge.

Sugerencia

Si el depurador no se asocia y aparece el mensaje Unable to attach to the process. An operation is not legal in the current state. (No se puede asociar al proceso. Una operación no es válida en el estado actual.), use el Administrador de tareas para cerrar todas las instancias del explorador de destino antes de iniciar el explorador en modo de depuración. Es posible que las extensiones del explorador estén en ejecución y eviten el modo de depuración completa.
Dado que el código con el punto de interrupción ya se ha ejecutado, actualice la página del explorador para alcanzar el punto de interrupción.

Dependiendo del entorno, el estado del navegador y los pasos que hayas seguido anteriormente, podrías alcanzar el punto de interrupción en app-bundle.js o su ubicación asignada en app.tsx. En cualquier caso, puede recorrer el código y examinar variables.

Mientras el depurador está en pausa, puede examinar el estado de la aplicación si mantiene el puntero sobre las variables y usa ventanas del depurador. Para ejecutar el código paso a paso, presione F11 o seleccione Depurar>Depurar paso a paso por instrucciones; también, puede presionar F10 o seleccionar Depurar>Depurar paso a paso por procedimientos. Para seguir ejecutando el código, presione F5 o seleccione Continuar. Para obtener más información sobre las funcionalidades básicas de depuración, véase Primer vistazo al depurador.
- Si no puede interrumpir el código en app.tsx, vuelva a intentarlo con Asociar al proceso para asociar el depurador como se describe en los pasos anteriores. Asegúrese de que el entorno está configurado correctamente:
  - Cierre todas las instancias del explorador, incluidas las extensiones de Chrome, mediante el Administrador de tareas. Asegúrese de iniciar el explorador en modo de depuración.
  - Asegúrese de que el archivo de mapa de origen incluye una referencia a ./app.tsx y no webpack:///./app.tsx, lo que impide que el depurador de Visual Studio busque app.tsx.
  O bien, pruebe a usar la instrucción debugger; en app.tsx o establezca puntos de interrupción en las herramientas de desarrollo de Chrome o en las herramientas F12 (si es para Microsoft Edge).
- Si no puede interrumpir el código en app-bundle.js, quite el archivo de mapa de origen, app-bundle.js.map.