Open Closed

How to add an Additional *.Web project that is ABP Preconfigured in an existing ABP Solution #10578

User avatar
0
punta created

How to add an Additional *.Web project that is ABP Reconfigured in an existing, Tiered ABP Solution. The Additional ABP project should point to AuthServer and HttpApi.Host services that are already available in the solution.

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
13 Answer(s)
  • User Avatar
    1
    AI-Bot created
    Support Team ABP Agent
    • In a tiered ABP solution, *.Web is an OpenID Connect client of *.AuthServer and calls *.HttpApi.Host with the access token. To add an additional *.Web-like MVC UI that reuses the same AuthServer and HttpApi.Host, you essentially clone the existing Web app pattern: create a new MVC host project/module, set its OIDC client settings to your existing AuthServer, and set its RemoteServices base URL to your existing HttpApi.Host.

    1) Add a new MVC UI host project (e.g., MyCompany.PublicWeb)

    1. Create a new ASP.NET Core MVC host project in your solution (recommended naming examples):
      • MyCompany.PublicWeb (or MyCompany.Web.Public, MyCompany.CorporateWeb, etc.)
    2. Reference the same “Web” layer modules your existing MyCompany.Web uses (typical references):
      • MyCompany.HttpApi.Client (so you can call the existing HttpApi.Host)
      • MyCompany.Web-equivalent shared UI module(s) if you have them (optional, depends on how you organized UI code)
    3. Add a Web module class (pattern is the same as your existing *.Web module) and depend on ABP MVC UI modules + your app modules.

    2) Configure the new UI to use the existing AuthServer (OpenID Connect)

    In MyCompany.PublicWeb/appsettings.json, point to the existing AuthServer:

    {
  "AuthServer": {
    "Authority": "https://localhost:44301",
    "RequireHttpsMetadata": "false"
  },
  "App": {
    "SelfUrl": "https://localhost:44305"
  }
}

    Then configure OIDC client settings similarly to your existing *.Web project (same approach, different client id / redirect URL).

    3) Register a new OIDC client in the existing AuthServer for the new Web app

    In your existing tiered solution’s *.AuthServer, you must register a new client for this new UI (new ClientId, redirect URIs, post-logout redirect URIs), matching the new app’s URL:

    • Redirect URI example: https://localhost:44305/signin-oidc
    • Post logout callback: https://localhost:44305/signout-callback-oidc

    (How you register it depends on your solution’s seeding approach, but it must be done in the AuthServer side.)

    4) Configure the new UI to call the existing HttpApi.Host (RemoteServices)

    In MyCompany.PublicWeb/appsettings.json set the RemoteServices base URL to your existing HttpApi.Host:

    {
  "RemoteServices": {
    "Default": {
      "BaseUrl": "https://localhost:44300"
    }
  }
}

    Then ensure the new UI project references/depends on MyCompany.HttpApi.Client so it can use ABP’s generated/typed client proxies to call the existing backend.

    5) Theme: use Basic theme (or your corporate layout) in the new Web app

    If you don’t want LeptonX in the additional UI, use ABP MVC theming/bundling:

    • Start with Basic theme and override layouts / add your corporate CSS/JS via bundling.
    • ABP will allow overriding theme files by placing the same paths in your UI project (Virtual File System override behavior).

    6) Run

    Start these 3 apps together:

    • MyCompany.AuthServer
    • MyCompany.HttpApi.Host
    • MyCompany.PublicWeb (your additional MVC UI)

    Your new UI will authenticate against the existing AuthServer and call the existing HttpApi.Host, just like the original *.Web.

    Sources

    • https://abp.io/docs/10.2/suite/solution-structure
    • https://abp.io/docs/10.2/framework/ui/mvc-razor-pages/theming

    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    1
    AI-Bot created
    Support Team ABP Agent
    • Add a project reference from the new MVC UI project (e.g., MyCompany.PublicWeb) to the existing MyCompany.HttpApi.Client project:
    <!-- MyCompany.PublicWeb.csproj -->
<ItemGroup>
  <ProjectReference Include="..\..\src\MyCompany.HttpApi.Client\MyCompany.HttpApi.Client.csproj" />
</ItemGroup>
    • Then depend on the HttpApi.Client module in your new UI module class, so ABP registers the generated/typed client proxies:
    using Volo.Abp.Modularity;
