Introduction

This post is part of my Managing Communication and Restructring blazor UI in ABP Multi-App series. We are working with three primary applications:

• Prabh.Stock – Manages stock-related functionality
• Prabh.News – Handles market news and updates
• Prabh.Finance – Aggregates financial data, integrating both stock and news insights

In this article, we’ll switch from Project References to Package References in ABP and explore the key benefits of using package reference, such as loose coupling between services, and faster builds.

Once your solution involves multiple apps or user interfaces, relying solely on project references can quickly become a bottleneck.

This aligns perfectly with ABP’s recommendation to use static client proxies with packaged HttpApi.Client projects.

These applications use Blazor for the UI layer and PostgreSQL as the database provider.

🖼️ Screenshots

Here, the applications screenshot of all three applications.

Prabh.Stock

Prabh.News

Prabh.Finance

Requirements

The following tools are needed to be able to run the solution.

• .NET 9.0 SDK
• Visual Studio 2022 or another compatible IDE
• PostgreSQL

Troubleshooting tip

• If you try to run more than one ABP application's UI at the same time through visual studio, you might encounter issues while running. A simple workaround is to open the second application in a different browser.

⚙️ Setup

Open & Run the Application

• Open the Stock Application solution in Visual Studio (or your favorite IDE).
• Run the Prabh.Stock.DbMigrator application to seed the initial data.
• Run the Prabh.Stock.HttpApi.Host application that starts the server side.
• Run the Prabh.Stock.Blazor application to start the UI.
• Repeat above steps for Prabh.News and Prabh.Finance
• Stop All Applications after checking they are working fine.

Development

📖 What Are Project References?

• Project references are a direct link between two projects in the same solution or outside. For example, Prabh.Finance.Blazor.Client UI project may have a reference to Prabh.Finance.HttpApi.Client.

  This is fine when:

  • All projects are in the same solution.

  • You are in the early stages of development.

  • You want immediate access to code changes without publishing.

  But it comes with a cost:

  • Solutions become tightly coupled.

  • Builds become slower and more error-prone.

  • Code sharing across solutions or repositories is difficult.

  • Managing versioning is impossible.

📦 Enter Package References

• Package references are a cleaner alternative — you build your shared projects once, publish them as NuGet packages, and consume them via versioned references.

  In the context of ABP and our apps:

  • We generated static client proxies for APIs (instead of using dynamic ones).
  • We will package them as NuGet packages.
  • Reference these packages in your consumer UIs or apps.

  This approach brings:

  • Loose coupling between services.
  • Faster builds, since projects don’t compile together.
  • Clear version control and upgrade paths.
  • Better developer experience when dealing with remote backends or micro-frontends.

  Comparision between Package v/s Project References

  

  Creating and publishing NuGet packages is a broad topic with its own set of best practices, so I’ve chosen not to cover it in this video. If you’re interested, you can explore the following resources

🆕 Create the package using Visual Studio

1. Let's first generate package for Prabh.Stock.HttpApi.Host

2. Go to the root folder of the .Client project and choose project and properties

   • Enter Essentials package details, choose a md file for readme and Choose Licencse type 'SDPX Licence Expression' and in Licence Expression textbox below type 'MIT'

3. Once done, choose release mode and then right-click on the project and select ‘Pack’ after building it again.

4. If successful, you'll see the output in the Output window.

5. Create an account on the official NuGet website if you haven't registered already. and upload your nupkg file that will be in your bin / release folder

⚠️ Caution: It's always better to use static proxies along with contracts when moving towards NuGet packages

• You can learn more about it at abp docs

• If we had created the static proxies with contracts in our previous blog, we wouldn't need to create three separate packages now.

• There's no need to install all three packages separately. Simply installing the parent package is enough, as it will automatically bring in its dependent packages.

• Our csproj file will look somethink like this

🔌 Run multiple apps

• To run everything together:

1. Right-click on the solution > Set Startup Projects

2. Choose Multiple startup projects

3. Select:

   • Prabh.Stock.HttpApi.Host
   • Prabh.News.HttpApi.Host
   • Prabh.Finance.HttpApi.Host
   • Prabh.Finance.Blazor

4. Once started, you’ll have running instances of : Prabh.Finance UI and all Finance, Stock, and News backends that are using package refernces for communication

Source Code

Source code of the this completed post is available on GitHub.

Next

Now that we have replaced our project references with package references, the next step is to replace News and Stocks Blazor application into one backOffice UI app along with Finance UI public app while exploring ABP.

Introduction

This post is part of my Managing Communication and Restructring blazor UI in ABP Multi-App series. We are working with three primary applications:

• Prabh.Stock – Manages stock-related functionality
• Prabh.News – Handles market news and updates
• Prabh.Finance – Aggregates financial data, integrating both stock and news insights

