Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/1.posts/64.manage-dotnet-versions.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ You can then uninstall .NET versions using the `dotnet-core-uninstall remove` co

If you are using Visual Studio, updating it to the latest version will automatically update the .NET versions too. You can also use the installer to add specific .NET versions in the individual components section.

![The image shows the Visual Studio Installer interface, focusing on the "Individual components" tab. Several .NET runtimes and SDKs are listed with checkboxes. Among them, .NET 6.0 Runtime (Long Term Support), .NET 7.0 Runtime, .NET 8.0 Runtime (Long Term Support), .NET 9.0 Runtime, and .NET Aspire SDK are checked. Some runtimes are marked as "Out of support."](/posts/images/64.dotnet-versions-3.png){.rounded-lg.mx-auto }
![The image shows the Visual Studio Installer interface, focusing on the "Individual components" tab. Several .NET runtimes and SDKs are listed with checkboxes. Among them, .NET 6.0 Runtime (Long Term Support), .NET 7.0 Runtime, .NET 8.0 Runtime (Long Term Support), .NET 9.0 Runtime, and Aspire SDK are checked. Some runtimes are marked as "Out of support."](/posts/images/64.dotnet-versions-3.png){.rounded-lg.mx-auto }

## 4 - Use a package manager like winget

Expand Down
2 changes: 1 addition & 1 deletion content/1.posts/66.developer-experience-thoughts.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@ With [Pulumi](https://www.pulumi.com/product/infrastructure-as-code/) you can au

I’m not saying you should use these technologies, it depends on your context and preferences. These are just 2 examples of technologies that I love, partly due to their developer experience and why it matters.

So, what’s next ? I want to start a new series of articles “.NET Aspirations” talking about [.NET Aspire](https://learn.microsoft.com/en-us/dotnet/aspire/get-started/aspire-overview?wt.mc_id=MVP_430820). .NET Aspire primarily aims at improving the local development experience when developing modern .NET applications (distributed or not). That seems an interesting topic to keep talking about developer experience. See you in the next article, and keep learning.
So, what’s next? I want to start a new series of articles “Aspirations” talking about [Aspire](https://learn.microsoft.com/en-us/dotnet/aspire/get-started/aspire-overview?wt.mc_id=MVP_430820). Aspire primarily aims at improving the local development experience when developing modern .NET applications (distributed or not). That seems an interesting topic to keep talking about developer experience. See you in the next article, and keep learning.
2 changes: 1 addition & 1 deletion content/1.posts/67.aspnetcore-with-nuxt.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,6 @@ Here are the weather forecasts retrieved from the API and displayed in the Front

![A table showing dates with weather summaries and temperatures in Celsius and Fahrenheit.](/posts/images/67.temperatures.png){.rounded-lg.mx-auto}

Nothing fancy, but I hope this gives you a good understanding of how we can integrate an ASP.NET Core API with a Nuxt front end. Not everything is perfect, we have the URL of the API hardcoded in the Nuxt configuration, and we have to launch the API and the front end separately. In an upcoming article, we will explore how to use .NET Aspire to improve the developer experience.
Nothing fancy, but I hope this gives you a good understanding of how we can integrate an ASP.NET Core API with a Nuxt front end. Not everything is perfect, we have the URL of the API hardcoded in the Nuxt configuration, and we have to launch the API and the front end separately. In an upcoming article, we will explore how to use Aspire to improve the developer experience.

You can find the complete source code used for this article in this [GitHub repository](https://github.com/TechWatching/AspnetWithNuxt/tree/initial-without-aspire).
34 changes: 17 additions & 17 deletions content/1.posts/69.aspire-tailor-to-your-stack.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: ".NET Aspirations - Tailor It To Your Stack"
description: "Using .NET Aspire with a Nuxt front end"
title: "Aspirations - Tailor It To Your Stack"
description: "Using Aspire with a Nuxt front end"
date: 2025-03-02
image:
src: /images/aspire_1.webp
Expand All @@ -12,15 +12,15 @@ tags:
- Nuxt
- .NET
---
You might have already seen blog posts and videos showing how .NET Aspire can enhance our local development environment, using an example with a Blazor SPA and an ASP.NET Core API. However, not everyone uses Blazor; many prefer a JavaScript framework for front-end development.
You might have already seen blog posts and videos showing how Aspire can enhance our local development environment, using an example with a Blazor SPA and an ASP.NET Core API. However, not everyone uses Blazor; many prefer a JavaScript framework for front-end development.

Fortunately, we can still benefit from .NET Aspire regardless of our stack. In this article, we will explore how to use .NET Aspire to develop an application composed of an ASP.NET Core back end and a Nuxt front end.
Fortunately, we can still benefit from Aspire regardless of our stack. In this article, we will explore how to use Aspire to develop an application composed of an ASP.NET Core back end and a Nuxt front end.

## The context

The context is very basic: developing a web application with an ASP.NET Core API for the back end and a Nuxt application for the front end. The Nuxt application calls the ASP.NET Core API to get data to show on the website.

The goal is to easily run the back end and front end together locally. While using .NET Aspire is not necessary for this, .NET Aspire orchestration can simplify the process and help address some common issues.
The goal is to easily run the back end and front end together locally. While using Aspire is not necessary for this, Aspire orchestration can simplify the process and help address some common issues.

## What problems are we trying to solve?

Expand All @@ -37,9 +37,9 @@ We can use this [application](https://github.com/TechWatching/AspnetWithNuxt/tre

![A table showing dates with weather summaries and temperatures in Celsius and Fahrenheit.](/posts/images/69.temperatures.png){.rounded-lg.mx-auto width="400"}

## Add .NET Aspire to our existing project
## Add Aspire to our existing project

Since .NET 9, we no longer need to install a specific workload for .NET Aspire. We only need to install the .NET Aspire templates, as they make it easier to add .NET Aspire to our application.
Since .NET 9, we no longer need to install a specific workload for Aspire. We only need to install the Aspire templates, as they make it easier to add Aspire to our application.

```powershell
dotnet new install Aspire.ProjectTemplates
Expand Down Expand Up @@ -91,7 +91,7 @@ Thanks to the source generated `WebApi` class in the `Projects` namespace, we do

### For the `WebApp`

We can use an integration from the [Aspire Community toolkit](https://learn.microsoft.com/en-us/dotnet/aspire/community-toolkit/overview?wt.mc_id=MVP_430820) which contains community-driven integrations for .NET Aspire, including one for Vite applications like my Nuxt project.
We can use an integration from the [Aspire Community toolkit](https://learn.microsoft.com/en-us/dotnet/aspire/community-toolkit/overview?wt.mc_id=MVP_430820) which contains community-driven integrations for Aspire, including one for Vite applications like my Nuxt project.

```bash
dotnet add AppHost\AppHost.csproj package CommunityToolkit.Aspire.Hosting.NodeJS.Extensions
Expand All @@ -111,7 +111,7 @@ var webApp= builder.AddViteApp("WebApp", "../WebApp", "pnpm")

* `WaitFor` ensures the `WebApi` is running before starting the `WebApp`

The only downside of using `AddViteApp` is that it doesn't currently support exposing the HTTPS endpoint. So, even though the `WebApp` will be launched by the `AppHost` and will work correctly with HTTPS, its URL in the .NET Aspire dashboard will be in HTTP. This isn't a major issue; you could just replace the `http` in the URL by `https`. But let’s fix that anyway to use another method `AddPnpmApp` (there are other methods like `AddNpmApp` for other package manager) of the Aspire Community toolkit instead:
The only downside of using `AddViteApp` is that it doesn't currently support exposing the HTTPS endpoint. So, even though the `WebApp` will be launched by the `AppHost` and will work correctly with HTTPS, its URL in the Aspire dashboard will be in HTTP. This isn't a major issue; you could just replace the `http` in the URL by `https`. But let’s fix that anyway to use another method `AddPnpmApp` (there are other methods like `AddNpmApp` for other package managers) of the Aspire Community toolkit instead:

```csharp [AppHost/Program.cs]
var webApp= builder.AddPnpmApp("WebApp", "../WebApp", "dev")
Expand All @@ -124,17 +124,17 @@ var webApp= builder.AddPnpmApp("WebApp", "../WebApp", "dev")
You don’t need to know exactly what `AddPnpmApp` does behind the scenes, but it might be helpful to check out (use your IDE to access the decompiled code with F12). I’ve heard people like Scott Hanselman and Mark Russinovich say that we should try to “understand how things work one level below the level we are operating on”, and I find this very true. In the end, the `PnpmAdd` resource is just an executable resource called with specific commands and parameters.
::

## Running the `AppHost` with the .NET Aspire dashboard
## Running the `AppHost` with the Aspire dashboard

If we run the `AppHost` now, it will start the `WebApp` and `WebApi`.

```bash
dotnet run --project AppHost/AppHost.csproj
```

The `AppHost` also launches the .NET Aspire dashboard where we can see the resources (here the `WebApp` and the `WebApi`) with their status and details about them like the endpoints and the environment variables.
The `AppHost` also launches the Aspire dashboard where we can see the resources (here the `WebApp` and the `WebApi`) with their status and details about them like the endpoints and the environment variables.

![Screenshot of the resources tab on the .NET Aspire dashboard.](/posts/images/69.dashboard_1.png){.rounded-lg.mx-auto}
![Screenshot of the resources tab on the Aspire dashboard.](/posts/images/69.dashboard_1.png){.rounded-lg.mx-auto}

There is also a `console` tab in the dashboard to visualize the console logs of the different resources.

Expand All @@ -153,9 +153,9 @@ var webApp= builder.AddPnpmApp("WebApp", "../WebApp", "dev")
.WaitFor(webApi);
```

.NET Aspire includes built-in support for service discovery, which automatically set the correct environment variables and connection strings when referencing resources properly.
Aspire includes built-in support for service discovery, which automatically set the correct environment variables and connection strings when referencing resources properly.

![Screenshot of the environment variables in .NET Aspire dashboard for the WebApp resource.](/posts/images/69.dashboard_3.png){.rounded-lg.mx-auto}
![Screenshot of the environment variables in Aspire dashboard for the WebApp resource.](/posts/images/69.dashboard_3.png){.rounded-lg.mx-auto}

Here, we can see that the endpoints of the `WebApi` have been automatically injected in the environment variables of the `WebApp`.

Expand Down Expand Up @@ -195,12 +195,12 @@ The route rules configuration in the `nuxt.config.ts` files becomes the followin

And everything keep working fine.

![Screenshot of the .NET Aspire dashboard showing the environment variable ApiUrl on the WebApp resource.](/posts/images/69.dashboard_4.png){.rounded-lg.mx-auto}
![Screenshot of the Aspire dashboard showing the environment variable ApiUrl on the WebApp resource.](/posts/images/69.dashboard_4.png){.rounded-lg.mx-auto}

## Final thoughts

We have seen how adding .NET Aspire to our project helped us solve the three problems we had: the lack of a unified start process, the need for a centralized place to view logs, and the possibility to remove the hard-coded API URL of our Nuxt configuration. The code for this article is available [here](https://github.com/TechWatching/AspnetWithNuxt/tree/71d2da1a2a1237a63e9a124c9d1b6b9bba508a42).
We have seen how adding Aspire to our project helped us solve the three problems we had: the lack of a unified start process, the need for a centralized place to view logs, and the possibility to remove the hard-coded API URL of our Nuxt configuration. The code for this article is available [here](https://github.com/TechWatching/AspnetWithNuxt/tree/71d2da1a2a1237a63e9a124c9d1b6b9bba508a42).

Since .NET Aspire is highly customizable, it's easy to adjust it to fit our stack and needs. We focused on orchestrating the two resources we had but did not configure open telemetry. We'll discuss that in a future blog post.
Since Aspire is highly customizable, it's easy to adjust it to fit our stack and needs. We focused on orchestrating the two resources we had but did not configure open telemetry. We'll discuss that in a future blog post.

In the meantime, keep learning!
Loading