Haz que tu frontend respire y ASPIRE

Jorge Fernández

13 de agosto de 2025

¿Qué es esto que tanto vemos en multitud de demos y charlas?, vamos a una charla sobre tal conectividad y vemos que por defecto temenos Aspire, ¿pero sabes realmente que es?

Aspire es un conjunto de herramientas de código abierto desarrollado por Microsoft para facilitar la creación, configuración y observabilidad de aplicaciones distribuidas (como microservicios) en .NET. Se presentó por primera vez como parte de .NET 8.

Orquestar aplicaciones distribuidas en desarrollo, es decir, varios proyectos (APIs, workers, colas, bases de datos, etc.).
Configurar dependencias fácilmente (por ejemplo, Redis, PostgreSQL, MongoDB, etc.).
Proporcionar una interfaz web centralizada para ver todos los servicios (Dashboard).
Agregar telemetría y observabilidad (OpenTelemetry) sin fricción.

Esta compuesto por Dashboard, AppHost y Components

Aspire Dashboard: Una interfaz web para visualizar tus servicios, sus logs, estado de salud, trazas y dependencias.
Aspire AppHost: Un proyecto especial que lanza y orquesta todos los servicios de tu solución durante el desarrollo.
Aspire Components: Paquetes NuGet que agregan servicios de terceros (como Redis, SQL Server, etc.) fácilmente, con su configuración lista para usar.

¿Cuando usar Aspire?

Si estás desarrollando microservicios en .NET.
Si quieres facilidad para levantar entornos de desarrollo completos.
Si necesitas visibilidad (observabilidad) sin mucha configuración manual.

Hasta hace muy poco todos estos servicios que levantábamos practicamente eran endpoint API REST, o functions, es decir nos limitábamos a backend o al major de los casos una aplicacion MVC, donde podíamos tener su frontend ya sea Razor, Blazor controlado.

Pero y ¿ que hacemos con la gran comunidad de NodeJS, que hacemos con la multitud interminable de librerías y frameworks de JS ? (Es posible que mientras estoy escribiendo esta entrada haya salido alguno nuevo) son muchos muchísimos, pero gran mayoria tienen en común su origen en NodeJS.

Desde Aspire se nos da la posibilidad de poder gestionar culaquier entorno creado con NodeJS y Vite.

Vite es una herramienta de desarrollo frontend moderna creada por Evan You (el creador de Vue.js) que se utiliza para construir aplicaciones web de forma rápida y eficiente. Su nombre viene del francés vite, que significa «rápido», y ese es precisamente su enfoque principal: velocidad.

Que librerias/frameworks podemos usar para acoplarlas a nuestro Aspire.

Figura 1: Ya sea en sus versions JS o TS (Siempre que esten disponibles).

¿Cómo hacemos esto?

Lo primero que temenos que hacer es instalarnos Vite si es que no lo temenos, usando nuestro Visual Studio Code:

Asegúrate de tener instalado:

Node.js (versión recomendada LTS): https://nodejs.org/
Visual Studio Code: https://code.visualstudio.com/

Crea un nuevo proyecto con Vite

En el terminal, ejecuta:

npm create vite@latest

Te debería salir una imagen tal y como aparece en la figura 1, donde deberias seleccionar que libreria quieres usar y dado el caso si lo necesitas con JS,TS o bien que forma de gestionar las hojas de estilos.

Creamos el proyecto y una vez instalado, nos colocamos en su directorio y lanzamos en consola o terminal:

cd Proyecto
npm install

En la solución propuesta se han creado proyectos de Vue, React, Angular, Vanilla

Una vez tengamos nuestros frontends creados, debemos informar de alguna manera a nuestro AppHost (Aspire) que tiene mas “cositas” para utilizar.

Si buscamos en documentación nos dirá que deberiamos enlazar como proyecto estático o externo, pero no es necesario, tenemos una opción mejor, con Aspire, 9.4 (Para instalarlo es necesario usar en el momento de redactar esta entrada paquetes pre-release)

builder.AddExternalProject("frontend", "../frontend")
    .WithServiceBinding("http", port: 5137)
    .WithLaunchCommand("npm run dev");

Pero no, gracias a la version Aspire 9.4, podemos hacerlo aún mas sencillo.

Dentro de nuestro proyecto Aspire, y sobre el AppHost debemos instalar la siguiente dependencia:

dotnet add package Aspire.Extensions.Vite

Una vez hecho esto, vamos a explicar que hacer con cada versión de front por separado, ya que su configuración interna no es la misma.

Para el caso de React, asegurate que tienes un fichero, si no es el caso lo creas vite.config.ts que contenga

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

Si no existe el fichero lo creais, además asegurate que el fichero package.json tenga esta entrada:

"scripts": {
  "dev": "vite"
}

Lo normal es que tenga más, no quites el resto, simplemente asegurate que le añades una referencia a vite desde -> dev

Ahora en tu AppHost de Aspire, tenemos que conectar nuestro proyecto para que sea capaz de levantarlo y gestionarlo, lo hacemos de la siguiente manera:

builder.AddViteApp(name: "frontend-react", workingDirectory: "../src/frontend-react")
    .WithReference(apiService)
    .WaitFor(apiService)
    .WithNpmPackageInstallation();

Es decir, ahora nuestro Aspire 9.4 nos da la opcion de añadir un AddViteApp para gestionar las diferentes entradas que sean del tipo NodeJS, le diremos el nombre con el que queremos que aparezaca y la ruta hacia el raiz del proyecto (en este caso el de React).

En el caso de Angular tenermos que crea o modificar nuestro fichero vite.config.ts tal que asi (si no existe se crea)

import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [angular(), tsconfigPaths()],
  server: { port: 4200 },
});

Importante, también es necesario crear un punto de entrada, añadiendo en el raiz de nuestro proyecto (Angular) un fichero index.html, tal que así:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Angular con Vite</title>
</head>
<body>
  <app-root></app-root>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

Posteriormente en nuestro Apphost añadiriamos la entrada correspondiente al proyecto de Angular.

builder.AddViteApp(name: "frontend-angular", workingDirectory: "../src/frontend-angular")
    .WithReference(apiService)
    .WaitFor(apiService)
    .WithNpmPackageInstallation();

Vue & Vanilla

En el caso de Vue y Vanilla, sólo temenos que agregar en nuestro Apphost las entradas correspondientes

builder.AddViteApp(name: "frontend-vue", workingDirectory: "../src/frontend-vue")
    .WithReference(apiService)
    .WaitFor(apiService)
    .WithNpmPackageInstallation();

builder.AddViteApp(name: "frontend-vanilla", workingDirectory: "../src/frontend-vanilla")
    .WithReference(apiService)
    .WaitFor(apiService)
    .WithNpmPackageInstallation();

Quedando un bonito panel de Aspire, con los 4 «Frontends» conectados