Tutorial: Add .NET Aspire to an existing .NET app

1. Start Visual Studio and then select File > Open > Project/Solution.

2. Navigate to the top level folder of the solution you cloned, select eShopLite.sln, and then select Open.

3. In the Solution Explorer, right-click the eShopLite solution, and then select Configure Startup Projects.

4. Select Multiple startup projects.

5. In the Action column, select Start for both the Products and Store projects.

6. Select OK.

7. To start debugging the solution, press F5 or select Start.

8. Two pages open in the browser:

   • A page displays products in JSON format from a call to the Products Web API.
   • A page displays the homepage of the website. In the menu on the left, select Products to see the catalog obtained from the Web API.

9. To stop debugging, close the browser.

1. Start Visual Studio Code and open the folder that you just cloned.

2. Select the Run and Debug menu item, or press Ctrl+Shift+D.

3. Select the create a launch.json file link.

   

4. Copy and paste the following JSON into this file and Save:

   • Unix
   • Windows

   {
       "version": "0.2.0",
       "compounds": [
           {
               "name": "Run all",
               "configurations": [
                   "Run products",
                   "Run store",
               ]
           }
       ],
       "configurations": [
           {
               "name": "Run products",
               "type": "dotnet",
               "request": "launch",
               "projectPath": "${workspaceFolder}/Products/Products.csproj"
           },
           {
               "name": "Run store",
               "type": "dotnet",
               "request": "launch",
               "projectPath": "${workspaceFolder}/Store/Store.csproj"
           }
       ]
   }
   

5. To start debugging the solution, press F5 or select Start.

6. Two pages open in the browser:

   • A page displays products in JSON format from a call to the Products Web API.
   • A page displays the homepage of the website. In the menu on the left, select Products to see the catalog obtained from the Web API.

7. To stop debugging, close the browser, and then select the Stop button twice (once for each running debug instance).

1. Open a terminal window and change directories into the newly cloned repository.

2. To start the Products app, run the following command:

   dotnet run --project ./Products/Products.csproj
   

3. A browser page opens, displaying the JSON for the products.

4. In a separate terminal window, again change directories to cloned repository.

5. Start the Store app by running the following command:

   dotnet run --project ./Store/Store.csproj
   

6. The browser opens a page that displays the homepage of the website. In the menu on the left, select Products to see the catalog obtained from the Web API.

7. To stop debugging, close the browser, and press Ctrl+C in both terminals.

1. In Visual Studio, in the Solution Explorer, right-click the Store project, select Add, and then select .NET Aspire Orchestrator Support.

2. In the Add .NET Aspire Orchestrator Support dialog, select OK.

   

You should now have two new projects, both added to the solution:

• eShopLite.AppHost: An orchestrator project designed to connect and configure the different projects and services of your app. The orchestrator is set as the Startup project, and it depends on the eShopLite.Store project.
• eShopLite.ServiceDefaults: A .NET Aspire shared project to manage configurations that are reused across the projects in your solution related to resilience, service discovery, and telemetry.

In the eShopLite.AppHost project, open the Program.cs file. Notice this line of code, which registers the Store project in the .NET Aspire orchestration:

builder.AddProject<Projects.Store>("store");

For more information, see AddProject.

To add the Products project to .NET Aspire:

1. In Visual Studio, in the Solution Explorer, right-click the Products project, select Add, and then select .NET Aspire Orchestrator Support.

2. A dialog indicating that .NET Aspire Orchestrator project already exists, select OK.

   

In the eShopLite.AppHost project, open the Program.cs file. Notice this line of code, which registers the Products project in the .NET Aspire orchestration:

builder.AddProject<Projects.Products>("products");

Also notice that the eShopLite.AppHost project, now depends on both the Store and Products projects.

Create an app host project

In order to orchestrate the existing projects, you need to create a new app host project. To create a new app host project from the available .NET Aspire templates, use the following .NET CLI command:

dotnet new aspire-apphost -o eShopLite.AppHost

Add the app host project to existing solution:

dotnet sln ./eShopLite.sln add ./eShopLite.AppHost/eShopLite.AppHost.csproj

