Building a Full-Stack App with React and Aspire: A Step-by-Step Guide

In this post we will build we will build a TODO app from start to finish using Aspire and React. We will do this using the CLI and C# Dev Kit. The todo items will be stored in a SQLite database. The React front-end will use a Web API to handle all the interactions with the data. I’m 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. The resulting app can be published to any web host which supports ASP.NET Core – including Linux containers. First let’s start with the prerequisites to ensure you have all the components needed to follow along this tutorial.

Prerequisites

In this tutorial, we will walk through installing Aspire, but you should have these dependencies installed. You can learn more at Aspire Prerequisites Installing these items will not be covered in this post.

• .NET 9.0
• nodejs
• VS Code with C# Dev Kit
• Container runtime

Install Aspire

For detailed instructions on getting Aspire, and its dependencies, installed visit Aspire setup and tooling. We will go through the basics here. After installing .NET 9 and the other dependencies we will install the project templates using dotnet new.

Install the new Aspire CLI. The command below will install the tool globally and the dotnet new templates.

On Windows:

iex "& { $(irm https://aspire.dev/install.ps1) }"

On Linux, or macOS:

curl -sSL https://aspire.dev/install.sh | bash -s

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 -–help. Now that we have the tools installed, let’s move on and create the Aspire app.

Create the Aspire app

Now that the machine is ready with all the prerequisites we can get started. Open an empty folder in VS Code and add a new directory named src for the source files.

Let’s create the Aspire app to start with. In VS Code open the command palette CTRL/CMD-SHIFT-P and type in New Project. See the following image.

Select the Aspire Starter App template and hit enter.

When prompted for the project name use “TodojsAspire” and select “src” as the destination folder to follow along. I 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 in a terminal for the same result.

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.

Now would be a good time to execute a build to ensure that there are no build issues. Open the command palette with CTRL/CMD-SHIFT-P and select “.NET: Build”. You can also use the Solution Explorer to perform the build if you prefer that method.

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, we 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 comes with C# Dev Kit. After opening the Solution Explorer, right click on the TodojsAspire.Web project and select Remove. See the following image.

After deleting the project we need to remove any references to it. The things that need to be removed include.

• Project reference in TodojsAspire.AppHost
• Update AppHost 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 same project.

builder.AddProject<Projects.TodojsAspire_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithHttpHealthCheck("/health")
    .WithReference(apiService)
    .WaitFor(apiService);

Soon we will replace these lines with what is needed to integrate the React app. You should also delete the TodojsAspire.Web folder from the src directory. After making those changes, you should do a build to ensure that nothing was missed. To start a build, open the command palette and select Task: Run Build Task and then select