In this article, we’ll switch from dynamic to static client proxies in ABP and explore the key benefits of using static proxies, such as improved performance, stronger typing, and better maintainability.

These applications use Blazor for the UI layer and PostgreSQL as the database provider.

🖼️ Screenshots

Here, the applications screenshot of all three applications.

Prabh.Stock

Prabh.News

Prabh.Finance

Requirements

The following tools are needed to be able to run the solution.

• .NET 9.0 SDK
• Visual Studio 2022 or another compatible IDE
• PostgreSQL

Troubleshooting tip

• If you try to run more than one ABP application's UI at the same time through visual studio, you might encounter issues while running. A simple workaround is to open the second application in a different browser.

⚙️ Setup

Open & Run the Application

• Open the Stock Application solution in Visual Studio (or your favorite IDE).
• Run the Prabh.Stock.DbMigrator application to seed the initial data.
• Run the Prabh.Stock.HttpApi.Host application that starts the server side.
• Run the Prabh.Stock.Blazor application to start the UI.
• Repeat above steps for Prabh.News and Prabh.Finance
• Stop All Applications after checking they are working fine.

Development

📖 ABP Client Proxy Types

• ABP provides two types of API client proxies:

  Static Proxies

  • Generated at development time

  • Faster performance (no runtime metadata fetching)

  • Must be manually regenerated when API changes

  • Ideal for production scenarios

  Dynamic Proxies

  • Generated at runtime

  • No need to regenerate when API changes

  • Easier to use during early development and testing

  • Slightly slower at runtime

  For more details, check out the official ABP documentation

🆕 Switching from Dynamic to Static Proxies in ABP

1. The backend API must be running when generating the static proxies. so Let's first generate proxy for Prabh.Stock.HttpApi.Host

2. Go to the root folder of the .Client project whose static proxies we want to generate, in our case it is Prabh.Stock.HttpApi.Client

   

3. Repeat steps 1 and 2 these for News and Finance API

4. Go to Prabh.Stock.HttpApi.Client and replace AddHttpClientProxies with AddHttpClientProxies and repeat for Prabh.Finance.HttpApi.Client and Prabh.News.HttpApi.Client

   public class StockHttpApiClientModule : AbpModule
   {
       public const string RemoteServiceName = "Stocks";
   
       public override void ConfigureServices(ServiceConfigurationContext context)
       {
           context
             .Services
             //.AddHttpClientProxies(
             .AddStaticHttpClientProxies(
               typeof(StockApplicationContractsModule).Assembly,
               RemoteServiceName
           );
       }
   }
   

⚠️ Small Fixes for Modular Setup

• Typically when a proxy file is generated for a default setup it named is abp-generate-proxy.json, but becuase we are going modular, some fixes needs to done.
  • Rename abp-generate-proxy.json to {RemoteServiceName}-generate-proxy.json
  • Also change rootPath and remoteServiceName to {RemoteServiceName} like the image below

🔌 Run multiple apps

• To run everything together:

1. Right-click on the solution > Set Startup Projects

2. Choose Multiple startup projects

3. Select:

   • Prabh.Stock.HttpApi.Host
   • Prabh.News.HttpApi.Host
   • Prabh.Finance.HttpApi.Host
   • Prabh.Finance.Blazor

4. Once started, you’ll have running instances of : Prabh.Finance UI and all Finance, Stock, and News backends that are using static proxies for communication

Source Code

Source code of the this completed post is available on GitHub.

Next

Now that we've integrated the Finance UI with all APIs using static proxies, the next step is to replace project references with NuGet package references — and explore the architectural and maintainability advantages this approach offers.

Introduction

This post is part of my Managing Communication and Restructring blazor UI in ABP Multi-App. We are working with three primary applications:

• Prabh.Stock – Manages stock-related functionality
• Prabh.News – Handles market news and updates
• Prabh.Finance – Aggregates financial data, integrating both stock and news insights

In this article, we’ll simplify running one or more applications simultaneously by introducing a new .slnx solution file at the root level. We’ll add all related projects into it using Visual Studio and organize them into solution folders for better maintainability.

These applications use Blazor for the UI layer and PostgreSQL as the database provider.

💻 Source Code

Source code of the this completed post is available on GitHub.

🖼️ Screenshots

Here, the applications screenshot of all three applications.

Prabh.Stock

Prabh.News

Prabh.Finance

Requirements

The following tools are needed to be able to run the solution.

• .NET 9.0 SDK
• Visual Studio 2022 or another compatible IDE
• PostgreSQL

Troubleshooting tip

• If you try to run more than one ABP application's UI at the same time through visual studio, you might encounter issues while running. A simple workaround is to open the second application in a different browser.

⚙️ Setup

Open & Run the Application

