You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/1.posts/64.manage-dotnet-versions.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ You can then uninstall .NET versions using the `dotnet-core-uninstall remove` co
43
43
44
44
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.
45
45
46
-
{.rounded-lg.mx-auto }
46
+
{.rounded-lg.mx-auto }
Copy file name to clipboardExpand all lines: content/1.posts/66.developer-experience-thoughts.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -56,4 +56,4 @@ With [Pulumi](https://www.pulumi.com/product/infrastructure-as-code/) you can au
56
56
57
57
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.
58
58
59
-
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.
59
+
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.
Copy file name to clipboardExpand all lines: content/1.posts/67.aspnetcore-with-nuxt.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -165,6 +165,6 @@ Here are the weather forecasts retrieved from the API and displayed in the Front
165
165
166
166
{.rounded-lg.mx-auto}
167
167
168
-
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.
168
+
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.
169
169
170
170
You can find the complete source code used for this article in this [GitHub repository](https://github.com/TechWatching/AspnetWithNuxt/tree/initial-without-aspire).
Copy file name to clipboardExpand all lines: content/1.posts/69.aspire-tailor-to-your-stack.md
+17-17Lines changed: 17 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
-
title: ".NET Aspirations - Tailor It To Your Stack"
3
-
description: "Using .NET Aspire with a Nuxt front end"
2
+
title: "Aspirations - Tailor It To Your Stack"
3
+
description: "Using Aspire with a Nuxt front end"
4
4
date: 2025-03-02
5
5
image:
6
6
src: /images/aspire_1.webp
@@ -12,15 +12,15 @@ tags:
12
12
- Nuxt
13
13
- .NET
14
14
---
15
-
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.
15
+
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.
16
16
17
-
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.
17
+
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.
18
18
19
19
## The context
20
20
21
21
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.
22
22
23
-
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.
23
+
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.
24
24
25
25
## What problems are we trying to solve?
26
26
@@ -37,9 +37,9 @@ We can use this [application](https://github.com/TechWatching/AspnetWithNuxt/tre
37
37
38
38
{.rounded-lg.mx-auto width="400"}
39
39
40
-
## Add .NET Aspire to our existing project
40
+
## Add Aspire to our existing project
41
41
42
-
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.
42
+
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.
43
43
44
44
```powershell
45
45
dotnet new install Aspire.ProjectTemplates
@@ -91,7 +91,7 @@ Thanks to the source generated `WebApi` class in the `Projects` namespace, we do
91
91
92
92
### For the `WebApp`
93
93
94
-
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.
94
+
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.
@@ -111,7 +111,7 @@ var webApp= builder.AddViteApp("WebApp", "../WebApp", "pnpm")
111
111
112
112
*`WaitFor` ensures the `WebApi` is running before starting the `WebApp`
113
113
114
-
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:
114
+
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:
115
115
116
116
```csharp [AppHost/Program.cs]
117
117
var webApp= builder.AddPnpmApp("WebApp", "../WebApp", "dev")
@@ -124,17 +124,17 @@ var webApp= builder.AddPnpmApp("WebApp", "../WebApp", "dev")
124
124
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.
125
125
::
126
126
127
-
## Running the `AppHost` with the .NET Aspire dashboard
127
+
## Running the `AppHost` with the Aspire dashboard
128
128
129
129
If we run the `AppHost` now, it will start the `WebApp` and `WebApi`.
130
130
131
131
```bash
132
132
dotnet run --project AppHost/AppHost.csproj
133
133
```
134
134
135
-
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.
135
+
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.
136
136
137
-
{.rounded-lg.mx-auto}
137
+
{.rounded-lg.mx-auto}
138
138
139
139
There is also a `console` tab in the dashboard to visualize the console logs of the different resources.
140
140
@@ -153,9 +153,9 @@ var webApp= builder.AddPnpmApp("WebApp", "../WebApp", "dev")
153
153
.WaitFor(webApi);
154
154
```
155
155
156
-
.NET Aspire includes built-in support for service discovery, which automatically set the correct environment variables and connection strings when referencing resources properly.
156
+
Aspire includes built-in support for service discovery, which automatically set the correct environment variables and connection strings when referencing resources properly.
157
157
158
-
{.rounded-lg.mx-auto}
158
+
{.rounded-lg.mx-auto}
159
159
160
160
Here, we can see that the endpoints of the `WebApi` have been automatically injected in the environment variables of the `WebApp`.
161
161
@@ -195,12 +195,12 @@ The route rules configuration in the `nuxt.config.ts` files becomes the followin
195
195
196
196
And everything keep working fine.
197
197
198
-
{.rounded-lg.mx-auto}
198
+
{.rounded-lg.mx-auto}
199
199
200
200
## Final thoughts
201
201
202
-
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).
202
+
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).
203
203
204
-
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.
204
+
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.
0 commit comments