dotnet sln .\eShopLite.sln add .\eShopLite.AppHost\eShopLite.AppHost.csproj

Add the Store project as a project reference to the app host project using the following .NET CLI command:

dotnet add ./eShopLite.AppHost/eShopLite.AppHost.csproj reference ./Store/Store.csproj

dotnet add .\eShopLite.AppHost\eShopLite.AppHost.csproj reference .\Store\Store.csproj

Create a service defaults project

After the app host project is created, you need to create a new service defaults project. To create a new service defaults project from the available .NET Aspire templates, use the following .NET CLI command:

dotnet new aspire-servicedefaults -o eShopLite.ServiceDefaults

To add the project to the solution, use the following .NET CLI command:

dotnet sln ./eShopLite.sln add ./eShopLite.ServiceDefaults/eShopLite.ServiceDefaults.csproj

dotnet sln .\eShopLite.sln add .\eShopLite.ServiceDefaults\eShopLite.ServiceDefaults.csproj

Update the app host project to add a project reference to the Products project:

dotnet add ./eShopLite.AppHost/eShopLite.AppHost.csproj reference ./Products/Products.csproj

dotnet add .\eShopLite.AppHost\eShopLite.AppHost.csproj reference .\Products\Products.csproj

Both the Store and Products projects need to reference the service defaults project so that they can easily include service discovery. To add a reference to the service defaults project in the Store project, use the following .NET CLI command:

dotnet add ./Store/Store.csproj reference ./eShopLite.ServiceDefaults/eShopLite.ServiceDefaults.csproj

dotnet add .\Store\Store.csproj reference .\eShopLite.ServiceDefaults\eShopLite.ServiceDefaults.csproj

The same command with slightly different paths should be used to add a reference to the service defaults project in the Products project:

dotnet add ./Products/Products.csproj reference ./eShopLite.ServiceDefaults/eShopLite.ServiceDefaults.csproj

dotnet add .\Products\Products.csproj reference .\eShopLite.ServiceDefaults\eShopLite.ServiceDefaults.csproj

In both the Store and Products projects, update their Program.cs files, adding the following line immediately after their var builder = WebApplication.CreateBuilder(args); line:

builder.AddServiceDefaults();

Update the app host project

Open the Program.cs file of the app host project, and replace its contents with the following C# code:

var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Store>("store");

builder.AddProject<Projects.Products>("products");

builder.Build().Run();

The preceding code:

• Creates a new DistributedApplicationBuilder instance.
• Adds the Store project to the orchestrator.
• Adds the Products project to the orchestrator.
• Builds and runs the orchestrator.

1. In Visual Studio, to start debugging, press F5 Visual Studio builds the projects.
2. If the Start Docker Desktop dialog appears, select Yes. Visual Studio starts the Docker engine and creates the necessary containers. When the deployment is complete, the .NET Aspire dashboard is displayed.
3. In the dashboard, select the endpoint for the products project. A new browser tab appears and displays the product catalog in JSON format.
4. In the dashboard, select the endpoint for the store project. A new browser tab appears and displays the home page for the web app.
5. In the menu on the left, select Products. The product catalog is displayed.
6. Close the browser to stop debugging.

You can delete the launch.json file that you created earlier, as it's not needed. Instead, simply start the app host project, which will orchestrate the other projects:

1. Start the app host project by right-clicking the eShopLite.AppHost project in the Solution Explorer and selecting Debug > Start New Instance:

   

   Note

   If Docker Desktop (or Podman) isn't running, you'll experience an error. Start the OCI compliant container engine and try again.

1. Start the app host project by running the following command:

   dotnet run --project ./eShopLite.AppHost/eShopLite.AppHost.csproj
   

   Note

   If Docker Desktop (or Podman) isn't running, you'll experience an error. Start the OCI compliant container engine and try again.

2. In the dashboard, select the endpoint for the products project. A new browser tab appears and displays the product catalog in JSON format.
3. In the dashboard, select the endpoint for the store project. A new browser tab appears and displays the home page for the web app.
4. In the menu on the left, select Products. The product catalog is displayed.
5. Close the browser to stop debugging.