• Open the Stock Application solution in Visual Studio (or your favorite IDE).
• Run the Prabh.Stock.DbMigrator application to seed the initial data.
• Run the Prabh.Stock.HttpApi.Host application that starts the server side.
• Run the Prabh.Stock.Blazor application to start the UI.
• Repeat above steps for Prabh.News and Prabh.Finance
• Stop All Applications after checking they are working fine.

Development

🆕 Add a new Sln file by adding typing dotnet new sln -n Prabh.Apps in the root directory

• Add a empty solution name 'Prabh.Apps' in the root directory

  

• Ok Here is the Twist, dotnet has introduced a new compact & clean format slnx format. so lets migrate to it by typing dotnet sln migrate.

• Here is the format of new slnx

• Now open the visual studio using this new Prabh.Apps.slnx

• Then Right click and go to Add -> New Solution Folder

• Right click on solution folder and add existing project.

🔌 Run multiple apps

• To run everything together:

1. Right-click on the solution > Set Startup Projects

2. Choose Multiple startup projects

3. Select:

   • Prabh.Stock.HttpApi.Host
   • Prabh.News.HttpApi.Host
   • Prabh.Finance.HttpApi.Host
   • Prabh.Finance.Blazor

4. Once started, you’ll have running instances of : Prabh.Finance UI and all Finance, Stock, and News backends

Source Code

Source code of the this completed post is available on GitHub.

Next

While we are now able to access the Finance UI, along with the Finance, Stock, and News APIs, from a single unified solution, there’s still room for improvement.

In the upcoming blog posts, we’ll focus on decoupling these applications for better scalability and cleaner architecture. This will be done in two stages:

• Replacing dynamic proxies with static proxies

• Switching from project references to NuGet package references

Each step will be covered in a dedicated post to keep the process clear and focused.

Introduction

This post is part of my Managing Communication and Restructring blazor UI in ABP Multi-App. We are working with three primary applications:

• Prabh.Stock – Manages stock-related functionality
• Prabh.News – Handles market news and updates
• Prabh.Finance – Aggregates financial data, integrating both stock and news insights

In this article, we’ll demonstrate how to enable Prabh.Finance to call the backends of Prabh.News and Prabh.Stock by adding their HttpApi.Client projects as references.

These applications use Blazor for the UI layer and PostgreSQL as the database provider.

💻 Source Code

Source code of the this completed post is available on GitHub. ddd

🖼️ Screenshots

Here, the applications screenshot of all three applications.

Prabh.Stock

Prabh.News

Prabh.Finance

Requirements

The following tools are needed to be able to run the solution.

• .NET 9.0 SDK
• Visual Studio 2022 or another compatible IDE
• PostgreSQL

Troubleshooting tip

• If you try to run more than one ABP application's UI at the same time through visual studio, you might encounter issues while running. A simple workaround is to open the second application in a different browser.

Setup

Open & Run the Application

• Open the Stock Application solution in Visual Studio (or your favorite IDE).
• Run the Prabh.Stock.DbMigrator application to seed the initial data.
• Run the Prabh.Stock.HttpApi.Host application that starts the server side.
• Run the Prabh.Stock.Blazor application to start the UI.
• Repeat above steps for Prabh.News and Prabh.Finance
• Stop All Applications after checking they are working fine.

Development

🆕 Prabh Stock Application Changes

• Update Remote Service Name for Stock API

  • Open the Prabh.Stock.HttpApi.Client project and update the name of the Stock application's backend remote service to Stock.

    public const string RemoteServiceName = "Default";
    //change to
    public const string RemoteServiceName = "Stock";
    

• Decouple and Add new value in Remote Service for Stock API

  • Add a new Stock property with the same URL as Default in appsettings.

    This change is part of our effort to decouple our APIs from the pre-existing backend APIs (such as Accounts, tenant,localization, etc.).

    Going forward:

  • The Stock UI and any third party(e.g. Prabh Finance UI) will use the Stock prop URL to communicate with APIs developed by us.

  • The Stock UI will use the Default prop URL to communicate with APIs developed by abp and attached to our backend.

    "RemoteServices": {
      "Default": {
        "BaseUrl": "https://localhost:44354"
      },
      "AbpAccountPublic": {
        "BaseUrl": "https://localhost:44354"
      }
    }
    //add a new prop named Stock
    "RemoteServices": {
      "Default": {
        "BaseUrl": "https://localhost:44354"
      },
      "Stock": {
        "BaseUrl": "https://localhost:44354"
      },
      "AbpAccountPublic": {
        "BaseUrl": "https://localhost:44354"
      }
    },
    

    similar type of changes is needed for News API

🆕 Prabh Finance Application Changes

• Open the Prabh Finance Application solution in Visual Studio (or your preferred IDE).

