.NET Aspire Preview 3 — Integrating Node.Js Apps into a .Net Aspire Application

This is the continuation of my previous story , .Net Aspire Preview 3 has one of its standout features: the seamless integration of JavaScript projects, particularly Node.js applications. This advancement opens a realm of possibilities for developers looking to blend the robustness of .NET with the versatility of JavaScript frameworks.

Download and Set Up .NET Aspire Preview 3

If you’re working with .NET Aspire on Windows using Visual Studio, start by ensuring you have the latest Visual Studio 2022 Preview installed — version 17.10.0 Preview 1.0 as of this writing. During the installation or update process, make sure to include the .NET Aspire SDK (Preview) component.

To update the workload, run:

dotnet workload update

To install the Aspire workload, use:

dotnet workload install aspire

After updating run dotnet workload list to see the updated version

For this demonstration I have a minimal API that returns randomly generated weather forecast data. I have also The .NET Aspire Application , a basic template that includes the AppHost and ServiceDefaults projects.

The project structure should look like this

Integrating a React Application:

To incorporate a React project, start by generating a new React app using the command:

npx create-react-app my-weather-app

For this demonstration, I’ve utilized a sample application sourced from the official repository of .NET Aspire samples, AspireWithJavaScript/AspireJavaScript.React project available on GitHub.

To fuse the React app with .NET Aspire, we insert the AddNpmApp in the Program.cs file within the AppHost project, as shown below:

var builder = DistributedApplication.CreateBuilder(args);

var weatherApi = builder.AddProject<Projects.Aspire_preview3_Api>("aspire-preview3-api");

builder.AddNpmApp("react-weather", "../../AspireJavaScript.React")
    .WithReference(weatherApi)
    .WithServiceBinding(containerPort: 3001, scheme: "http", env: "PORT")
    .AsDockerfileInManifest();

builder.Build().Run();

Navigating the New Dashboard

Upon setting the Aspire-preview3-distributed.AppHost as the startup project and launching it, the dashboard will automatically open in your browser, serving as a central hub for monitoring and managing your integrated application.

Resources Page Overview :

The Resources page, acting as the .NET Aspire dashboard’s home page, displays the following

• apiservice: A back-end API using Minimal APIs.
• Executables: Identified as stand-alone processes within the ecosystem. For our demonstration, this includes the React UI app

Monitoring Page Overview :

Monitoring page provides a variety of ways to view logs, traces, and metrics for our app

Summary:

This guide is designed to facilitate a smooth integration of Node.js applications into the .NET Aspire ecosystem, leveraging the strengths of both platforms to create dynamic and powerful web applications.

Link for this project can be found here

References:

.NET Aspire preview 3 - .NET Aspire

.NET Aspire dashboard overview - .NET Aspire

https://github.com/dotnet/aspire/discussions/2205