Skip to content

Commit 9e782d9

Browse files
ismcagdasismcagdas
committed
Added .NET Aspire integration blog post
1 parent 294d632 commit 9e782d9

5 files changed

Lines changed: 162 additions & 0 deletions

‎blog-posts/en/dotnet-aspire-integration.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# Integrate .NET Aspire with ASP.NET Zero
2+
3+
.NET Aspire is a cloud-native application stack designed to simplify the development of distributed systems in .NET. It is getting popular among .NET developers and we wanted to try it with ASP.NET Zero's MVC UI.
4+
5+
Let's get started and integrate .NET Aspire with ASP.NET Zero.
6+
7+
## Create Project
8+
9+
First, login to your account on [https://aspnetzero.com](https://aspnetzero.com) go to [https://aspnetzero.com/download ](https://aspnetzero.com/download) and create your project. While creating your project, select `ASP.NET CORE MVC & jQuery` as the project type.
10+
11+
After creating your project, follow [Getting Started](https://docs.aspnetzero.com/aspnet-core-mvc/latest/Getting-Started-Core) document and be sure that your project runs successfully.
12+
13+
## Integrate .NET Aspire
14+
15+
We will store our Aspire applicaiton under `aspire` folder. To do this, create a folder named `aspire` in the same level of `src` folder in your project.
16+
After that, run the following command to create .NET Aspire App Host application.
17+
18+
````bash
19+
dotnet new aspire-apphost -o ZeroAspireSample.AppHost
20+
````
21+
22+
You can also create a service defaults project but, we will not use it in this sample to keep it simple.
23+
24+
### Add Reference to ASP.NET Zero Apps
25+
26+
We will run following applications using .NET Aspire, so we need to add a project reference for these projects to our .NET Aspire App Host prohect;
27+
28+
- MVC UI
29+
- API Host
30+
- Public Website
31+
- Migrator Project
32+
33+
We want to basically run `SQL Server` with `Docker` using .NET Aspire. Run migrations on this database using `Migrator` project. And, finally we will run 3 Web UIs provided by ASP.NET Zero out of the box.
34+
35+
#### SQL Server
36+
37+
Before getting started, bu sure that you are running Docker on your PC. Also, if you don't have SQL Server Docker image, it might take some time to download and start it.
38+
39+
Go to `AppHost.cs` file and add the code below. This will run SQL Server on the Docker and will create a database named `ZeroAspireSampleDb`.
40+
41+
Since the SQL Server container is slow to start, we are using `ContainerLifetime.Persistent` to avoid restarts and this slowness for the future runs.
42+
43+
````csharp
44+
var builder = DistributedApplication.CreateBuilder(args);
45+
46+
// SQL Server
47+
var sql = builder.AddSqlServer("ZeroAspireSample-SQL")
48+
.WithLifetime(ContainerLifetime.Persistent);
49+
50+
// Database
51+
var db = sql.AddDatabase("ZeroAspireSampleDb");
52+
````
53+
54+
#### Database Migration
55+
56+
If we run our .NET Aspire application, we will have a running SQL Server database. Let's run migrations on this database using .NET Aspire.
57+
58+
To do this, add lines below to your `AppHost.cs` file;
59+
60+
````csharp
61+
// Migrator Project
62+
var migrator = builder.AddProject<ZeroAspireSample_Migrator>("Migrator")
63+
.WithEnvironment("ASPNETCORE_Docker_Enabled", "true")
64+
.WithReference(db, connectionName: "Default")
65+
.WaitFor(db);
66+
````
67+
68+
Here, we have a few special configurations.
69+
70+
The first one is, we are setting `ASPNETCORE_Docker_Enabled` environment variable so ASP.NET Zero's Migrator applicationm will not wait for any user input and will exit immediately when it finishes its job.
71+
72+
The second one is, we are setting `connectionName` when referencing the database to our Migrator application. Otherwise, .NET Aspire will use `ConnectionStrings__ZeroAspireSampleDb` and becasue of that, our Migrator app will not be able to use SQL Server running on .NET Aspire.
73+
74+
Since we are also using `WaitFor`, .NET Aspire will not run our Migrator application until the database is up and ready.
75+
76+
#### Web UIs
77+
78+
We can now run our 3 web projects in order. To do that, add the code block below to your `AppHost.cs` file.
79+
80+
````csharp
81+
// Admin UI Project
82+
builder.AddProject<ZeroAspireSample_Web_Mvc>("Admin-UI", launchProfileName: "ZeroAspireSample.Web")
83+
.WithHttpHealthCheck("/health")
84+
.WithReference(db, connectionName: "Default")
85+
.WaitFor(migrator);
86+
87+
// API Host Project
88+
builder.AddProject<Projects.ZeroAspireSample_Web_Host>("API-Host", launchProfileName: "ZeroAspireSample.Web.Host")
89+
.WithReference(db, connectionName: "Default")
90+
.WithHttpHealthCheck("/health");
91+
92+
// Public UI Project
93+
builder.AddProject<Projects.ZeroAspireSample_Web_Public>("Public-UI", launchProfileName: "ZeroAspireSample.Web.FrontEnd")
94+
.WithReference(db, connectionName: "Default")
95+
.WithHttpHealthCheck("/health");
96+
````
97+
98+
Let's check details here so we can understand how .NET Aspire runs our web applications.
99+
100+
We are using `launchProfileName` when running all 3 projects. Otherwise, .NET Aspire will run these projects using the default port 5000. However, if we provide `launchProfileName`, .NET Aspire will use the given profile to run our web application. This way, our apps will run on the ports we want them to run.
101+
102+
We also have `WithHttpHealthCheck` so that .NET Aspire can understand if our application is running and healty. By default, health checks are disabled in ASP.NET Zero projects, so you need to enable it by going to appsettings.json file and setting `HealthChecksEnabled` to `true`.
103+
104+
We also reference the database we created previously for all 3 web applications.
105+
106+
Here is the final version of `AppHost.cs` file.
107+
108+
````csharp
109+
using Projects;
110+
111+
var builder = DistributedApplication.CreateBuilder(args);
112+
113+
// SQL Server
114+
var sql = builder.AddSqlServer("ZeroAspireSample-SQL")
115+
.WithLifetime(ContainerLifetime.Persistent);
116+
117+
// Database
118+
var db = sql.AddDatabase("ZeroAspireSampleDb");
119+
120+
// Migrator Project
121+
var migrator = builder.AddProject<ZeroAspireSample_Migrator>("Migrator")
122+
.WithEnvironment("ASPNETCORE_Docker_Enabled", "true")
123+
.WithReference(db, connectionName: "Default")
124+
.WaitFor(db);
125+
126+
// Admin UI Project
127+
builder.AddProject<ZeroAspireSample_Web_Mvc>("Admin-UI", launchProfileName: "ZeroAspireSample.Web")
128+
.WithHttpHealthCheck("/health")
129+
.WithReference(db, connectionName: "Default")
130+
.WaitFor(migrator);
131+
132+
// API Host Project
133+
builder.AddProject<Projects.ZeroAspireSample_Web_Host>("API-Host", launchProfileName: "ZeroAspireSample.Web.Host")
134+
.WithReference(db, connectionName: "Default")
135+
.WithHttpHealthCheck("/health");
136+
137+
// Public UI Project
138+
builder.AddProject<Projects.ZeroAspireSample_Web_Public>("Public-UI", launchProfileName: "ZeroAspireSample.Web.FrontEnd")
139+
.WithReference(db, connectionName: "Default")
140+
.WithHttpHealthCheck("/health");
141+
142+
builder.Build().Run();
143+
````
144+
145+
## .NET Aspire Dashboard
146+
147+
### Login to Dashboard
148+
149+
For the first run, .NET Aspire will ask you to login to Dashboard. You will need a token to login. You can find this token in the logs when you run the AppHost project as shown below;
150+
151+
![.NET Aspire Dashboard Login](./images/Blog/dotnet-aspire-dashboard-login.jpg)
152+
153+
### View Dashboard
154+
After making all these changes, if we run the `ZeroAspireSample.AppHost` project, we will see a dashboard similar to the one below;
155+
156+
157+
![.NET Aspire Dashboard First State](./images/Blog/dotnet-aspire-dashboard-first-state.jpg)
158+
159+
.NET Aspire will run the SQL Server, will migrate the database by running the Migrator project and then will run the web projects. Finally, you should see a dashboard like this;
160+
161+
![.NET Aspire Dashboard Last State](./images/Blog/dotnet-aspire-dashboard-last-state.jpg)
162+

‎blog-posts/en/images/Blog/dotnet-aspire-dashboard-first-state.jpg‎

165 KB
Loading

‎blog-posts/en/images/Blog/dotnet-aspire-dashboard-last-state.jpg‎

160 KB
Loading

‎blog-posts/en/images/Blog/dotnet-aspire-dashboard-login.jpg‎

117 KB
Loading

‎blog-posts/en/images/Blog/dotnet-aspire-mvc-integration-cover-image.png‎

62.6 KB
Loading

0 commit comments

Comments
 (0)