Tutorial: Creación de una aplicación de ASP.NET Core con React en Visual Studio

En este artículo, aprenderá a compilar un proyecto de ASP.NET Core para que actúe como back-end de API y un proyecto de React que actúe como la interfaz de usuario.

Actualmente, Visual Studio incluye plantillas de aplicación de página única (SPA) de ASP.NET Core que admiten Angular y React. Las plantillas proporcionan una carpeta de aplicación cliente integrada en los proyectos de ASP.NET Core que contiene los archivos base y las carpetas de cada marco.

A partir de Visual Studio 2022 Preview 2, puede usar el método descrito en este artículo para crear aplicaciones de página única de ASP.NET Core que:

• Colocan la aplicación cliente en un proyecto independiente, fuera del de ASP.NET Core
• Crean el proyecto de cliente en función de la CLI del marco instalado en el equipo

Requisitos previos

Asegúrese de tener instalado lo siguiente:

• Visual Studio 2022 Preview 2 o una versión posterior con la carga de trabajo de ASP.NET y desarrollo web. 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/)
• npx (https://www.npmjs.com/package/npx)

Creación de la aplicación de front-end

1. En el cuadro de diálogo Nuevo proyecto, seleccione Crear un proyecto nuevo.

   

2. Busque React en la barra de búsqueda de la parte superior y, después, seleccione Standalone JavaScript React Template (Plantilla React de JavaScript independiente). (La plantilla React TypeScript independiente no se admite actualmente en este tutorial).

   

3. Asigne un nombre al proyecto y a la solución. Cuando llegue a la ventana Información adicional, asegúrese de seleccionar la opción Add integration for Empty ASP.NET Web API Project (Agregar integración para el proyecto de API web de ASP.NET vacío). Esta opción agrega archivos a la plantilla de React para que más adelante se pueda enlazar con el proyecto de ASP.NET Core.

   

   Una vez que se haya creado el proyecto, verá algunos archivos nuevos y modificados:

   • aspnetcore-https.js
   • aspnetcore-react.js
   • setupProxy.js
   • App.js (modificado)
   • App.test.js (modificado)

Creación de la aplicación de back-end

1. En el Explorador de soluciones, haga clic con el botón derecho en el nombre de la solución, mantenga el mouse sobre Agregar y, luego, seleccione Nuevo proyecto.

   

2. Busque y seleccione el proyecto API web de ASP.NET Core.

   

3. Asigne un nombre al proyecto y a la solución. Cuando llegue a la ventana Información adicional, seleccione .NET 6.0 como plataforma de destino.

   Una vez que se haya creado el proyecto, el Explorador de soluciones será similar al siguiente:

   

Establecimiento de las propiedades del proyecto

1. Haga clic con el botón derecho en el proyecto de ASP.NET Core proyecto y elija Propiedades.

   

2. Vaya al menú Depurar y seleccione la opción Open debug launch profiles UI (Abrir la interfaz de usuario de perfiles de inicio de depuración). Desactive la opción Iniciar explorador.

   

3. A continuación, haga clic con el botón derecho en el proyecto de React, seleccione el menú Propiedades y vaya a la sección Depuración. Cambie el Depurador para iniciar por la opción launch.json.

   

Establecer el proyecto de inicio

1. Haga clic con el botón derecho en la solución y seleccione Establecer proyecto de inicio. Cambie el proyecto de inicio de Proyecto de inicio único a Varios proyectos de inicio. Seleccione Iniciar para la acción de cada proyecto.

2. A continuación, seleccione el proyecto de back-end y muévalo por encima del front-end, para que se inicie primero.

   

Iniciar el proyecto

1. Antes de iniciar el proyecto, asegúrese de que los números de puerto coinciden. Vaya al archivo launchSettings.json en el proyecto ASP.NET Core (en la carpeta Propiedades). Obtenga el número de puerto de la propiedad applicationUrl.

   Si hay varias propiedades applicationUrl, busque una con un punto de conexión https. Debe tener un aspecto similar a https://localhost:7049.

2. Después, vaya al archivo setupProxy.js del proyecto de React (busque en la carpeta src). Actualice la propiedad de destino para que coincida con la propiedad applicationUrl en launchSettings.json.

3. Para iniciar el proyecto, presione F5 o seleccione el botón Iniciar situado en la parte superior de la ventana. Verá que aparecen dos símbolos del sistema:

• El proyecto de API de ASP.NET Core en ejecución
• La ejecución del comando react-scripts start en npm

Debería ver que aparece una aplicación de React, que se rellena mediante la API.

Solución de problemas

Puede ver el siguiente error:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Si ve este problema, lo más probable es que el front-end se haya iniciado antes que el back-end. Una vez que vea el símbolo del sistema del back-end en funcionamiento, solo tiene que actualizar la aplicación de React en el explorador.