Getting Started with .NET Aspire Simplifying Cloud-Native Development
TL;DR: Discover .NET Aspire, a powerful stack simplifying cloud-native app development with standardized components, enhanced tooling, and seamless orchestration. Learn to deploy and manage apps effortlessly with Azure integration.
Today, we’ll explore .NET Aspire, an exciting new technology making waves in the .NET community. This article provides an easy-to-understand introduction to orchestration in .NET Aspire, focusing on its benefits and capabilities. Let’s discover how .NET Aspire contributes to advancements in our daily development.
.NET Aspire is a powerful, cloud-native framework for building observable, production-ready distributed applications. It consists of the following three main capabilities:
Let’s dive deeper into what makes .NET Aspire unique and valuable.
To get started with .NET Aspire, you need the following:
1. dotnet workload install aspire //Installs Aspire. 2. dotnet workload list //Lists all installed workloads and checks the version of .NET Aspire. 3. dotnet workload update aspire //Use this command if an update is required to update Aspire to the latest version.
1. choco install azd 2. azd 3. azd auth login
When starting with .NET Aspire, you may notice two templates: the .NET Aspire Application and the .NET Aspire Starter Application. Here’s a comparison to help you understand their uses and differences:
Follow these steps to build your first project with .NET Aspire:
After creating the project solution, you will see the following projects.
var builder = DistributedApplication.CreateBuilder(args);
var apiservice = builder.AddProject<Projects.AspireApp_ApiService>("apiservice");
builder.AddProject<Projects.AspireApp_Web>("webfrontend")
.WithReference(apiservice);
builder.Build().Run(); This code references the web-frontend project with the API service project.Once the project starts, you will see the .NET Aspire Dashboard. Here, you can monitor various aspects of your app.
Refer to the following images.
Afterward, navigate from the home page to the weather page using the left-side navigation, where you’ll find detailed weather data.
In Visual Studio 2022 Preview, create a new project using the .NET Aspire Application template. Select a solution name, location, and framework (choose .NET 8 Long-Term Support).
After that, continue with the default target framework to complete the project creation. This creates a basic .NET Aspire environment with essential projects, including an AppHost and ServiceDefaults.
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace AspireAppAPIService.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class TodoController : ControllerBase
{
private static readonly List<string> todos = new List<string>();
// GET: api/todo
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
{
return Ok(todos);
}
// POST: api/todo
[HttpPost]
public ActionResult Post([FromBody] string todo)
{
if (string.IsNullOrWhiteSpace(todo))
{
return BadRequest("Todo item cannot be empty");
}
todos.Add(todo);
return Ok();
}
// DELETE: api/todo/{index}
[HttpDelete("{index}")]
public ActionResult Delete(int index)
{
if (index < 0 || index >= todos.Count)
{
return NotFound("Todo item not found");
}
todos.RemoveAt(index);
return Ok();
}
}
} To integrate a front-end into your .NET Aspire app, follow these steps:
After setting up the Blazor project, implement a simple To-do list feature. Create a TodoService.cs class to interact with your Web API endpoints. This class manages tasks such as retrieving, adding, and deleting to-do items from the server.
Refer to the following code example.
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
using System.Collections.Generic;
public class TodoService
{
private readonly HttpClient _httpClient;
public TodoService(HttpClient httpClient)
{
_httpClient = httpClient;
}
public async Task<List<string>> GetTodosAsync()
{
return await _httpClient.GetFromJsonAsync<List<string>>("api/todo");
}
public async Task AddTodoAsync(string todo)
{
await _httpClient.PostAsJsonAsync("api/todo", todo);
}
public async Task DeleteTodoAsync(int index)
{
await _httpClient.DeleteAsync($"api/todo/{index}");
}
} Next, design the UI for your to-do list by creating a new Razor component named Todo.razor and adding the following code.
@page "/todo"
@inject TodoService TodoService
<h3>To-Do List</h3>
<div class="input-group mb-3">
<input @bind="newTodo" class="form-control" placeholder="Enter new to-do item" />
<button @>
After creating Todo.razor, add it to the navigation menu (NavMenu.razor) under the Layout folder.
<div class="nav-item px-3">
<NavLink class="nav-link" href="todo">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> To-Do List
</NavLink>
</div>
Next, configure an HttpClient with a BaseAddress in the Program.cs file of your web app project to establish communication with the Web API.
builder.Services.AddHttpClient<TodoService>(client => client.BaseAddress = new("http://apiservice")); Connecting ASP.NET web app and Web API project
To connect the ASP.NET web app with the Web API in your .NET Aspire solution, modify the Program.cs file in the AspireApp.AppHost project. Include both the Web API and Web application projects using the following code.
var builder = DistributedApplication.CreateBuilder(args);
var apiservice = builder.AddProject<Projects.AspireAppAPIService>("apiservice");
builder.AddProject<Projects.AspireWebApp>("webfrontend").WithReference(apiservice);
builder.Build().Run(); This setup allows the Web app to communicate with the Web API without requiring direct references between the projects. The .NET Aspire framework manages this communication pipeline.
Execute the project locally
Run the AppHost project as the startup project or press F5.
The Web application (front-end) and Web API (back-end) projects will appear on the Dashboard, as shown in the screenshot below. From this dashboard, you can monitor logs, metrics, and tracing and facilitate communication between the two apps without needing direct references or specific URLs.
Deploying the app in Azure
For deployment in Azure, follow these steps:
- Open the AppHost project in PowerShell.
- Initialize Azure using the azd init command and enter the environment name, e.g., ToDoListAspireApp.
- Execute the azd up command to deploy the app using the generated Azure.yaml and next-steps.md files.
- Once deployed, access the app via the provided endpoint link.
GitHub reference
For more details, refer to the project on GitHub.
Conclusion
In this blog, we explored how .NET Aspire simplifies the development of cloud-native applications by providing essential components and tools. With its standardized configurations, enhanced tooling, and robust orchestration capabilities, .NET Aspire enhances productivity and reduces complexity for developers. By deploying our app to Azure, we demonstrated the seamless integration and management capabilities of .NET Aspire in modern cloud environments.
The latest version of Essential Studio®—Syncfusion’s collection of eighteen-hundred-plus UI components and frameworks for mobile, web, and desktop development—is available for current customers from the License and Downloads page. If you are not a Syncfusion customer, you can start a 30-day free trial to try all the components.
If you have questions, contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
Related blogs
