> **Source:** [aspire-with-javascript](https://github.com/microsoft/aspire-samples/tree/main/samples/aspire-with-javascript)
> **AppHost:** C# AppHost
> **Tags:** csharp, dashboard, javascript, node

# Integrating Angular, React, and Vue with Aspire

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

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

- [Aspire development environment](https://aspire.dev/get-started/prerequisites/)
- [.NET 10 SDK](https://dotnet.microsoft.com/download/dotnet/10.0)
- [Node.js](https://nodejs.org) - at least version 24.x

## 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:

![Aspire dashboard](https://raw.githubusercontent.com/dotnet/aspire-samples/main/samples/aspire-with-javascript/images/aspire-dashboard.png)

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

**Angular**

![Angular app](https://raw.githubusercontent.com/dotnet/aspire-samples/main/samples/aspire-with-javascript/images/angular-app.png)

**React**

![React app](https://raw.githubusercontent.com/dotnet/aspire-samples/main/samples/aspire-with-javascript/images/react-app.png)

**Vue**

![Vue app](https://raw.githubusercontent.com/dotnet/aspire-samples/main/samples/aspire-with-javascript/images/vue-app.png)