In this post we will build a new we will build a TODO app from start to finish, using Aspire and React. We will use Aspire and React to create a full stack TODO application.
\nWe will do this using the CLI and C# Dev Kit. The todo items will be stored in a SQLite database.
\nThe React front-end will use a Web API to handle all the interactions with the data.
\nI\u2019m going to be showing this with the dotnet CLI, Aspire CLI and C# Dev Kit, but you can follow along with any IDE, or editor, of your choice.
\nThe resulting app can be published to any web host which supports ASP.NET Core \u2013 including Linux containers.
\nFirst let\u2019s start with the prerequisites to ensure you have all the components needed to follow along this tutorial.<\/p>\n\n
Source Code<\/strong><\/p>\n All the code from this post can be found at sayedihashimi\/todojsaspire<\/a>.<\/p><\/div>\n In this tutorial, we will walk through installing Aspire, but you should have these dependencies installed. You can learn more at Aspire Prerequisites<\/a> Installing these items will not be covered in this post.<\/p>\n .NET 9.0<\/a> For detailed instructions on getting Aspire, and its dependencies, installed visit Workload Migration<\/strong><\/p>\n As of version 9, Aspire no longer requires a separate workload installation. Use dotnet workload list to check installed workloads and dotnet workload uninstall to remove the Aspire workload.<\/p><\/div>\n Install the new Aspire CLI<\/a>. The command below will install the tool globally and the dotnet new templates.<\/p>\n On Windows:<\/p>\n iex “& { $(irm https:\/\/aspire.dev\/install.ps1) }”<\/p>\n On Linux, or macOS:<\/p>\n curl -sSL https:\/\/aspire.dev\/install.sh | bash -s<\/p>\n After installing this tool, you can run it by executing aspire on the command line. You can explore the usage of this tool with aspire -\u2013help. Now that we have the tools installed, let\u2019s move on and create the Aspire app.<\/p>\n Now that the machine is ready with all the prerequisites we can get started. Let\u2019s create the Aspire app to start with. In VS Code open the command palette Select the Aspire Starter App template and hit enter.<\/p>\n\n When prompted for the project name use \u201cTodojsAspire\u201d and select \u201csrc\u201d as the destination folder to follow along. Now that the starter app has been created you should see the following in the Explorer in VS Code. In this case I added the following files before creating the project .gitattributes, .gitignore and LICENSE.<\/p>\n\n Now would be a good time to execute a build to ensure that there are no build issues. When using the Aspire Starter App template it will create a few projects including a front-end with ASP.NET Core. Since we are going to use React for the front-end, After deleting the project we need to remove any references to it. The things that need to be removed include.<\/p>\n Project reference in TodojsAspire.AppHost In the command palette you can use .NET: Remove Project Reference to delete the reference in TodojsAspire.AppHost. Then delete the following code from the AppHost.cs file in the builder.AddProject<Projects.TodojsAspire_Web>(“webfrontend”) Soon we will replace these lines with what is needed to integrate the React app. To get the API project going, we will first add a model class for the TODO items, and then use dotnet scaffold to generate the initial API endpoints. using System.ComponentModel.DataAnnotations; public class Todo Now that we have added the model class, we will scaffold the API endpoints with dotnet scaffold.<\/p>\n We can use dotnet scaffold to generate API endpoints for the Todo model. To install this tool, execute the following command.<\/p>\n dotnet tool install –global Microsoft.dotnet-scaffold<\/p>\n When using dotnet scaffold it\u2019s easiest to cd into the project directory and then execute it from there. This tool is interactive by default, to get started execute dotnet scaffold. Make the following selections.<\/p>\n Category = API You can see the entire interaction in the following animation.<\/p>\n\n The following changes were made to the TodojsAspire.ApiService project.<\/p>\n TodoEndpoints.cs file was created with the Minimal API endpoints. Kick off another build to ensure that scaffolding has worked successfully. If you get any build errors regarding missing packages, ensure that the following packages have been installed.<\/p>\n Microsoft.EntityFrameworkCore You can install packages using dotnet add package [PACKAGE NAME].<\/p>\n Open the new file TodoEndpoints.cs so that we can take a look. using Microsoft.AspNetCore.Http.HttpResults; public static class TodoEndpoints group.MapGet(“\/”, async (TodoDbContext db) => group.MapGet(“\/{id}”, async Task<Results<Ok<Todo>, NotFound>> (int id, TodoDbContext db) => group.MapPut(“\/{id}”, async Task<Results<Ok, NotFound>> (int id, Todo todo, TodoDbContext db) => return affected == 1 ? TypedResults.Ok() : TypedResults.NotFound(); group.MapPost(“\/”, async (Todo todo, TodoDbContext db) => group.MapDelete(“\/{id}”, async Task<Results<Ok, NotFound>> (int id, TodoDbContext db) => return affected == 1 ? TypedResults.Ok() : TypedResults.NotFound(); This file contains the CRUD methods which are needed to support reading\/writing the content from the database. \/\/ Endpoint to move a task up in the list \/\/ Find the todo with the largest position less than the current todo if (prevTodo is null) \/\/ Swap positions \/\/ Endpoint to move a task down in the list \/\/ Find the todo with the smallest position greater than the current todo if (nextTodo is null) \/\/ Swap positions values MoveTaskUp will find the task with a next lower position, and then swaps the position values. This line of code Now that we have all the database related code ready, we need to create an EF migration<\/a>. After we create the migration we will integrate the database with the Aspire dashboard<\/a>.<\/p>\n To create the EF migration, open the terminal in VS Code, dotnet ef migrations add TodoEndpointsInitialCreate<\/p>\n The migrations command will generate a new migration named TodoEndpointsInitialCreate and add it to the project. At this time you would typically also run dotnet ef database update but that isn\u2019t needed in this case. For SQLite support in the AppHost, we will need to use the Aspire Community Toolkit<\/a>. Execute the command below in the \u201csrc\u201d folder to install SQLite support in the AppHost.<\/p>\n aspire add sqlite<\/p>\n Follow the prompts to add the package. This will add a PackageReference to the AppHost and make other APIs available for the builder.<\/p>\n Open the AppHost.cs file in the TodojsAspire.AppHost project. Replace the contents with the code below.<\/p>\n var builder = DistributedApplication.CreateBuilder(args);<\/p>\n var db = builder.AddSqlite(“db”) var apiService = builder.AddProject<Projects.TodojsAspire_ApiService>(“apiservice”) builder.Build().Run();<\/p>\n In AppHost.cs we have added a SQLite database and registered the API service. We called WithReference(db) on the API so that it gets the connection To configure the ApiService we will need to add the package CommunityToolkit.Aspire.Microsoft.EntityFrameworkCore.Sqlite and update the connection dotnet add package CommunityToolkit.Aspire.Microsoft.EntityFrameworkCore.Sqlite<\/p>\n Modify the Program.cs in the Api project to have the following contents.<\/p>\n using Microsoft.EntityFrameworkCore;<\/p>\n var builder = WebApplication.CreateBuilder(args);<\/p>\n builder.AddSqliteDbContext<TodoDbContext>(“db”);<\/p>\n \/\/ Add service defaults & Aspire client integrations. \/\/ Add services to the container. \/\/ Learn more about configuring OpenAPI at https:\/\/aka.ms\/aspnet\/openapi var app = builder.Build();<\/p>\n \/\/ Configure the HTTP request pipeline. if (app.Environment.IsDevelopment()) app.MapDefaultEndpoints();<\/p>\n app.MapTodoEndpoints();<\/p>\n using var scope = app.Services.CreateScope(); app.Run();<\/p>\n The most important changes here are that we changed how the database is being initalized. Previously the connection string was coming from the Now that we have all the In the TodojsAspire.ApiService project open the file named TodojsAspire.ApiService.http. If your project doesn\u2019t have a file with that name, create a new one. For detailed info on the dashboard, see this article Key features of the dashboard include:<\/p>\n Real-time tracking of logs, traces, and environment configurations. The dashboard will show the projects which have been configured and their status. You can easily navigate to the app, view logs and other important info. This dashboard currently In the screenshot above, you can see the URLs for the ApiService project. Copy one of the URLs for the ApiService project, we will need that to exercise the app. You can click on the URL for db-sqliteweb to open a web interface to interact with the database, but that isn\u2019t needed for this tutorial.<\/p>\n By default, when you start the AppHost, you will get a new database and the migration(s) will automatically be applied to the database to update it. If you want your local data to persist Below is the HTTP file, you may need to update the base url variable on the first line to match your project. For more info on HTTP file see the @todoapibaseurl = https:\/\/localhost:7473<\/p>\n GET {{todoapibaseurl}}\/Todo\/<\/p>\n ###<\/p>\n # Create a new todo { ### { { ### { ###<\/p>\n POST {{todoapibaseurl}}\/Todo\/ { # Delete a todo ###<\/p>\n POST {{todoapibaseurl}}\/Todo\/move-up\/3 When you paste the value for the API URL make sure to remove the trailing slash.<\/p>\n With this HTTP file we can exercise the app. It includes requests for most endpoints in the TodoEndpoints class. You can execute the requests with Send Request above the URL line. When Todo items are returned, they are not sorted by Position. To fix the first issue, specifically group.MapGet(“\/”,, update the get endpoint to have the following code.<\/p>\n group.MapGet(“\/”, async (TodoDbContext db) => To fix the issue regarding the missing position value, update the POST method to have the following code.<\/p>\n group.MapPost(“\/”, async (Todo todo, TodoDbContext db) => With this change, when a Todo item is submitted without a value for Position, the value for Position will be set to the max value of Position in the database + 1. Now we have To create the React project we will use the npm command which is installed with node. Visit Node.js \u2014 Download Node.js\u00ae<\/a> to get it installed. Open a terminal, cd into the src directory and then execute the command below.<\/p>\n npm create vite@latest todo-frontend — –template react<\/p>\n When prompted specify the following values.<\/p>\n Framework = React This will create a new folder named todo-frontend in the src directory and then scaffold the React app into that folder. After the app has been scaffolded, npm will tell you to execute the following commands to initialize the app.<\/p>\n cd todo-frontend These commands will install the dependencies and run the app to ensure that there are no issues. If you encounter and error, delete the todo-frontend folder and try again. You can We will use the Aspire CLI<\/a> to help us integrate the front-end with the AppHost. We will install the node integration package in the aspire add nodejs<\/p>\n Follow the prompts to add the package.<\/p>\n We will add a Community Toolkit package to add Vite support. Execute the command below.<\/p>\n aspire add ct-extensions<\/p>\n When prompted select ct-extensions (CommunityToolkit.Aspire.Hosting.NodeJS.Extensions).<\/p>\n project. Add the following to that file before builder.Build().Run();.<\/p>\n builder.AddViteApp(name: “todo-frontend”, workingDirectory: “..\/todo-frontend”) This will add the front-end as an app in AppHost project and add integration with the dashboard. Now we need to configure the front-end to consume the port that the import { defineConfig, loadEnv } from ‘vite’ export default defineConfig(({ mode }) => { return { This will configure a proxy so that all commands are routed through the same origin, and it injects the URL for the ApiService. That\u2019s all the changes that are needed to integrate Troubleshooting Vite.config.js load failure<\/strong><\/p>\n If you see an error that the vite.config.js file failed to load, run npm install in the todo-frontend folder, then press the play button next to the front-end in the Aspire Dashboard. You shouldn\u2019t need to restart the AppHost.<\/p><\/div>\n The dashboard should look like the following.<\/p>\n\n If you click on the todo-frontend URL, you\u2019ll see the default Vite React template in the browser. Now we can start building our front-end. I\u2019ll walk you through all the steps First let\u2019s add the components that we need for the todo app, and then we will update the files needed to use those components. In the todo-frontend\/src folder, add a \/** export default TodoItem;<\/p>\n This is a basic component that will be used to display the todo item as well as elements for the actions; move up, move down and delete. We will use this component in the TodoList import { useState, useEffect } from ‘react’; \/** const getTodo = async ()=>{ useEffect(() => { function handleInputChange(event) { async function addTask(event) { setNewTaskText(”); async function deleteTask(id) { if(result.ok){ async function moveTaskUp(index) { if(result.ok){ async function moveTaskDown(index) { if(result.ok) { return ( export default TodoList;<\/p>\n This component will display the list of todo items in our front-end. It fetches the todo items from the ApiService app, and all actions will be sent to that API for persistence. .todo-list { .todo-list h1 { .todo-input { .todo-input input { .todo-input .add-button { .todo-input .add-button:hover { .todo-list ol { .todo-list li { .todo-list li:last-child { .todo-list .text { .todo-list li button { .todo-list li button:hover { .todo-list li button.delete-button { .todo-list li button.up-button, This file is straightforward CSS and doesn\u2019t need much explanation for front-end developers. Now that we have added the components, we need to update the app to work with Update the contents of src\/main.jsx in todo-frontend to the code below.<\/p>\n import { StrictMode } from ‘react’ createRoot(document.querySelector(‘main’)).render( Open App.jsx and replace the content with the following.<\/p>\n import TodoList from “.\/components\/TodoList”<\/p>\n function App() { export default App<\/p>\n Open index.css and replace the contents with the CSS below.<\/p>\n :root { color-scheme: light dark; Finally, update the content of index.html to have the content below<\/p>\n <!doctype html> Now we have updated the app and it should be working. Start the AppHost project and then click on the URL for the front-end in the dashboard. Below is a video of the app running.<\/p>\n\n Our app is now working. You can use the dashboard to view telemetry flowing automatically between the database, .NET Web API backend, and React front-end. I didn\u2019t go into much detail on the React code here. I wrote a similar blog post for Visual Studio users which covers the React parts in more details Creating a React TODO app in Visual Studio 2022<\/a>. Now that we have the app running locally, the next step would be to deploy this to production. You can deploy this to any web host that supports ASP.NET Core. In this post, we built a new Aspire app with an ASP.NET Core Web API and connected it to a React front end using JavaScript. We worked entirely from the command line and C# Dev Kit, leveraging the new Aspire CLI and dotnet scaffold to add database support with SQLite.<\/p>\n For feedback on Aspire please file an issue in this repo dotnet\/aspire<\/a>. For feedback related to dotnet scaffold, the correct repo for The post Building a Full-Stack App with React and Aspire: A Step-by-Step Guide<\/a> appeared first on .NET Blog<\/a>.<\/p>","protected":false},"excerpt":{"rendered":" In this post we will build a new we will build a TODO app from start to finish, using Aspire […]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[],"class_list":["post-2311","post","type-post","status-publish","format-standard","hentry","category-dotnet"],"_links":{"self":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/2311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/comments?post=2311"}],"version-history":[{"count":0,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/2311\/revisions"}],"wp:attachment":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media?parent=2311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/categories?post=2311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/tags?post=2311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Prerequisites<\/h2>\n
\nnodejs<\/a>
\nVS Code with C# Dev Kit<\/a>
\nContainer runtime<\/a><\/p>\nInstall Aspire<\/h2>\n
\nAspire setup and tooling<\/a>. We will go through the basics here.
\nAfter installing .NET 9 and the other dependencies we will install the project templates using dotnet new.<\/p>\n\nCreate the Aspire app<\/h2>\n
\nOpen an empty folder in VS Code and add a new directory named src for the source files.<\/p>\n
\nCTRL\/CMD-SHIFT-P and type in New Project. See the following image.<\/p>\n\n
\nI will walk you through using New Project to create the Aspire app in the video below. Alternatively, you can use dotnet new aspire-starter or aspire new aspire-starter
\nin a terminal for the same result.<\/p>\n\n
\nhttps:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2025\/06\/03-todojsaspire-create-aspire-app.mp4<\/a><\/div>\n
\nOpen the command palette with CTRL\/CMD-SHIFT-P and select \u201c.NET: Build\u201d. You can also use the Solution Explorer to perform the build if you prefer that method.<\/p>\n
\nwe can delete the TodojsAspire.Web project and remove any references to it in the remaining files. The easiest way to do this project is to use the Solution Explorer which
\ncomes with C# Dev Kit. After opening the Solution Explorer, right click on the TodojsAspire.Web project and select Remove. See the following image.<\/p>\n\n
\nUpdate AppHost in TodojsAspire.AppHost<\/p>\n
\nsame project.<\/p>\n
\n .WithExternalHttpEndpoints()
\n .WithHttpHealthCheck(“\/health”)
\n .WithReference(apiService)
\n .WaitFor(apiService);<\/p>\n
\nYou should also delete the TodojsAspire.Web folder from the src directory.
\nAfter making those changes, you should do a build to ensure that nothing was missed. To start a
\nbuild, open the command palette and select Task: Run Build Task and then select dotnet: build.
\nNow that we have cleaned up the solution, we will move on to start updating the API project to expose endpoints to manage
\nthe TODO items.<\/p>\nConfigure the Web API<\/h2>\n
\nAdd the Todo class (Todo.cs) below to the TodojsAspire.ApiService project.<\/p>\n
\nnamespace TodojsAspire.ApiService;<\/p>\n
\n{
\n public int Id { get; set; }
\n [Required]
\n public string Title { get; set; } = default!;
\n public bool IsComplete { get; set; } = false;
\n \/\/ The position of the todo in the list, used for ordering.
\n \/\/ When updating this, make sure to not duplicate values.
\n \/\/ To move an item up\/down, swap the values of the position
\n [Required]
\n public int Position { get; set; } = 0;
\n}<\/p>\n
\nCommand = Minimal API
\nProject = TodojsAspire.ApiService
\nModel = Todo
\nEndpoints file name = TodoEndpoints
\nOpen API Enabled = No
\nData context class = TodoDbContext
\nDatabase provider = sqlite-efcore
\nInclude prerelease = No<\/p>\n
\nProgram.cs was modified to; initialize the SQLite database, get the connection string from appsettings.json and to a call to map the endpoints in TodoEndpoints.
\nThe project file was modified to add needed NuGet packages.
\nappsettings.json was modified to add the connection to the local db file.<\/p>\n
\nMicrosoft.EntityFrameworkCore.Design
\nMicrosoft.EntityFrameworkCore.Sqlite
\nMicrosoft.EntityFrameworkCore.Tools
\nSystem.ComponentModel.Annotations<\/p>\n
\nSince this is a simple app, we can simplify the URL to the API. When you have the TodoEndpoints.cs class open in VS Code, use Replace all to replace \/api\/ with \/.
\nThe resulting class, TodoEndpoints.cs, is below.<\/p>\n
\nusing Microsoft.EntityFrameworkCore;
\nusing TodojsAspire.ApiService;<\/p>\n
\n{
\n public static void MapTodoEndpoints(this IEndpointRouteBuilder routes)
\n {
\n var group = routes.MapGroup(“\/Todo”);<\/p>\n
\n {
\n return await db.Todo.ToListAsync();
\n })
\n .WithName(“GetAllTodos”);<\/p>\n
\n {
\n return await db.Todo.AsNoTracking()
\n .FirstOrDefaultAsync(model => model.Id == id)
\n is Todo model
\n ? TypedResults.Ok(model)
\n : TypedResults.NotFound();
\n })
\n .WithName(“GetTodoById”);<\/p>\n
\n {
\n var affected = await db.Todo
\n .Where(model => model.Id == id)
\n .ExecuteUpdateAsync(setters => setters
\n .SetProperty(m => m.Title, todo.Title)
\n .SetProperty(m => m.IsComplete, todo.IsComplete)
\n .SetProperty(m => m.Position, todo.Position)
\n );<\/p>\n
\n })
\n .WithName(“UpdateTodo”);<\/p>\n
\n {
\n db.Todo.Add(todo);
\n await db.SaveChangesAsync();
\n return TypedResults.Created($”\/Todo\/{todo.Id}”,todo);
\n })
\n .WithName(“CreateTodo”);<\/p>\n
\n {
\n var affected = await db.Todo
\n .Where(model => model.Id == id)
\n .ExecuteDeleteAsync();<\/p>\n
\n })
\n .WithName(“DeleteTodo”);
\n }
\n}<\/p>\n
\nIn the front-end that we will create soon, we want to give the user the ability to move tasks up\/down in the list. There are lots of different ways to implement this. Since this is
\na simple todo app for a single user, we don\u2019t need to worry about having a large number of items. To keep it simple, we will add two new endpoints; MoveTaskUp and MoveTaskDown.
\nThe code for these endpoints are below, add it below the last endpoint in the TodoEndpoints class.<\/p>\n
\ngroup.MapPost(“\/move-up\/{id:int}”, async Task<Results<Ok, NotFound>> (int id, TodoDbContext db) =>
\n{
\n var todo = await db.Todo.FirstOrDefaultAsync(t => t.Id == id);
\n if (todo is null)
\n { return TypedResults.NotFound(); }<\/p>\n
\n var prevTodo = await db.Todo
\n .Where(t => t.Position < todo.Position)
\n .OrderByDescending(t => t.Position)
\n .FirstOrDefaultAsync();<\/p>\n
\n { return TypedResults.Ok(); }<\/p>\n
\n (todo.Position, prevTodo.Position) = (prevTodo.Position, todo.Position);
\n await db.SaveChangesAsync();
\n return TypedResults.Ok();
\n})
\n.WithName(“MoveTaskUp”);<\/p>\n
\ngroup.MapPost(“\/move-down\/{id:int}”, async Task<Results<Ok, NotFound>> (int id, TodoDbContext db) =>
\n{
\n var todo = await db.Todo.FirstOrDefaultAsync(t => t.Id == id);
\n if (todo is null)
\n { return TypedResults.NotFound(); }<\/p>\n
\n var nextTodo = await db.Todo
\n .Where(t => t.Position > todo.Position)
\n .OrderBy(t => t.Position)
\n .FirstOrDefaultAsync();<\/p>\n
\n { return TypedResults.Ok(); } \/\/ Already at the bottom or no next todo<\/p>\n
\n (todo.Position, nextTodo.Position) = (nextTodo.Position, todo.Position);
\n await db.SaveChangesAsync();
\n return TypedResults.Ok();
\n})
\n.WithName(“MoveTaskDown”);<\/p>\n
\n(todo.Position, prevTodo.Position) = (prevTodo.Position, todo.Position); uses tuple assignment to swap the position values in a single line of code.<\/p>\nConfigure the database<\/h2>\n
\ncd into the TodojsAspire.ApiService project directory (src\/TodojsAspire.ApiService). Then execute the following command.<\/p>\n
\nWe will configure the project to run migrations when it is started by the AppHost.
\nLet\u2019s configure the database in the AppHost now.<\/p>\n
\n .WithSqliteWeb();<\/p>\n
\n .WithReference(db)
\n .WithHttpHealthCheck(“\/health”);<\/p>\n
\nstring to the database.<\/p>\n
\nto the database. In a terminal first cd into the ApiService project and execute the command below.<\/p>\n
\nbuilder.AddServiceDefaults();<\/p>\n
\nbuilder.Services.AddProblemDetails();<\/p>\n
\nbuilder.Services.AddOpenApi();<\/p>\n
\napp.UseExceptionHandler();<\/p>\n
\n{
\n app.MapOpenApi();
\n}<\/p>\n
\nvar dbContext = scope.ServiceProvider.GetRequiredService<TodoDbContext>();
\nawait dbContext.Database.MigrateAsync();<\/p>\n
\nappsettings.json file from the API project, it\u2019s now being injected with builder.AddSqliteDbContext<TodoDbContext>(“db”). You should remove the
\nconnection string from the appsettings.json file now.
\nAt the bottom of Program.cs we have added await dbContext.Database.MigrateAsync() to ensure that the database is up-to-date when
\nthe AppHost starts the API project. We will now move on to try out the Web API to ensure there are no issues.<\/p>\nExercise the API to ensure it\u2019s working as expected<\/h2>\n
\nendpoints that we need, it\u2019s time to test this out. To test this we will add an HTTP file. For HTTP file support in VS Code, you\u2019ll need to add an extension. There are several
\nthat you can pick from, including REST Client<\/a> and
\nhttpYac<\/a>. Either of those will work for our needs. For this tutorial, I\u2019ll show it with the
\nREST Client, but the experience with httpYac is very similar and you should be able to follow along. To install that use the Extensions tab in VS Code and type in \u201cREST Client\u201d
\nin the search box, then click Install. See the next image.<\/p>\n\n
\nThe name of the HTTP file doesn\u2019t matter; you can name it whatever you like.
\nBefore we start writing any requests in the HTTP file, run the app. To start the app, you have a few options when using C# Dev Kit. You can use the Run and Debug tab in VS Code;
\nyou can use Start Debugging (F5) or Start without Debugging (CTRL-F5). In this case we don\u2019t need to debug so we can use the keyboard shortcut CTRL-F5 to Start without Debugging and
\nchoose App Host [default configuration].
\nYou should have a .cs file opened in the VS Code editor when invoking that gesture. That will ensure that you get the right options from VS Code. When you are prompted to select
\nthe launch configuration, choose the AppHost project. This will start the Aspire Dashboard and it will automatically startup the ApiService as well.<\/p>\n\n
\nAspire dashboard overview \u2013 Aspire | Microsoft Learn<\/a>. We will go over the
\nbasics here. In the Aspire dashboard. Below I\u2019ve copied the key features from the dashboard article.<\/p>\n
\nUser interface to stop, start, and restart resources<\/a>.
\nCollects and displays logs and telemetry; view structured logs, traces, and metrics<\/a> in an intuitive UI.
\nEnhanced debugging with GitHub Copilot<\/a>, your AI-powered assistant built into the dashboard.<\/p>\n
\nshows the ApiService project, the SQLite database and a web interface to interact with the database. Later when we add the React app, it will appear in the dashboard as well. See the screenshot below.<\/p>\n\n
\nyou can override this in AppHost by specifying a specific connection string to be used. Now let\u2019s move on to create an HTTP file to ensure that the endpoints work as expected.<\/p>\n
\nREST Client documentation<\/a> or
\nUse .http files in Visual Studio 2022 | Microsoft Learn<\/a>
\n(note: some of the features described aren\u2019t supported outside of Visual Studio 2022<\/em>).<\/p>\n
\nPOST {{todoapibaseurl}}\/Todo\/
\nContent-Type: application\/json<\/p>\n
\n “title”: “Sample Todo2”,
\n “isComplete”: false,
\n “position”: 1
\n}<\/p>\n
\nPOST {{todoapibaseurl}}\/Todo\/
\nContent-Type: application\/json<\/p>\n
\n “title”: “Sample Todo2”,
\n “isComplete”: false,
\n “position”: 2
\n}
\n###
\nPOST {{todoapibaseurl}}\/Todo\/
\nContent-Type: application\/json<\/p>\n
\n “title”: “Sample Todo3”,
\n “isComplete”: false,
\n “position”: 3
\n}<\/p>\n
\nPUT {{todoapibaseurl}}\/Todo\/1
\nContent-Type: application\/json<\/p>\n
\n “id”: 1,
\n “title”: “Updated Todo”,
\n “isComplete”: true,
\n “position”: 20
\n}<\/p>\n
\nContent-Type: application\/json<\/p>\n
\n “title”: “Sample Todo no position”,
\n “isComplete”: false
\n}
\n###<\/p>\n
\nDELETE {{todoapibaseurl}}\/Todo\/1<\/p>\n
\n###<\/p>\n
\nYou can also use Rest Client: Send Request in the command palette.
\nTry out the different requests to make sure things are working correctly.
\nRemember that the database will be wiped out when the app is restarted, so you
\ndon\u2019t need to worry about adding this data. When working with this file I noticed
\ntwo issues what should be addressed.<\/p>\n
\nWhen a Todo item is POSTed without a position, the value for position will be assigned to 0.<\/p>\n
\n{
\n return await db.Todo.OrderBy(t => t.Position).ToListAsync();
\n})
\n.WithName(“GetAllTodos”);<\/p>\n
\n{
\n if (todo.Position <= 0)
\n {
\n \/\/ If position is not set, assign it to the next available position
\n todo.Position = await db.Todo.AnyAsync()
\n ? await db.Todo.MaxAsync(t => t.Position) + 1
\n : 1; \/\/ Start at position 1 if no todos exist
\n }
\n db.Todo.Add(todo);
\n await db.SaveChangesAsync();
\n return TypedResults.Created($”\/Todo\/{todo.Id}”, todo);
\n})
\n.WithName(“CreateTodo”);<\/p>\n
\neverything that we need for the API, we will move on to start the JS front-end.<\/p>\nBuild the React front-end<\/h2>\n
\nWe will use vite<\/a> as the front-end build tool.<\/p>\n
\nVariant = JavaScript<\/p>\n
\nnpm install
\nnpm run dev<\/p>\n
\nuse CTRL-C to exit the app after you execute npm run dev. Now that we have a working front-end, let\u2019s integrate it with the AppHost. We will do that with the Aspire CLI.<\/p>\n
\nAppHost project.
\nAspire integrations are NuGet packages that bootstrap config for you, and the Aspire CLI streamlines acquisition of them.
\nExecute the commands below in the src directory.
\nThis will add the package Aspire.Hosting.NodeJs into the AppHost project. It will enable some new extensions methods. Open up the AppHost.cs file in the TodojsAspire.AppHost.<\/p>\n
\n .WithReference(apiService)
\n .WaitFor(apiService)
\n .WithNpmPackageInstallation();<\/p>\n
\nAppHost selects for the app. Open the vite.config.js file in the todo-frontend folder. Replace the existing content with the following.<\/p>\n
\nimport react from ‘@vitejs\/plugin-react’<\/p>\n
\n const env = loadEnv(mode, process.cwd(), ”);<\/p>\n
\n plugins: [react()],
\n server:{
\n port: parseInt(env.VITE_PORT),
\n proxy: {
\n \/\/ “apiservice” is the name of the API in AppHost.cs.
\n ‘\/api’: {
\n target: process.env.services__apiservice__https__0 || process.env.services__apiservice__http__0,
\n changeOrigin: true,
\n secure: false,
\n rewrite: (path) => path.replace(\/^\/api\/, ”)
\n }
\n }
\n },
\n build:{
\n outDir: ‘dist’,
\n rollupOptions: {
\n input: ‘.\/index.html’
\n }
\n }
\n }
\n})<\/p>\n
\nthe front-end with the AppHost. You can start the AppHost and you should see the front-end, along with the ApiService, in the dashboard.<\/p>\n\n
\nneeded to get this app working.<\/p>\n
\ncomponents folder. We will start with the component for a todo item, create an empty file in that folder named TodoItem.jsx. Paste in the contents below into that file.<\/p>\n
\n * TodoItem component represents a single task in the TODO list.
\n * It displays the task text and provides buttons to delete the task,
\n * move the task up, and move the task down in the list.
\n *
\n * @param {Object} props – The properties passed to the component.
\n * @param {string} props.task – The text of the task.
\n * @param {function} props.deleteTaskCallback – Callback function to delete the task.
\n * @param {function} props.moveTaskUpCallback – Callback function to move the task up in the list.
\n * @param {function} props.moveTaskDownCallback – Callback function to move the task down in the list.
\n *\/
\nfunction TodoItem({ task, deleteTaskCallback, moveTaskUpCallback, moveTaskDownCallback }) {
\n return (
\n <li aria-label=”task”>
\n <span className=”text”>{task}<\/span>
\n <button
\n type=”button”
\n aria-label=”Delete task”
\n className=”delete-button”
\n onClick={() => deleteTaskCallback()}>
\n \ud83d\uddd1
\n <\/button>
\n <button
\n type=”button”
\n aria-label=”Move task up”
\n className=”up-button”
\n onClick={() => moveTaskUpCallback()}>
\n \u21e7
\n <\/button>
\n <button
\n type=”button”
\n aria-label=”Move task down”
\n className=”down-button”
\n onClick={() => moveTaskDownCallback()}>
\n \u21e9
\n <\/button>
\n <\/li>
\n );
\n}<\/p>\n
\ncomponent that we add next. We will wire up the buttons to actions in the list component. Add a new file named TodoList.jsx in the components folder and add the following content.<\/p>\n
\nimport ‘.\/TodoList.css’;
\nimport TodoItem from ‘.\/TodoItem’;<\/p>\n
\n * Todo component represents the main TODO list application.
\n * It allows users to add new todos, delete todos, and move todos up or down in the list.
\n * The component maintains the state of the todo list and the new todo input.
\n *\/
\nfunction TodoList() {
\n const [tasks, setTasks] = useState([]);
\n const [newTaskText, setNewTaskText] = useState(”);
\n const [todos, setTodo] = useState([]);<\/p>\n
\n fetch(“\/api\/Todo”)
\n .then(response => response.json())
\n .then(json => setTodo(json))
\n .catch(error => console.error(‘Error fetching todos:’, error));
\n }<\/p>\n
\n getTodo();
\n },[]);<\/p>\n
\n setNewTaskText(event.target.value);
\n }<\/p>\n
\n event.preventDefault();
\n if (newTaskText.trim()) {
\n \/\/ call the API to add the new task
\n const result = await fetch(“\/api\/Todo”, {
\n method: “POST”,
\n headers: {
\n “Content-Type”: “application\/json”
\n },
\n body: JSON.stringify({ title: newTaskText, isCompleted: false })
\n })
\n if(result.ok){
\n await getTodo();
\n }
\n \/\/ TODO: Add some error handling here, inform the user if there was a problem saving the TODO item.<\/p>\n
\n }
\n }<\/p>\n
\n console.log(`deleting todo ${id}`);
\n const result = await fetch(`\/api\/Todo\/${id}`, {
\n method: “DELETE”
\n });<\/p>\n
\n await getTodo();
\n }
\n \/\/ TODO: Add some error handling here, inform the user if there was a problem saving the TODO item.
\n }<\/p>\n
\n console.log(`moving todo ${index} up`);
\n const todo = todos[index];
\n const result = await fetch(`\/api\/Todo\/move-up\/${todo.id}`,{
\n method: “POST”
\n });<\/p>\n
\n await getTodo();
\n }
\n else{
\n console.error(‘Error moving task up:’, result.statusText);
\n }
\n }<\/p>\n
\n const todo = todos[index];
\n const result = await fetch(`\/api\/Todo\/move-down\/${todo.id}`,{
\n method: “POST”
\n });<\/p>\n
\n await getTodo();
\n } else {
\n console.error(‘Error moving task down:’, result.statusText);
\n }
\n }<\/p>\n
\n <article
\n className=”todo-list”
\n aria-label=”task list manager”>
\n <header>
\n <h1>TODO<\/h1>
\n <form
\n className=”todo-input”
\n onSubmit={addTask}
\n aria-controls=”todo-list”>
\n <input
\n type=”text”
\n required
\n autoFocus
\n placeholder=”Enter a task”
\n value={newTaskText}
\n aria-label=”Task text”
\n onChange={handleInputChange} \/>
\n <button
\n className=”add-button”
\n aria-label=”Add task”>
\n Add
\n <\/button>
\n <\/form>
\n <\/header>
\n <ol id=”todo-list” aria-live=”polite” aria-label=”task list”>
\n {todos.map((task, index) =>
\n <TodoItem
\n key={task.id}
\n task={task.title}
\n deleteTaskCallback={() => deleteTask(task.id)}
\n moveTaskUpCallback={() => moveTaskUp(index)}
\n moveTaskDownCallback={() => moveTaskDown(index)}
\n \/>
\n )}
\n <\/ol>
\n <\/article>
\n );
\n}<\/p>\n
\nNotice that the fetch calls prefix the route with \/api, this comes from the configuration of the proxy in vite.config.js. The moveTaskDown and moveTaskUp functions call the related endpoint in the API project. Next add a new file named TodoList.css in the components folder with the following content.
\nThe code from above already references this css file.<\/p>\n
\n background-color: #1e1e1e;
\n padding: 1.25rem;
\n border-radius: 0.5rem;
\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
\n width: 100%;
\n max-width: 25rem;
\n}<\/p>\n
\n text-align: center;
\n color: #e0e0e0;
\n}<\/p>\n
\n display: flex;
\n justify-content: space-between;
\n margin-bottom: 1.25rem;
\n}<\/p>\n
\n flex: 1;
\n padding: 0.625rem;
\n border: 0.0625rem solid #333;
\n border-radius: 0.25rem;
\n margin-right: 0.625rem;
\n background-color: #2c2c2c;
\n color: #e0e0e0;
\n}<\/p>\n
\n padding: 0.625rem 1.25rem;
\n background-color: #007bff;
\n color: #fff;
\n border: none;
\n border-radius: 0.25rem;
\n cursor: pointer;
\n}<\/p>\n
\n background-color: #0056b3;
\n}<\/p>\n
\n list-style-type: none;
\n padding: 0;
\n}<\/p>\n
\n display: flex;
\n justify-content: space-between;
\n align-items: center;
\n padding: 0.625rem;
\n border-bottom: 0.0625rem solid #333;
\n}<\/p>\n
\n border-bottom: none;
\n}<\/p>\n
\n flex: 1;
\n}<\/p>\n
\n background: none;
\n border: none;
\n cursor: pointer;
\n font-size: 1rem;
\n margin-left: 0.625rem;
\n color: #e0e0e0;
\n}<\/p>\n
\n color: #007bff;
\n}<\/p>\n
\n color: #ff4d4d;
\n}<\/p>\n
\n.todo-list li button.down-button {
\n color: #4caf50;
\n}<\/p>\n
\nthese components. Open up the main.jsx file in the root of the todo-frontend folder. In createRoot replace \u201croot\u201d with main. The code should look like the following.<\/p>\n
\nimport { createRoot } from ‘react-dom\/client’
\nimport ‘.\/index.css’
\nimport App from ‘.\/App.jsx’<\/p>\n
\n <StrictMode>
\n <App \/>
\n <\/StrictMode>,
\n)<\/p>\n
\n return (
\n <TodoList \/>
\n )
\n}<\/p>\n
\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
\n line-height: 1.5;
\n font-weight: 400;<\/p>\n
\n color: rgba(255, 255, 255, 0.87);
\n background-color: #242424;
\n}
\nbody {
\n font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
\n background-color: #121212;
\n color: #e0e0e0;
\n margin: 0;
\n padding: 0;
\n display: flex;
\n justify-content: center;
\n align-items: center;
\n height: 100vh;
\n}<\/p>\n
\n<html lang=”en”>
\n <head>
\n <meta charset=”UTF-8″ \/>
\n <link rel=”icon” type=”image\/svg+xml” href=”\/checkmark-square.svg” \/>
\n <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ \/>
\n <title>TODO app<\/title>
\n <link href=”https:\/\/fonts.googleapis.com\/css?family=Inter” rel=”stylesheet”>
\n <script defer type=”module” src=”\/src\/main.jsx”><\/script>
\n <\/head>
\n <body>
\n <main><\/main>
\n <\/body>
\n<\/html><\/p>\n
\nI\u2019ll now move on to wrap up this post.<\/p>\nLooking forward<\/h2>\n
\nWe won\u2019t go through that here, but we may revisit that in a future post.<\/p>\nRecap<\/h2>\n
Feedback<\/h2>\n
\nissues is dotnet\/Scaffolding<\/a>. Feedback related to C# Dev Kit can go to
\nmicrosoft\/vscode-dotnettools<\/a>. You can comment below as well. If you enjoy this type of content, please leave a comment below
\nexpressing your support. This will enable us to produce more posts of a similar nature.<\/p>\n