Add .NET Aspire to Existing Web App

Background

.NET Aspire is pretty cool.

Riding the wave of AI hype, I decided to write my own AI Chat completion web application.

Microsoft did a great job documenting how you can get up and running with your own AI chat application in a few dozen lines of code.

Personally, though, I don't like feeding the beast of a cloud based LLM like OpenAI or Azure OpenAI because writing (to me) is actualized thinking and I'm not about to send my thoughts to a 3rd party.

So, long story, short, I wanted to run a local LLM where I know the messages I send to a chat completion services stay with me.

Local LLM Chat

Luckily, Microsoft is quick to understand this and provides great guidance on how to build a chat app with a local LLM.

The linked tutorial from Microsoft has you running a 3rd party thing called Ollama which provides a RESTful API to connect to a LLM running on your machine.

Ollama is a great tool for finding, downloading and running local LLM models.

They even have a docker container. And as long as it's running I can point my chat app to it and my chat mesages stay local.

Opinionated Orchestration

But writing software that depends on a separate 3rd party running service is a pain.

Enter .NET Aspire, a local dev orchestration framework for cloud native / microservice based systems to improve the developer experience.

In a way, you can think of Ollama as a microservice that my local chat application can utilize.

So adding .NET Aspire to my project is a natural next step.

It is super easy.

Implementation

Start by adding the .NET Aspire App Host project to your solution.

You'll see the AppHost project added to your solution with a Program.cs file you can use to start orchestrating parts of your app.

First, be sure to add a project reference to your web project in your AppHost project.

Open the Program.cs file in the AppHost project, and add a reference to your project.

In my chat app, SidekicksOCWeb is the project I want to start up with the .NET Aspire AppHost runs.

The fully qualified name is Sidekicks.MultiApp.OCWeb.

A cool thing that Visual Studio intellisense does is give you a type name for your project. My web project is named Sidekicks.MultiApp.OCWeb and .NET Aspire generates a type Sidekicks_MultiApp_OCWeb (as seen above) so it is easily referenced.

Here is the code for the Program.cs file of the AppHost project.

using Projects;

var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Sidekicks_MultiApp_OCWeb>("SidekicksOCWeb");

var app = builder.Build();

await app.RunAsync();

And be sure to add the reference to your web project from your AppHost project.

Run it

Now is a good time to check that it's all working.

Set your start up project to be your AppHost project. One way to do this is to right-click your AppHost project and select select as startup. Another way is to select your AppHost project from the startup project dropdown.

Now go ahead and run your app.

The first thing you'll see is the .NET Aspire startup log console window.

You should also see the .NET Aspire Dashboard open in a browser as well.

The Resources tab shows you your web project and any other resources you have for your integrated system.

Go ahead and click through all the stuff in the .NET Aspire Dashboard.

The Console tab gives you logging from your web app.

The Structured, Traces and Metrics tabs look to be empty though. So let's go ahead and fix that.

.NET Aspire ServiceDefaults

Stop your application and add a new project to your solution.

Use the .NET Aspire ServiceDefaults project template.

You'll get a new project with a single static type called Extensions that you can use in your web application project.

Reference the ServiceDefaults project from your web application project.

Then in your Program.cs file, just add builder.AddServiceDefaults() right after your WebApplication.CreateBuilder(app) call like so.

var builder = WebApplication.CreateBuilder(args);
builder.AddServiceDefaults();

Go ahead an run your application now and see that Structured logs tab is now populating with information.

Out of the box!

Then, as you start sending web requests to your web applicaiton, the Traces tab will fill in with information about your web traffic calls.

In the Metrics tab, select your web project resource and see the rich information there as well.

Resource URLs

One last thing to do is to set the URL for your project resource. In my case it's SidekicksOCWeb.

See how the URLs column is empty.

I tried many different searches for "how to display my web project url in .NET Aspire dashboard" or ".NET Aspire dashboard missing web project's URL" but nothing came up.

Nevertheless, I was able to compare a working Sample to my application and figured out that I need to do something in my web application project to get the URLs to show up.

Navigate to you web projects Properties->launchSettings.json file, and add entries for http and https if you don't have them.

Mine originally looked like this.

And here are the missing entries for http and https, ensuring that the applicationUrl value is my web application's actual launch URLs.

    "http": {
     "commandName": "Project",
     "dotnetRunMessages": true,
     "launchBrowser": true,
     "applicationUrl": "http://localhost:5000",
     "environmentVariables": {
       "ASPNETCORE_ENVIRONMENT": "Development"
     }
   },
   "https": {
     "commandName": "Project",
     "dotnetRunMessages": true,
     "launchBrowser": true,
     "applicationUrl": "https://localhost:5001;http://localhost:5000",
     "environmentVariables": {
       "ASPNETCORE_ENVIRONMENT": "Development"
     }
   }

The updated launchSettings.json file looks like this.

After making that change, go ahead and run the solution and you'll see that the URLs are now correctly populated in the .NET Aspire Dashboard.

Recap, Next Steps

And that is all there is to adding .NET Aspire to your existing web application.

Next, I'll show how to add an Ollama resource to .NET Aspire and then call it from my existing web application.

This is where .NET Aspire really shines.

Stay tuned.

Fun with .NET Aspire

Adding it to an existing web app