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

  • Artículo

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.

Puede usar el método descrito en este artículo para crear aplicaciones de página única de ASP.NET Core que hacen lo siguiente:

  • 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

Nota:

En este artículo se describe el proceso de creación de proyectos mediante la plantilla actualizada de Visual Studio 2022, versión 17.8, que usa la CLI de Vite.

Requisitos previos

  • Versión 17.8 o posterior de Visual Studio 2022 con la carga de trabajo de 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 de front-end

  1. En la ventana Inicio, seleccione Crear un proyecto.

    Screenshot showing Create a new project.

  2. Busque React en la barra de búsqueda de la parte superior y, después, seleccione React and ASP.NET Core (Preview) (React y ASP.NET Core (versión preliminar)). Esta es una plantilla de JavaScript.

    Screenshot showing choosing a template.

  3. Asigne el nombre ReactWithASP al proyecto y luego seleccione Crear.

    El Explorador de soluciones muestra la siguiente información del proyecto:

    Screenshot showing Solution Explorer.

    En comparación con la plantilla de React independiente, verá algunos archivos nuevos y modificados para la integración con ASP.NET Core:

    • vite.config.js
    • App.js (modificado)
    • App.test.js (modificado)

  4. Seleccione un explorador instalado en la barra de herramientas Depurar, como Chrome o Microsoft Edge.

    Si el explorador que desea aún no está instalado, instálelo primero y selecciónelo.

Establecimiento de las propiedades del proyecto

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto ReactWithASP.Server y elija Propiedades.

    Screenshot showing Open project properties.

  2. En la página Propiedades, abra la pestaña Depurar y seleccione la opción Abrir la interfaz de usuario de perfiles de inicio de depuración. Desactive la opción Iniciar explorador del perfil denominado después del proyecto ASP.NET Core (o https, si está presente).

    Screenshot showing Debug launch profiles UI.

    Este valor impide abrir la página web con los datos meteorológicos de origen.

    Nota:

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

Iniciar el proyecto

Para iniciar la aplicación, presione F5 o seleccione el botón Iniciar situado en la parte superior de la ventana. Aparecen dos símbolos del sistema:

  • El proyecto de API de ASP.NET Core en ejecución

  • La CLI de Vite que muestra un mensaje como VITE v4.4.9 ready in 780 ms

    Nota:

    Compruebe los mensajes en la salida de la consola. Por ejemplo, podría haber un mensaje para actualizar Node.js.

Aparece la aplicación React, rellenada a través de la API. Si no ve la aplicación, consulte Solución de problemas.

Publicación del proyecto

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto ReactWithASP.Server y seleccione Agregar>Referencia del proyecto.

    Asegúrese de que el proyecto reactwithasp.client está seleccionado.

  2. Elija Aceptar.

  3. Haga clic con el botón derecho en el proyecto de ASP.NET Core de nuevo y elija Editar archivo de proyecto.

    Se abrirá el archivo .csproj para el proyecto.

  4. En el archivo .csproj, asegúrese de la referencia del proyecto incluye un elemento <ReferenceOutputAssembly> con el valor establecido en false.

    Esta referencia debe ser similar a la siguiente.

     <ProjectReference Include="..\reactwithasp.client\reactwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

  5. Haga clic con el botón derecho en el proyecto ASP.NET Core y elija Volver a cargar proyecto si la opción está disponible.

  6. En Program.cs, asegúrese de que el código siguiente está presente.

    app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

  7. Para publicar, haga clic con el botón derecho en el proyecto de ASP.NET Core, elija Publicar y seleccione las opciones que coincidan con el escenario de publicación deseado, como Azure, publicar en una carpeta, etc.

    El proceso de publicación tarda más tiempo que en un proyecto de ASP.NET Core, ya que el comando npm run build se invoca al publicar. BuildCommand ejecuta npm run build de forma predeterminada.

Solución de problemas

Error de proxy

Puede ver el siguiente error:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:7183 (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.

Comprobación de puertos

Si los datos meteorológicos no se cargan correctamente, es posible que también deba comprobar que los puertos son correctos.

  1. Asegúrese de que los números de puerto coinciden. Vaya al archivo launchSettings.json en el proyecto ASP.NET Core ReactWithASP.Server (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. Tiene un aspecto similar a https://localhost:7183.

  2. Abra el archivo vite.config.js para el proyecto de React. Actualice la propiedad target para que coincida con la propiedad applicationUrl en launchSettings.json. El valor actualizado es similar al siguiente:

    target: 'https://localhost:7183/',

Error de privacidad

Puede ver el siguiente error de certificado:

Your connection isn't private

Intente eliminar los certificados de React de %appdata%\local\asp.net\https o %appdata%\roaming\asp.net\httpsy vuelva a intentarlo.

Pasos siguientes

Para obtener más información sobre las aplicaciones SPA en ASP.NET Core, consulte la sección React en Desarrollo de aplicaciones de página única. El artículo en el vínculo proporciona contexto adicional para archivos de proyecto como aspnetcore-https.js, aunque los detalles de la implementación son diferentes en función de las diferencias de plantilla. Por ejemplo, en lugar de una carpeta ClientApp, los archivos React se encuentran en un proyecto independiente.

A fin de obtener información específica de MSBuild para el proyecto de cliente, vea Propiedades de MSBuild para JSPS.