using MyCompany.HttpApi.Client;

namespace MyCompany.PublicWeb;

[DependsOn(
    typeof(MyCompanyHttpApiClientModule) // this is the key
)]
public class MyCompanyPublicWebModule : AbpModule
{
}
    • Ensure your new UI has the backend base URL configured (so proxies know where to call):
    // appsettings.json (MyCompany.PublicWeb)
{
  "RemoteServices": {
    "Default": {
      "BaseUrl": "https://localhost:44300"
    }
  }
}
    • After that, you can inject your application service interfaces (from MyCompany.Application.Contracts) directly in MVC controllers/pages and ABP will call the existing HttpApi.Host through the proxy:
    public class HomeController : Controller
{
    private readonly IMyAppService _myAppService;

    public HomeController(IMyAppService myAppService)
    {
        _myAppService = myAppService;
    }
}

    Links (verified):

    • https://abp.io/docs/10.2/framework/api-development/dynamic-csharp-clients
    • https://abp.io/docs/10.2/framework/api-development/static-csharp-clients

    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    punta created

    How to make the new UI project references/depends on MyCompany.HttpApi.Client so it can use ABP’s generated/typed client proxies to call the existing backend?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    punta created

    What about using ABP MVC Project Template in the new UI solution? Should I import an existing (another) ABP *.Web project? Can I directly add a new project as ABP MVC Project Template with Basic Theme in the existing solution? How?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    1
    maliming created
    Support Team Fullstack Developer

    Hi,

    The easiest way to add an additional ABP-preconfigured Web project to your existing tiered solution is to use ABP CLI to generate a new tiered solution as a scaffold, then copy the Web project into your existing solution.

    Here's the approach:

    1. Use ABP CLI to create a new tiered MVC solution (e.g., abp new MyCompany.Public -t app -u mvc --tiered). This gives you a fully preconfigured Web project with all ABP module dependencies, OIDC configuration, HttpApi.Client references, theme integration, etc.

    2. Copy the generated *.Web project folder into your existing solution and add it to your .sln file.

    3. Update appsettings.json in the new Web project to point to your existing services:

      • AuthServer:Authority → your existing AuthServer URL
      • RemoteServices:Default:BaseUrl → your existing HttpApi.Host URL
      • App:SelfUrl → the new Web project's own URL

    4. Register a new OpenID Connect client in your existing AuthServer for the new Web project (with its own ClientId, redirect URI, and post-logout redirect URI).

    5. If you used the same company/project name when generating the new solution, the generated Web project will have the same namespace as your existing Web project. In that case, you'll need to rename the project and adjust the namespaces (e.g., MyCompany.Web → MyCompany.PublicWeb). Alternatively, you can generate the new solution with a different name (e.g., MyCompany.Public) so the Web project comes with a distinct namespace out of the box.

    This approach is much more reliable than manually creating an ABP Web project from scratch, since the generated project already has all the correct module dependencies, OIDC middleware setup, HttpApi.Client references, and theme configuration in place.

    Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    punta created

    Thanks! I was also to resort to this approach. If you have any considerations to advice me, otherwise we can close it.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Glad that works for you! A few things to keep in mind:

    • Make sure to add the new Web project's URL to the CORS configuration in both AuthServer and HttpApi.Host (App:CorsOrigins in appsettings.json).
    • If your solution uses a DbMigrator or seed data to register OpenID Connect clients, add the new client there as well so it doesn't get lost after re-seeding.
    • Use a different port for the new Web project to avoid conflicts with existing projects.

    Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    punta created

    Thanks Maliming a lot! Great points to take care of.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    : )

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    punta created

    Sorry maliming, a bit of issue once again. Would there be problem if I add the additional client web application (said above) after the existing solution complete? The existing solution (with AuthServer, remote service HttpApi.Host and the admin side *.Web project, etc) is near completion.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Hi,

    No problem at all. You can add the additional Web project at any time, even after the existing solution is complete. The new Web project is just an independent UI entry point — it won't affect your existing AuthServer, HttpApi.Host, or the admin-side Web project in any way.

    Just follow the steps we discussed earlier (register a new OIDC client, configure URLs, add CORS, etc.) and it will work the same regardless of when you add it.

    Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    punta created

    Awesome! Thanks a lot!

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Great 👍

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Assignee
User avatar maliming
Question details
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.