• In the Prabh.Finance.HttpApi.Client project, add project references to:

  • Prabh.Stock.HttpApi.Client
  • Prabh.News.HttpApi.Client

      <ProjectReference Include="..\..\..\Prabh.Stock\src\Prabh.Stock.HttpApi.Client\Prabh.Stock.HttpApi.Client.csproj" />
      <ProjectReference Include="..\..\..\Prabh.News\src\Prabh.News.HttpApi.Client\Prabh.News.HttpApi.Client.csproj" />
    

• Sometimes Visual Studio does show a error related to reference. If you encounter this issue, run the following command in the terminal to resolve it and restart visual studio

  dotnet restore or dotnet build /graphbuild
  

• Open FinanceHttpApiClientModule module and add StockHttpApiClientModule in the DependsOn(a beauty of ABP modularity)

  using Prabh.Stock;
  using Prabh.News;
  
  namespace Prabh.Finance;
  
  [DependsOn(
      // Code remove for brevity
      typeof(StockHttpApiClientModule)
  )]
  public class FinanceHttpApiClientModule : AbpModule
  {
      // Code remove for brevity
  }
  

• You can now access the Stock APIs from within the Finance UI

• Similar changes are required to integrate the News API

🔗 Prabh Finance Blazor Consume APIs from Stock and News to combine the Data.

• Open Index.Razor.cs inside Pages of Prabh.Finance.Blazor.Client and change to something like this.

    using Blazorise;
    using Microsoft.AspNetCore.Components;
    using Prabh.News.Books;
    using Prabh.Stock.Books;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Volo.Abp.AspNetCore.Components.Alerts;
  
    namespace Prabh.Finance.Blazor.Client.Pages;
  
  
    public record LatestStockNews(string Ticker, string CompanyName, decimal CurrentPrice, string Summary);
  
  
    public partial class Index
    {
  
        [Inject] public IStockAppService StockAppService_HTTP { get; set; }
  
        [Inject] public INewsAppService NewsAppService_HTTP { get; set; }
  
        [Inject]  IMessageService MessageService { get; set; }
  
  
        private List<LatestStockNews> LatestStockNews = [];
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
  
            try
            {
                var stockResponse = await StockAppService_HTTP.GetThisMonthTopStocksAsync();
                var newsResponse = await NewsAppService_HTTP.GetTopMonthlyNewsAsync();
  
                LatestStockNews = [.. from s in stockResponse.Items.ToList()
                                              join n in newsResponse.Items.ToList() on s.Ticker equals n.Ticker
                                              select new LatestStockNews(s.Ticker, s.CompanyName, s.CurrentPrice, n.Summary)];
            }
            catch (System.Exception ex)
            {
                //This is just to mange eror If any external apis are not working or not reachable.
                MessageService?.Error("Error calling Stock Or New APis. See Console for me error");
                Console.WriteLine(ex.Message ?? ex.InnerException.Message);
            }
        }
    }
  
  

• Open Index.Razor.cs inside Pages of Prabh.Finance.Blazor.Client and change to something like this.

  <div class="card-body f">
    <div class="starting-content pe-5" style="position:static !important">
      <h1 class="f3">Prabh <strong class="c">Finance</strong> Website</h1>
      <p>💕💕 Utlimate Solution for Finance Management</p>
  
      <div>
        @if (LatestStockNews.Count > 0) {
        <CardDeck>
          @foreach (var item in LatestStockNews) {
          <Card Background="Background.Success" WhiteText>
            <CardBody>
              <CardTitle Size="5">
                <div class="d-flex justify-content-between">
                  <div>@item.CompanyName</div>
                  <div>$ @item.CurrentPrice</div>
                </div>
              </CardTitle>
  
              <CardText> @item.Summary </CardText>
            </CardBody>
          </Card>
          }
        </CardDeck>
        } else {
        <Callout Color="CalloutColor.Danger" HideHeading="true">
          <h4>Something is Wrong</h4>
          <p>
            No stock news could be loaded. Please check with your admin or try
            again later.
          </p>
        </Callout>
        }
      </div>
    </div>
  </div>
  

⚠️ Wait! CORS Still Needs to Be Configured

• One final change is needed in the Stock API and News API: currently, these services only accept HTTP requests from specific UI/Domain.

  

  Please update the appsettings.json of both projects to allow requests from Prabh Finance UI, then restart the applications.

  • Prabh.Stock.HttpApi.Host
  • Prabh.News.HttpApi.Host

  

🔌 Run & Results

• Run these project
  • Prabh.Stock.HttpApi.Host
  • Prabh.News.HttpApi.Host
  • Prabh.Finance.HttpApi.Host
  • Prabh.Finance.Blazor

Source Code

Source code of the this completed post is available on GitHub.

Next

• While we are able to access Stock API and News API from Finance UI, But we found out that the process to run all four applications are quite complex and separated.

• So, Our Next post is going to be 'Adopting the new .slnx format to organize applications and services in a streamlined solution' and is available on GitHub