Integrating Angular, React, and Vue with Aspire

Aspire sample

C# AppHost

Clone, run, and explore this sample

This sample demonstrates using the Aspire JavaScript hosting integration to configure and run client-side applications.

C#DashboardJavaScriptNode.js

View on GitHub Browse all samples

AppHost

The entry point that composes every resource and dependency in this sample's distributed application.

View on GitHub

#pragma warning disable ASPIREBROWSERLOGS001
#pragma warning disable ASPIREJAVASCRIPT001

var builder = DistributedApplication.CreateBuilder(args);

var weatherApi = builder.AddProject<Projects.AspireJavaScript_MinimalApi>("weatherapi")
    .WithExternalHttpEndpoints();

builder.AddJavaScriptApp("angular", "../AspireJavaScript.Angular", runScriptName: "start")
    .WithNpm(installCommand: "ci")
    .WithReference(weatherApi)
    .WaitFor(weatherApi)
    .WithHttpEndpoint(env: "PORT")
    .WithExternalHttpEndpoints()
    .WithBrowserLogs()
    .PublishAsStaticWebsite("/api", weatherApi, options => options.OutputPath = "dist/weather/browser");

builder.AddJavaScriptApp("react", "../AspireJavaScript.React", runScriptName: "start")
    .WithNpm(installCommand: "ci")
    .WithReference(weatherApi)
    .WaitFor(weatherApi)
    .WithEnvironment("BROWSER", "none") // Disable opening browser on npm start
    .WithHttpEndpoint(env: "PORT")
    .WithExternalHttpEndpoints()
    .WithBrowserLogs()
    .PublishAsStaticWebsite("/api", weatherApi);

builder.AddJavaScriptApp("vue", "../AspireJavaScript.Vue")
    .WithRunScript("start")
    .WithNpm(installCommand: "ci")
    .WithReference(weatherApi)
    .WaitFor(weatherApi)
    .WithHttpEndpoint(env: "PORT")
    .WithExternalHttpEndpoints()
    .WithBrowserLogs()
    .PublishAsStaticWebsite("/api", weatherApi);

builder.AddViteApp("reactvite", "../AspireJavaScript.Vite")
    .WithNpm(installCommand: "ci")
    .WithReference(weatherApi)
    .WithEnvironment("BROWSER", "none")
    .WithBrowserLogs()
    .PublishAsStaticWebsite("/api", weatherApi);

builder.Build().Run();

The app consists of four services:

AspireJavaScript.MinimalApi: This is an HTTP API that returns randomly generated weather forecast data.
AspireJavaScript.Angular: This is an Angular app that consumes the weather forecast API and displays the data in a table.
AspireJavaScript.React: This is a React app that consumes the weather forecast API and displays the data in a table.
AspireJavaScript.Vue: This is a Vue app that consumes the weather forecast API and displays the data in a table.

Pre-requisites

Running the app

If using the Aspire CLI, run aspire run from this directory.

If using VS Code, open this directory as a workspace and launch the AspireShop.AppHost project using either the Aspire or C# debuggers.

If using Visual Studio, open the solution file AspireShop.slnx and launch/debug the AspireShop.AppHost project.

If using the .NET CLI, run dotnet run from the AspireShop.AppHost directory.

Experiencing the app

Once the app is running, the Aspire dashboard will launch in your browser:

From the dashboard, you can navigate to the Angular, React, and Vue apps:

Preview

Sample screenshots

Select an image to zoom in.